less - Ant 设计 : How are they changing color on run time and so quick?

Question

我在 React 项目中使用 Ant Design。 Ant 在less中提供样式，它提供了一种自定义主题然后构建代码(更少到css)的方法，但是在他们的网站( https://ant.design/docs/react/introduce )底部，他们有一个颜色选择器，可以让您更改@primary-color瞬间在所有地方。没有调用 api，我尝试编译 Ant Design less 文件，即 node_modules/antd/dist/antd.less在浏览器中，但编译需要几秒钟(5-10)。
我还尝试通过在 POST 请求中发送变量然后在 DOM 中插入返回的 css 来使用服务器端编译来做到这一点，但这并不好。

我需要帮助来实现此功能。提前致谢。

Answer 1

我之前的回答被删除了，所以在这里添加一些信息。
如果您使用的是 Ant Design，那么我创建了一个名为 antd-theme-generator 的 npm 包。 (或者 antd-theme-webpack-plugin 如果你使用 webpack)。
它允许您指定要在浏览器中动态更新的变量并更新颜色特定主题。
更多信息在这里https://github.com/mzohaibqc/antd-theme-generator
这是演示
https://mzohaibqc.github.io/antd-theme-generator/

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);
})