vite-plugin-theme

vite-plugin-theme的修改版本，用以支持vite3

用于动态更改界面主题色的 vite 插件。

在 vite 处理 css 后,动态解析 css 文本内符合插件配置的颜色值的时候,从所有输出的 css 文件提取指定的颜色样式代码。并创建一个仅包含颜色样式的app-theme-style.css文件，动态插入到指定的位置(默认 body 底部),然后将所使用的自定义样式/组件库样式颜色替换为新的颜色,以达到动态更改项目主题色的目的

安装 (yarn or npm)

node version: >=14.0.0

vite version: >=3.0.0

yarn add @vsilk/vite-plugin-theme -D

或者

pnpm i @vsilk/vite-plugin-theme -D

使用

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

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

import { mixDarken, mixLighten, tinycolor, viteThemePlugin } from '@vsilk/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 注入到那个标签体 |

示例项目

Vben Admin

借鉴项目

• webpack-theme-color-replacer
• webpack-stylesheet-variable-replacer-plugin

License

MIT