Antd Dynamic Theme Plugin

This plugin allows the project to support theme switching between dark and light modes

Getting Started

Make sure the project has antd, less, less-loader and webpack installed before starting.

To begin, you'll need to install antd-dynamic-theme-plugin.

npm install antd-dynamic-theme-plugin --save-dev

or

yarn add -D antd-dynamic-theme-plugin

Config

Then add the plugin to your webpack config. For example:

webpack.config.js

import AntdDynamicThemePlugin from 'antd-dynamic-theme-plugin';

export default {
  plugins: [
    new AntdDynamicThemePlugin({
      themeDir: 'src/theme',
      darkFileName: 'dark.less',
      lightFileName: 'light.less',
    }),
  ],
};

You need to create src/theme folder, then create dark.less and light.less, corresponding to light and dark themes respectively.For example:

dark.less

// antd color
@primary-color: #4e5969;
@background-color: #101222;

// more color
@my-color: blue;

light.less

@primary-color: green;

@my-color: red;

Usage

Now, you can use variables directly in less files without importing dark.less or light.less, For example:

.root {
  color: @my-color;
}

In js, you can get the corresponding variable through the global variable, For example:

const isDark = true;

function getColor(color) {
  const { dark, light } = window.THEMEVARS;
  return isDark ? dark[color] : light[color];
}

getColor('primary-color'); // return #4e5969

you can change theme, like this:

// dark;
window.changeGlobalTheme(true);

//light;
window.changeGlobalTheme(false);

Options

Name	Type	Default	Description
'root'	string	process.cwd()	project root directory
'themeClassPre'	string	antd-theme	global class name pre
'themeDir'	string	src/theme	The directory where the theme files are located
'darkFileName'	string	dark.less	dark theme filename
'lightFileName'	string	light.less	light theme filename
'initTheme'	dark or light	dark	default theme