定制颜色

配置

您可以在官方配置文件中的theme里配置特定的颜色，预设中提供了themeColors方法，可以帮助您生成多明亮度的颜色。

颜色是通过magic-color生成，您可以在官方文档中预览和调试。

import { defineConfig, presetUno } from 'unocss';
import { themeColors } from 'unocss-preset-ctx';

export default defineConfig({
  theme: {
    colors: themeColors({
      primary: '#3451b2',
      warning: '#ffb300',
      danger: '#e53935',
    }),
  },
});

<div class="c-primary">text</div>
<div class="c-primary-300">text</div>
<div class="c-primary-700">text</div>

动态修改

使用themeColors时会在CSS中生成对应颜色变量，因此只要通过修改这个颜色变量，就可以更新对应的颜色了。预设中提供了updateThemeColor方法，可以更加方便去覆盖这些颜色。

参数dom可用来指定覆盖的范围，传入document.documentElement时即可覆盖整个页面的颜色。