vite-plugin-theme-vite3

2.0.1 verified Mon Apr 27 auth: no javascript

Vite plugin for dynamically changing theme colors at runtime. Current version 2.0.1, requires Node >=20 and Vite >=7.0.0. Extracts color variables from CSS files after Vite processing, generates a separate theme style file (`app-theme-style.css`), and allows dynamic color replacement via JavaScript. Supports custom color variables, selectors, and injection points. Similar to webpack-theme-color-replacer but for Vite ecosystem. Minimal peer dependencies (only Vite).

Common errors

error Error: Cannot find module 'vite-plugin-theme-vite3' ↓

cause Package not installed or incorrect import path.

fix

Run pnpm add vite-plugin-theme-vite3 -D and import from 'vite-plugin-theme-vite3' (no subpath).

error TypeError: viteThemePlugin is not a function ↓

cause Using default import instead of named import.

fix

Use import { viteThemePlugin } from 'vite-plugin-theme-vite3'.

error Error: The plugin 'vite-plugin-theme-vite3' requires Vite >=7.0.0. Current Vite version is X.X.X. ↓

cause Incompatible Vite version.

fix

Upgrade Vite to >=7.0.0 or downgrade the plugin to v1.x (not recommended).

error Error: Options 'colorVariables' is required ↓

cause Missing required option.

fix

Add colorVariables: ['#yourColor'] to the plugin options.

Warnings

breaking Version 2.x requires Vite >=7.0.0 and Node >=20.0.0. ↓

fix Upgrade Vite to >=7.0.0 and Node to >=20.0.0.

breaking Plugin options changed in v2; `colorVariables` is now required and must be an array of hex strings (not CSS variables). ↓

fix Pass an array of color strings (e.g., ['#1890ff']) to `colorVariables`.

deprecated The `resolveSelector` option is deprecated; use `wrapperCssSelector` instead. ↓

fix Replace `resolveSelector` with `wrapperCssSelector`.

gotcha The plugin only processes CSS after Vite's build step; it does not work with Dev Server hot reload by default. ↓

fix Use the `handleHotUpdate` API or disable HMR for CSS if needed.

gotcha If using with Vue's scoped styles, the plugin may not extract colors from scoped CSS selectors correctly. ↓

fix Ensure color variables are not scoped, or use a custom `customerExtractVariable` function.

Install

npm install vite-plugin-theme-vite3

yarn add vite-plugin-theme-vite3

pnpm add vite-plugin-theme-vite3

Imports

viteThemePlugin

wrong

import viteThemePlugin from 'vite-plugin-theme-vite3'

correct

import { viteThemePlugin } from 'vite-plugin-theme-vite3'

Default export is not available; use named import.

mixLighten

wrong

const { mixLighten } = require('vite-plugin-theme-vite3')

correct

import { mixLighten } from 'vite-plugin-theme-vite3'

ESM only; do not use require().

mixDarken

wrong

import { mixDarken } from 'vite-plugin-theme-vite3/dist/index.mjs'

correct

import { mixDarken } from 'vite-plugin-theme-vite3'

Import from package root, not subpath.

tinycolor
```
import { tinycolor } from 'vite-plugin-theme-vite3'
```
A re-export of the tinycolor2 library for color manipulation.

Plugin

wrong

import { Plugin } from 'vite-plugin-theme-vite3'

correct

import type { Plugin } from 'vite'

Plugin type is from Vite, not this package.

Quickstart

Configure viteThemePlugin in vite.config.ts with color variables using tinycolor.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { viteThemePlugin, mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme-vite3';

export default defineConfig({
  plugins: [
    vue(),
    viteThemePlugin({
      colorVariables: [tinycolor('#1890ff').toHexString()],
      wrapperCssSelector: 'body',
      fileName: 'theme-colors.css',
      injectTo: 'body',
    }),
  ],
});