{"id":22882,"library":"vite-plugin-theme","title":"vite-plugin-theme","description":"Vite plugin for dynamically changing theme colors at runtime. Version 0.8.6 requires Vite >=2.0.0 and Node >=12.0.0. It extracts specified color variables from CSS output at build time, generating a separate theme stylesheet (app-theme-style.css) that can be dynamically swapped via JavaScript. Unlike CSS custom properties or runtime CSS-in-JS approaches, this plugin works with static CSS and supports deep customization options like custom selector resolution and variable extraction logic. Released under MIT, maintained by Vben Admin team. Not actively updated since mid-2023.","status":"maintenance","version":"0.8.6","language":"javascript","source_language":"en","source_url":"https://github.com/vbenjs/vite-plugin-theme","tags":["javascript","vite","typescript"],"install":[{"cmd":"npm install vite-plugin-theme","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-theme","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-theme","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for plugin functionality","package":"vite","optional":false}],"imports":[{"note":"Default export is named, not default. ESM-only, no CommonJS support.","wrong":"const viteThemePlugin = require('vite-plugin-theme').viteThemePlugin","symbol":"viteThemePlugin","correct":"import { viteThemePlugin } from 'vite-plugin-theme'"},{"note":"Utility function for color manipulation, exported as named export.","wrong":"import mixLighten from 'vite-plugin-theme'","symbol":"mixLighten","correct":"import { mixLighten } from 'vite-plugin-theme'"},{"note":"Utility function for darkening colors, exported as named export.","wrong":"import { mixDarken } from 'vite-plugin-theme/mixDarken'","symbol":"mixDarken","correct":"import { mixDarken } from 'vite-plugin-theme'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport { viteThemePlugin, mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme';\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    viteThemePlugin({\n      colorVariables: [\n        // CSS values to be dynamically replaced (e.g., primary color hex)\n        '#1890ff',\n        '#096dd9'\n      ],\n      wrapperCssSelector: 'body',\n      injectTo: 'body',\n      fileName: 'app-theme-style.hash.css',\n      // Optional custom selector resolution\n      resolveSelector: (selector) => selector,\n    }),\n  ],\n});","lang":"typescript","description":"Configures vite-plugin-theme in a Vite + Vue project, specifying colors to extract and dynamic injection options."},"warnings":[{"fix":"Ensure all theme-dependent styles are in CSS files (not inline) for extraction to work.","message":"The plugin only extracts colors from static CSS files processed by Vite, not from inline styles or dynamically injected CSS.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Include the exact full color string (e.g., '#1890ff' not '#189') in colorVariables array.","message":"colorVariables must be exact color values (e.g., hex, rgb) as they appear in CSS; partial matches are not supported.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use injectTo: 'head' or 'body-prepend' to control load order, or ensure main CSS loads before this file.","message":"The plugin generates a separate CSS file that must be loaded after the main stylesheet; incorrect injectTo position can cause flash of unstyled content.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Test compatibility with your Vite version; consider using CSS custom properties for modern themes.","message":"Does not support Vite 5+ or newer esbuild CSS minification features; may require workarounds for advanced CSS transforms.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use Vite 2.x or fork the plugin to adapt to newer Vite versions.","cause":"Vite 3+ changed CSS plugin internals, causing the plugin's hooks to fail.","error":"Error: The plugin is not compatible with Vite 3.0+ because of internal CSS processing changes."},{"fix":"Filter out virtual CSS modules in the plugin's transform hook or avoid using inline CSS from virtual modules.","cause":"The plugin encounters a CSS transform for a non-file module (e.g., virtual module).","error":"[vite-plugin-theme] Cannot read properties of undefined (reading 'id')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}