Home

Awesome

vite-plugin-theme

English | 中文

npm node

Vite plugin for dynamically changing the theme color of the interface

After vite processes the css and dynamically analyzes the color value in the css text that matches the plug-in configuration, extract the specified color style code from all output css files. And create a app-theme-style.css file containing only color styles, dynamically insert it into the specified position (the bottom of the default body), and then replace the custom style/component library style color used with the new color, In order to achieve the purpose of dynamically changing the theme color of the project

Install (yarn or npm)

node version: >=12.0.0

vite version: >=2.0.0

yarn add vite-plugin-theme -D

or

npm i vite-plugin-theme -D

Usage

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({
      // Match the color to be modified
       colorVariables: [],
    });
  ],
});

Options

viteThemePlugin(Options)

Options

paramtypedefaultdesc
colorVariablesstring[]-If css contains the color value in the array, css will be extracted
wrapperCssSelectorstring-Universal outer selector. You can pass in'body' and other selectors to increase the level
resolveSelector(selector:string)=>string-Custom selector conversion
customerExtractVariable(css:string)=>string-Custom css matching color extraction logic
fileNamestringapp-theme-style.hash.cssFile name output after packaging
injectTobody or head or body-prependbodyThe css loaded in the production environment is injected into the label body

Sample project

Vben Admin

Reference project

License

MIT