@fishx/fishx-theme-webpack-plugin

This webpack plugin is to generate color specific less/css and inject into your index.html file so that you can change Ant Design specific color theme in browser.

In order to integrate with your webpack configurations, install the package and add following code in your webpack config file.

Install

• npm install -D @fishx/fishx-theme-webpack-plugin

const AntDesignThemePlugin = require('@fishx/fishx-theme-webpack-plugin');

const options = {
  antDir: path.join(__dirname, './node_modules/antd'),
  stylesDir: path.join(__dirname, './src/styles'),
  varFile: path.join(__dirname, './src/styles/variables.less'),
  mainLessFile: path.join(__dirname, './src/styles/index.less'),
  themeVariables: ['@primary-color'],
  indexFileName: 'index.html',
  generateOnce: false,
  lessUrl: "https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js",
  publicPath: "",
  customColorRegexArray: [], // An array of regex codes to match your custom color variable values so that code can identify that it's a valid color. Make sure your regex does not adds false positives.
}

const themePlugin = new AntDesignThemePlugin(options);
// in config object
plugins: [
    themePlugin
  ]

Add this plugin in plugins array.