Webpack Theme Color Replacer

1.5.7 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Error: Cannot find module 'webpack-theme-color-replacer/client' ↓

cause Client module not required correctly; path may be incorrect.

fix

Use require('webpack-theme-color-replacer/client') with correct relative path.

error TypeError: client.changer.changeColor is not a function ↓

cause Using old API from pre-1.4 versions.

fix

Update to v1.4+ and use client.changer.changeColor({oldColor, newColor}).

error Colors not being replaced at runtime ↓

cause CSS not extracted or matchColors are not in lowercase hex.

fix

Ensure MiniCssExtractPlugin is used and colors are lowercase hex without alpha.

Warnings

breaking Version 1.4.x changed the client API; client.changer.changeColor replaced old method. ↓

fix Use client.changer.changeColor({oldColor, newColor}) instead of client.changeColor.

gotcha Match colors must be in lowercase hex format (e.g., '#1890ff') uppercase may not be matched. ↓

fix Ensure colors are passed in lowercase hex format.

gotcha Plugin only works with CSS extracted by mini-css-extract-plugin; inline styles not replaced. ↓

fix Use MiniCssExtractPlugin and ensure CSS is external, not inline.

deprecated Option 'resolve' is deprecated in v1.5+; use 'changeSelector' instead. ↓

fix Replace 'resolve' with 'changeSelector' function.

Install

npm install webpack-theme-color-replacer

yarn add webpack-theme-color-replacer

pnpm add webpack-theme-color-replacer

Imports

ThemeColorReplacer

wrong

import ThemeColorReplacer from 'webpack-theme-color-replacer';

correct

const ThemeColorReplacer = require('webpack-theme-color-replacer');

CommonJS export; ESM import fails due to missing default export.

client

wrong

import { client } from 'webpack-theme-color-replacer';

correct

const client = require('webpack-theme-color-replacer/client');

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.

Quickstart

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