Ant设计：它们如何在运行时改变颜色如此之快？

Question

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

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

Answer 1

经过长时间的努力，我能够编写一个脚本来生成包含我所需的较少变量的color.less文件和仅用于更新颜色的css规则。 您可以在中型https://medium.com/@mzohaib.qc/ant-design-live-theme-588233ea2bbc阅读我的文章，或从github下载源代码并按照这一点进行操作。

Github：https://github.com/mzohaibqc/antd-live-theme

现场演示：https://antd-live-theme.firebaseapp.com/

更新（2018年9月8日）：

这是用于生成color.less以处理运行时主题的代码javascript代码/脚本 https://github.com/mzohaibqc/antd-theme-generator

使用相同脚本的反应应用程序的webpack插件就在这里 https://github.com/mzohaibqc/antd-theme-webpack-plugin

在Github上点击★★★★如果有帮助：）

Answer 2

我之前的答案已删除，因此请在此处添加一些信息。

如果您使用的是Ant Design，那么我已经创建了一个名为antd-theme-generator的npm程序包（如果您使用的是webpack，则为antd-theme-webpack-plugin）。

它允许您指定要在浏览器中动态更新并更新特定颜色主题的变量。

此处更多信息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);
})