Registry / web-framework / webpack-theme-color-replacer

webpack-theme-color-replacer

JSON →
library1.5.7jsnpmunverified

A webpack plugin (v1.5.7) that replaces theme colors in CSS at runtime, enabling live theme switching without a full rebuild. It extracts color values from CSS, injects runtime CSS variables, and replaces them via JavaScript. Suitable for single-page applications needing dynamic theming. Compared to CSS custom properties alone, it handles legacy CSS and integrates with webpack's build process. Maintained with moderate release cadence.

npm install webpack-theme-color-replacer
INSTALL
IMPORT
SIG · WEBPACK-THEME-COLO
W
webpack-theme-color-replacer
web-frameworkjavascriptv1.5.7
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
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 18223 runs
build_error
glibc
node 18223 runs
build_error
Code
Verified usage

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

ThemeColorReplacer
const ThemeColorReplacer = require('webpack-theme-color-replacer');
import ThemeColorReplacer from 'webpack-theme-color-replacer';
CommonJS export; ESM import fails due to missing default export.
client
const client = require('webpack-theme-color-replacer/client');
import { client } from 'webpack-theme-color-replacer';
Client-side runtime file must be required separately.
ThemeColorReplacer
const ThemeColorReplacer = require('webpack-theme-color-replacer').default;
Alternative CommonJS syntax if using TypeScript with esModuleInterop.

Configures the webpack plugin to replace primary color '#1890ff' at runtime and demonstrates client-side color change.

// webpack.config.js const ThemeColorReplacer = require('webpack-theme-color-replacer'); module.exports = { plugins: [ new ThemeColorReplacer({ matchColors: ['#1890ff'], // primary color fileName: 'css/theme-colors-[hash].css', externalCssFiles: [], changeSelector: async (colors) => colors.map(color => `.${color}`), injectCss: true, isJsOutput: true, resolve: {}, }) ] }; // In client code (e.g., src/index.js) const client = require('webpack-theme-color-replacer/client'); client.changer.changeColor({ oldColor: '#1890ff', newColor: '#f5222d' });
Debug
Known issues
breakingVersion 1.4.x changed the client API; client.changer.changeColor replaced old method.
fix
Use client.changer.changeColor({oldColor, newColor}) instead of client.changeColor.
affects: >=1.4.0
gotchaMatch colors must be in lowercase hex format (e.g., '#1890ff') uppercase may not be matched.
fix
Ensure colors are passed in lowercase hex format.
affects: >=1.0.0
gotchaPlugin only works with CSS extracted by mini-css-extract-plugin; inline styles not replaced.
fix
Use MiniCssExtractPlugin and ensure CSS is external, not inline.
affects: >=1.0.0
deprecatedOption 'resolve' is deprecated in v1.5+; use 'changeSelector' instead.
fix
Replace 'resolve' with 'changeSelector' function.
affects: >=1.5.0
Errors
Common errors & fixes
Error: Cannot find module 'webpack-theme-color-replacer/client'
Client module not required correctly; path may be incorrect.
fix
Use require('webpack-theme-color-replacer/client') with correct relative path.
TypeError: client.changer.changeColor is not a function
Using old API from pre-1.4 versions.
fix
Update to v1.4+ and use client.changer.changeColor({oldColor, newColor}).
Colors not being replaced at runtime
CSS not extracted or matchColors are not in lowercase hex.
fix
Ensure MiniCssExtractPlugin is used and colors are lowercase hex without alpha.
Upgrade
Version history
1.5.7latest on npm
Audit
Dependencies
webpackrequiredPlugin requires webpack as peer dependency to hook into compilation
Agent activity
12 hits · last 30 days
node
10
OpenAI (training)
1
Resources
webpack-theme-color-replacer — npm install webpack-theme-color-replacer · libregistry