antd-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.

Live Theme Demo:

https://mzohaibqc.github.io/antd-theme-webpack-plugin/index.html

https://antd-live-theme.firebaseapp.com/

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

Install

• npm install -D @taruks/antd-theme-webpack-plugin

const AntDesignThemePlugin = require('@taruks/antd-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: { dark: true, compact: true }, // can use { dark: true, compact: true } for Antd themes. All them variables will be merged.
  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.

• Here are some default paths.
• Default html file name
  • index.html
• Ant Design deafult path
  • /node_modules/antd
• Default styles directory
  • /src/styles
• Default variables file path
  • /src/styles/variables.less (import antd/lib/style/themes/default.less file at top (important))
• Default styles main file path
  • /src/styles/index.less
• Default Theme variables (that can be updated in browser)
  • example: { dark: true, compact: true }. This will produce 3 json files, defaultVars, darkVars, and compactVars, in your styles directory. They can be used by less.modifyVars.
• generateOnce: false
  • if you don't want to generate color.less on each chnage in code to make build process fast in development mode, assign it true value. But if you have new changes in your styles, you need to re-run your build process npm start.
• customColorRegexArray: [/^fade(.*)$/]
  • 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.

So if your directory structure is different or file names are different then provide correct paths as options while initailizing plugin

If you directory structure is same as below then you don't need to override path

/
  /src
    /styles
      /index.less
      /variables.less
      /otherlessfiles.less
  node_modules
  public/index.html (index.html file at any path, only name matters in this case)

If you index.html file is not being generated by build process then add following code in your index.html or whatever is the name of html main file and add indexFileName: false in options/config. This way you can better place your below script in your html file according to your needs.

<link rel="stylesheet/less" type="text/css" href="/color.less" />
<script>
  window.less = {
    async: false,
    env: 'production'
  };
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

Don't forget to add import Ant design default theme file i.e. antd/lib/style/themes/default.less in variables.less file.

Enable Javascript for less-loader

You need to enable javascript for less-loader.

{
  javascriptEnabled: true
}

Note: include all color variables in varFile that you want to change dynamically and assign them unique color codes. Don't assign same color to two or more variables and don't use #fff, #ffffff, #000 or #000000. If you still want white or black color as default, slightly change it e.g. #fffffe or #000001 which will not replace common background colors from other components.

If you variables have some custom color code like fade(@primary-color, 20%) or something that does not matches with common regex to match a valid color then add your custom regex array as customColorRegexArray variable in options object while executing generateTheme(options).

For those who are using react-app-rewire-less with react-app-rewired, enable javascript like this

module.exports = function override(config, env) {
  config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
  config = rewireLess.withLoaderOptions({
    modifyVars: {
      '@primary-color': '#002251'
    },
    javascriptEnabled: true
  })(config, env);
  config.plugins.push(new AntDesignThemePlugin(options));
  return config;
};

There will also be theme variable json files created for each theme. For example:

{ dark: true, compact: true }

This will produce 3 json files, defaultVars, darkVars, and compactVars, in your styles directory. They can be used by less.modifyVars.

Configurations using customize-cra

https://github.com/mzohaibqc/antd-theme-webpack-plugin/blob/master/examples/customize-cra/config-overrides.js

Light/Dark Theme Switch

Here is a demo to switch between light and dark themes dynamically. https://mzohaibqc.github.io/antd-theme-webpack-plugin/index.html

And here is code for this demo https://github.com/mzohaibqc/antd-theme-webpack-plugin/tree/master/examples/customize-cra