是否可以将Ant设计主题更改为动态主题

Question

在react 16.7CRA中，有没有办法在运行时改变Ant的设计主题？Config-overides.js文件如下所示

​

const { override, fixBabelImports } = require('customize-cra');

 module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd',
     libraryDirectory: 'es',
     style: 'css',
   }),
addLessLoader({
   javascriptEnabled: true,
   modifyVars: { '@primary-color': '#1DA57A' },
 })
 );

​

这段代码将颜色更改为静态颜色，但是如何将其设置为动态颜色

Answer 1

是的，现在可以使用antd-theme-webpack-plugin了。您可以在live demo how it works的源代码中看到(通过调用window.less.modifyVars(vars))。

正如存储库中所述，webpack插件注入了一个javascript文件，使您的应用程序可以像动态修改较少的变量一样运行。另请注意，正如代码库中所述，如果您的webpack没有生成HTML语言，则需要手动修改它以包含库和适当的script文件。

Answer 2

实现这一点的另一种方法是创建另一组仅用于暗模式的css，并对其进行作用域。

编译器以某种方式处理的越少，但是在代码中提供更少的编译文件的顺序上需要格外小心。为此，您可能需要尝试并出错。基本思想是：

import './styles/dark.less';
import './styles/index.less';

在dark.less中，您将或多或少地

[data-theme^="dark"] {
  @import "./your.less";   
}

现在，您可以通过在根html标记中赋值来动态选择模式。至于这一点，这个链接可能会有帮助：https://medium.com/missive-app/make-your-electron-app-dark-mode-compatible-c23dcfdd0dfa