vite-vue-plugin-theme
English | 中文
[![npm][npm-image]][npm-url] [![downloads][downloads-image]][downloads-url] [![javascript_code style][code-style-image]][code-style-url]
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 (pnpm or npm)
vite version: >=4.3.0
pnpm i vite-vue-plugin-theme -D
or
npm i vite-vue-plugin-theme -D
Usage
- Config plugin in vite.config.ts. In this way, the required functions can be introduced as needed
import { defineConfig, Plugin } from 'vite';
import vue from '@vitejs/plugin-vue';
import { viteThemePlugin, mixLighten, mixDarken, tinycolor } from 'vite-vue-plugin-theme';
export default defineConfig({
plugins: [
vue(),
viteThemePlugin({
// Match the color to be modified
colorVariables: [],
});
],
});Options
viteThemePlugin(Options)
Options
| param | type | default | desc |
|---|---|---|---|
| colorVariables | string[] |
- | If css contains the color value in the array, css will be extracted |
| wrapperCssSelector | string |
- | 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 |
| fileName | string |
app-theme-style.hash.css |
File name output after packaging |
| injectTo |
body or head or body-prepend
|
body |
The css loaded in the production environment is injected into the label body |
License
MIT