@daip_frontend/vite-plugin-theme v0.8.7
@daip_frontend/vite-plugin-theme
English | 中文
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 @daip_frontend/vite-plugin-theme -D
or
npm i @daip_frontend/vite-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 '@daip_frontend/vite-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 |
linkID | string | __VITE_PLUGIN_THEME-ANTD_DARK_THEME_LINK__ | The id name of link tag, set the link tag id name to avoid id name duplication in micro frontend new |
Q & A
'__COLOR_PLUGIN_OUTPUT_FILE_NAME__' is not defined
or'__COLOR_PLUGIN_OPTIONS__' is not defined
or'__PROD__' is not defined
?you can add the following config in the
vite.config.ts
:define: { __COLOR_PLUGIN_OPTIONS__: {}, __PROD__: true, __COLOR_PLUGIN_OUTPUT_FILE_NAME__: undefined, }
Sample project
Reference project
License
MIT