Skip to content

thinkgem/vite-plugin-theme-vite3

 
 

Repository files navigation

vite-plugin-theme-vite3

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-vite3 -D

or

npm i vite-plugin-theme-vite3 -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-plugin-theme-vite3';

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

Sample project

Vben Admin

Reference project

License

MIT

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 78.9%
  • JavaScript 21.1%