通用

filter: invert(0.9) hue-rotate(180deg);

ant-design-vue

通过 vite-plugin-theme (opens new window) 插件，将所有的颜色变量抽取到独立的 css 文件，并且全部在 html 上面加上 css 选择器。通过改变 html 标签的 data-theme 属性来进行黑暗主题切换

安装

• npm i vite-plugin-theme -D

使用

• 在 vite.config.ts 中配置,该方式可以按需引入需要的功能即可

import { defineConfig, Plugin } from 'vite';
import vue from '@vitejs/plugin-vue';

import { viteThemePlugin, mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme';

export default defineConfig({
  plugins: [
    vue(),
    viteThemePlugin({
      // 匹配需要修改的颜色
       colorVariables: [],
    });
  ],
});

参数说明

viteThemePlugin(Options)

Options

参数	类型	默认值	说明
colorVariables	string[]	-	如果 css 内包含在该数组内的颜色值，则会抽取出 css
wrapperCssSelector	string	-	通用外层选择器。可以传入 'body'等用用选择器来提高层级
resolveSelector	(selector:string)=>string	-	自定义选择器转换
customerExtractVariable	(css:string)=>string	-	自定义 css 匹配颜色抽取逻辑
fileName	string	app-theme-style.hash.css	打包后输出的文件名
injectTo	body或head或body-prepend	body	生产环境加载的 css 注入到那个标签体

#

element-plus