{"id":22881,"library":"vite-plugin-theme-vite3","title":"vite-plugin-theme-vite3","description":"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).","status":"active","version":"2.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/thinkgem/vite-plugin-theme-vite3","tags":["javascript","vite","typescript"],"install":[{"cmd":"npm install vite-plugin-theme-vite3","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-theme-vite3","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-theme-vite3","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Default export is not available; use named import.","wrong":"import viteThemePlugin from 'vite-plugin-theme-vite3'","symbol":"viteThemePlugin","correct":"import { viteThemePlugin } from 'vite-plugin-theme-vite3'"},{"note":"ESM only; do not use require().","wrong":"const { mixLighten } = require('vite-plugin-theme-vite3')","symbol":"mixLighten","correct":"import { mixLighten } from 'vite-plugin-theme-vite3'"},{"note":"Import from package root, not subpath.","wrong":"import { mixDarken } from 'vite-plugin-theme-vite3/dist/index.mjs'","symbol":"mixDarken","correct":"import { mixDarken } from 'vite-plugin-theme-vite3'"},{"note":"A re-export of the tinycolor2 library for color manipulation.","wrong":"","symbol":"tinycolor","correct":"import { tinycolor } from 'vite-plugin-theme-vite3'"},{"note":"Plugin type is from Vite, not this package.","wrong":"import { Plugin } from 'vite-plugin-theme-vite3'","symbol":"Plugin","correct":"import type { Plugin } from 'vite'"}],"quickstart":{"code":"import { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport { viteThemePlugin, mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme-vite3';\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    viteThemePlugin({\n      colorVariables: [tinycolor('#1890ff').toHexString()],\n      wrapperCssSelector: 'body',\n      fileName: 'theme-colors.css',\n      injectTo: 'body',\n    }),\n  ],\n});","lang":"typescript","description":"Configure viteThemePlugin in vite.config.ts with color variables using tinycolor."},"warnings":[{"fix":"Upgrade Vite to >=7.0.0 and Node to >=20.0.0.","message":"Version 2.x requires Vite >=7.0.0 and Node >=20.0.0.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Pass an array of color strings (e.g., ['#1890ff']) to `colorVariables`.","message":"Plugin options changed in v2; `colorVariables` is now required and must be an array of hex strings (not CSS variables).","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Replace `resolveSelector` with `wrapperCssSelector`.","message":"The `resolveSelector` option is deprecated; use `wrapperCssSelector` instead.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Use the `handleHotUpdate` API or disable HMR for CSS if needed.","message":"The plugin only processes CSS after Vite's build step; it does not work with Dev Server hot reload by default.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure color variables are not scoped, or use a custom `customerExtractVariable` function.","message":"If using with Vue's scoped styles, the plugin may not extract colors from scoped CSS selectors correctly.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run `pnpm add vite-plugin-theme-vite3 -D` and import from 'vite-plugin-theme-vite3' (no subpath).","cause":"Package not installed or incorrect import path.","error":"Error: Cannot find module 'vite-plugin-theme-vite3'"},{"fix":"Use `import { viteThemePlugin } from 'vite-plugin-theme-vite3'`.","cause":"Using default import instead of named import.","error":"TypeError: viteThemePlugin is not a function"},{"fix":"Upgrade Vite to >=7.0.0 or downgrade the plugin to v1.x (not recommended).","cause":"Incompatible Vite version.","error":"Error: The plugin 'vite-plugin-theme-vite3' requires Vite >=7.0.0. Current Vite version is X.X.X."},{"fix":"Add `colorVariables: ['#yourColor']` to the plugin options.","cause":"Missing required option.","error":"Error: Options 'colorVariables' is required"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}