Registry /
web-framework / vite-theme-color-replacer
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
muslnode 18–223 runs
build_error
glibcnode 18–223 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
default export (plugin)
✓ import viteThemeColorReplacer from 'vite-theme-color-replacer'
✗ const viteThemeColorReplacer = require('vite-theme-color-replacer')
ESM-only; types included
getElementUISeries
✓ import { getElementUISeries } from 'vite-theme-color-replacer/forElementUI'
✗ import { getElementUISeries } from 'vite-theme-color-replacer'
Utility is in separate subpath; not exported from main entry
changer (runtime client)
✓ import { changer } from 'vite-theme-color-replacer/client'
✗ import { changer } from 'vite-theme-color-replacer'
Runtime API is in client subpath; not available server-side
changeElementUISelector
✓ import { changeElementUISelector } from 'vite-theme-color-replacer/forElementUI'
Only for Element UI; different UI frameworks need custom selectors
Shows Vite plugin configuration with Element UI series and runtime color change using the client API.
// vite.config.ts
import { defineConfig } from 'vite';
import viteThemeColorReplacer from 'vite-theme-color-replacer';
import { getElementUISeries } from 'vite-theme-color-replacer/forElementUI';
export default defineConfig({
plugins: [
viteThemeColorReplacer({
matchColors: getElementUISeries('#409EFF'),
fileName: 'css/theme-colors-[contenthash:8].css',
injectCss: false,
}),
],
});
// client.js
import { changer } from 'vite-theme-color-replacer/client';
import { getElementUISeries } from 'vite-theme-color-replacer/forElementUI';
async function changeTheme(newPrimaryColor: string) {
const newColors = getElementUISeries(newPrimaryColor);
await changer.changeColor({ newColors, appendToEl: 'body' });
}
changeTheme('#f56c6c');
Errors
Common errors & fixes
Cannot find module 'vite-theme-color-replacer/forElementUI'
The subpath 'forElementUI' is not included when installed without TypeScript declaration files or with a bundler that doesn't resolve it.
fixEnsure your project is using ESM (type: module in package.json) and your bundler supports package.json exports. Or use a newer version of vite-theme-color-replacer.
TypeError: Cannot read properties of undefined (reading 'map')
The 'matchColors' option is missing or is not an array of strings.
fixProvide an array of color strings, e.g., matchColors: ['#409EFF', '#1890ff']
The 'newColors' argument must be an array of strings matching matchColors length.
Number of new colors does not match the number of extracted colors at build time.
fixGet new colors using the same function that generated matchColors, e.g., getElementUISeries(newPrimaryColor).
Failed to load theme-colors CSS: net::ERR_ABORTED 404
The generated theme CSS file URL is incorrect in the running environment (e.g., base path mismatch).
fixUse the 'changeUrl' option in changer.changeColor to adjust the URL, or ensure the CSS file is served correctly.
Audit
Dependencies
viterequiredpeer dependency: required as a Vite plugin