Unocss的主题应用

Unocss 是一个原子 CSS 引擎，它可以高度定制并优化您的 CSS 输出。使用 Unocss 时，您可以通过主题功能来定义和应用一致的样式变量，例如颜色、字体、间距等，从而保持整个项目的设计一致性。

如何在 Unocss 中设置和使用主题

安装 Unocss
首先，确保您已经将 Unocss 添加到您的项目中。如果尚未添加，可以通过以下命令使用 npm 或 yarn 安装它：

1	npm install -D unocss

或者

1	yarn add -D unocss

配置 Unocss
在 Vue 项目中，通常在 vite.config.js 或类似的配置文件中设置 Unocss。这里是如何配置 Unocss，并定义一些基本的主题变量：

// vite.config.js
import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';
import Unocss from 'unocss/vite';

export default defineConfig({
  plugins: [
    Vue(),
    Unocss({
      theme: {
        colors: {
          brand: '#5e81ac',
          'brand-light': '#81a1c1',
          'brand-dark': '#4c566a',
        },
        fontFamily: {
          sans: 'Roboto, sans-serif',
          serif: 'Merriweather, serif',
        },
      },
      // 更多 Unocss 配置项
    })
  ]
});

使用主题变量
在项目中，您现在可以使用定义好的主题变量。例如，要在组件中应用这些颜色和字体，您可以直接引用您的配置名称：

<template>
  <div class="font-sans bg-brand text-brand-dark p-4">
    Welcome to our website styled with Unocss!
  </div>
</template>

生成主题的实用工具类
Unocss 会根据您的配置自动生成相关的实用工具类。这意味着您可以直接在 HTML 或 Vue 模板中使用例如 bg-brand, text-brand-dark 等类名。
动态主题切换
如果您想在运行时切换主题，您可能需要动态修改 CSS 变量。这通常涉及到在一个更高的层级（如 :root 或 body）上动态设置 CSS 变量，并让 Unocss 使用这些变量：

/* 全局样式文件 */
:root {
  --color-brand: #5e81ac;
}

[data-theme="dark"] {
  --color-brand: #4c566a;
}

然后在 Unocss 配置中使用这些 CSS 变量：

theme: {
  colors: {
    brand: 'var(--color-brand)',
  },
}