Vite plugin for dynamically changing the theme color of the interface

Package: vite-plugin-theme

Created by: vbenjs

Last modified: Mon, 23 May 2022 08:41:10 GMT

Version: 0.8.6

License: MIT

Downloads: 17,988

Repository: https://github.com/vbenjs/vite-plugin-theme

Install

npm install vite-plugin-theme

yarn add vite-plugin-theme

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 vite-plugin-theme -D

npm i 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 '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