{"id":20847,"library":"webpack-theme-color-replacer","title":"Webpack Theme Color Replacer","description":"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.","status":"active","version":"1.5.7","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","webpack","theme","color","replacer","runtime"],"install":[{"cmd":"npm install webpack-theme-color-replacer","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-theme-color-replacer","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-theme-color-replacer","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Plugin requires webpack as peer dependency to hook into compilation","package":"webpack","optional":false}],"imports":[{"note":"CommonJS export; ESM import fails due to missing default export.","wrong":"import ThemeColorReplacer from 'webpack-theme-color-replacer';","symbol":"ThemeColorReplacer","correct":"const ThemeColorReplacer = require('webpack-theme-color-replacer');"},{"note":"Client-side runtime file must be required separately.","wrong":"import { client } from 'webpack-theme-color-replacer';","symbol":"client","correct":"const client = require('webpack-theme-color-replacer/client');"},{"note":"Alternative CommonJS syntax if using TypeScript with esModuleInterop.","wrong":"","symbol":"ThemeColorReplacer","correct":"const ThemeColorReplacer = require('webpack-theme-color-replacer').default;"}],"quickstart":{"code":"// webpack.config.js\nconst ThemeColorReplacer = require('webpack-theme-color-replacer');\n\nmodule.exports = {\n  plugins: [\n    new ThemeColorReplacer({\n      matchColors: ['#1890ff'], // primary color\n      fileName: 'css/theme-colors-[hash].css',\n      externalCssFiles: [],\n      changeSelector: async (colors) => colors.map(color => `.${color}`),\n      injectCss: true,\n      isJsOutput: true,\n      resolve: {},\n    })\n  ]\n};\n\n// In client code (e.g., src/index.js)\nconst client = require('webpack-theme-color-replacer/client');\nclient.changer.changeColor({ oldColor: '#1890ff', newColor: '#f5222d' });","lang":"javascript","description":"Configures the webpack plugin to replace primary color '#1890ff' at runtime and demonstrates client-side color change."},"warnings":[{"fix":"Use client.changer.changeColor({oldColor, newColor}) instead of client.changeColor.","message":"Version 1.4.x changed the client API; client.changer.changeColor replaced old method.","severity":"breaking","affected_versions":">=1.4.0"},{"fix":"Ensure colors are passed in lowercase hex format.","message":"Match colors must be in lowercase hex format (e.g., '#1890ff') uppercase may not be matched.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use MiniCssExtractPlugin and ensure CSS is external, not inline.","message":"Plugin only works with CSS extracted by mini-css-extract-plugin; inline styles not replaced.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Replace 'resolve' with 'changeSelector' function.","message":"Option 'resolve' is deprecated in v1.5+; use 'changeSelector' instead.","severity":"deprecated","affected_versions":">=1.5.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use require('webpack-theme-color-replacer/client') with correct relative path.","cause":"Client module not required correctly; path may be incorrect.","error":"Error: Cannot find module 'webpack-theme-color-replacer/client'"},{"fix":"Update to v1.4+ and use client.changer.changeColor({oldColor, newColor}).","cause":"Using old API from pre-1.4 versions.","error":"TypeError: client.changer.changeColor is not a function"},{"fix":"Ensure MiniCssExtractPlugin is used and colors are lowercase hex without alpha.","cause":"CSS not extracted or matchColors are not in lowercase hex.","error":"Colors not being replaced at runtime"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}