1. Required dependencies

The project only needs to install a dependency antD-theme-generator

2. Configuration file

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

Insert the following code into the main HTML file. The first line is the reference style file. The color.less is the antD style file that we dynamically modify in real time

const { generateTheme } = require('antd-theme-generator'); const options = { antDir: path.join(__dirname, './node_modules/antd'), stylesDir: path.join(__dirname, './src'), // all files with .less extension will be processed varFile: path.join(__dirname, './src/styles/variables.less'), // default path is Ant Design default.less file themeVariables: ['@primary-color'], outputFilePath: path.join(__dirname, './public/color.less') // if provided, file will be created with generated less/styles 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. } generateTheme(options).then(less => { console.log('Theme generated successfully'); }) .catch(error => { console.log('Error', error); })Copy the code

Create color.js in the project root directory, then modify the package.json startup command

“Node color.js && craco start”

window.less.modifyVars({
  '@primary-color': '#0035ff'
})
Copy the code

You can dynamically switch topics by calling the above methods where needed

Ray point

Do not refer to antD theme styles again in your project if you need to use theme colors. Reference directly from variable.less

Project address: github.com/CHU295/reac…