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 |