Registry / web-framework / vite-plugin-theme-vite3

vite-plugin-theme-vite3

library2.0.1jsnpmunverified

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).

web-framework

npm install vite-plugin-theme-vite3

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-THEME-

vite-plugin-theme-vite3

web-frameworkjavascriptv2.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

viteThemePlugin

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

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

Default export is not available; use named import.

mixLighten

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

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

ESM only; do not use require().

mixDarken

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

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

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

✓ import type { Plugin } from 'vite'

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

Plugin type is from Vite, not this package.

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', }), ], });

Debug

Known issues

breakingVersion 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.

affects: >=2.0.0

breakingPlugin 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`.

affects: >=2.0.0

deprecatedThe `resolveSelector` option is deprecated; use `wrapperCssSelector` instead.

fix

Replace `resolveSelector` with `wrapperCssSelector`.

affects: >=2.0.0

gotchaThe 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.

affects: >=1.0.0

gotchaIf 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.

affects: >=1.0.0

Errors

Common errors & fixes

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

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).

TypeError: viteThemePlugin is not a function

Using default import instead of named import.

fix

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

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

Incompatible Vite version.

fix

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

Error: Options 'colorVariables' is required

Missing required option.

fix

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

Upgrade

Version history

2.0.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/thinkgem/vite-plugin-theme-vite3 ↗

packagehttps://www.npmjs.com/package/vite-plugin-theme-vite3 ↗