antd dark 暗黑主题

chrome77 和 ios13 开始支持黑暗模式；
想要的效果：

• 想要在项目中，某些组件或页面使用暗黑模式风格
• 让所有的支持 theme 切换的组件（比如 Layout）默认从全局配置里面设置，
• 局部优先级高于全局；

实际开发中：

• 局部 dark暗黑模式，antd 暂时不支持。
• 这样会导致 antd打包会非常大，而且黑色主题是需要开发者适配，这个工作量还是蛮大的

antd 4x dark theme

https://github.com/ant-design/ant-design-dark-theme
https://ant.design/docs/react/customize-theme-cn#%E5%AE%98%E6%96%B9%E4%B8%BB%E9%A2%98-%F0%9F%8C%88

webpack.config.js 配置 darkTheme

在 webpack.config.js 使用 less-loader 按需引入

const { getThemeVariables } = require('antd/dist/theme');
// webpack.config.js
module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
+     options: {
+       lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
+         modifyVars: getThemeVariables({
+           dark: true, // 开启暗黑模式
+           compact: true, // 开启紧凑模式
+         }),
+         javascriptEnabled: true,
+       },
+     },
    }],
  }],
};