@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

Q & A

1. '__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

Vben Admin

Reference project

• webpack-theme-color-replacer
• webpack-stylesheet-variable-replacer-plugin

License

MIT