@trinapower/vite-plugin-theme v1.0.0-alpha.4

@trinapower/vite-plugin-theme

中文 | English

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

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

安装 (pnpm)

node version: >=12.0.0

vite version: >=2.0.0

pnpm add @trinapower/vite-plugin-theme -D

使用

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

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

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

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

参数说明

viteThemePlugin(Options)

Options

借鉴项目

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

License

MIT