Skip to content
This repository has been archived by the owner on Aug 30, 2024. It is now read-only.
/ vite-plugin-theme Public archive

Vite plugin for dynamically changing the theme color of the interface

License

Notifications You must be signed in to change notification settings

vbenjs/vite-plugin-theme

Repository files navigation

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

  • 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

Sample project

Vben Admin

Reference project

License

MIT