reactjs - react : antd change dark or light theme on runtime

Question

stack overflow 中也有类似的问题。 ，但发布的答案对我没有帮助。我已按照步骤操作，但没有效果。基本上，我不知道将这个 config-overrides.js 放在哪里，如答案所示，而且似乎还有很多模块尚未安装。
除此之外，我还关注了antd website将 Web 应用程序配置为运行深色主题。 Web 应用程序启动后，它可以更改为深色主题。以下是代码，但是如何在运行时选择主题，即我想要的深色或浅色？
项目结构:

包.json: (脚本部分的更改)

{
  "name": "testout",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/dark-theme": "^2.0.2",
    "@craco/craco": "^5.6.4",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "antd": "^4.6.4",
    "antd-theme": "^0.3.4",
    "craco-less": "^1.17.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
   

应用.js

import React from 'react';
import './App.less';
import 'antd/dist/antd.less';
import { Button, Select } from 'antd';
function App() {
  const { Option } = Select;

  function handleChange(value) {
    console.log(`selected ${value}`);
  }
  return (
    <div className="App">
      <Button type="primary">Button</Button>
      <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
        <Option value="jack">Jack</Option>
        <Option value="lucy">Lucy</Option>
        <Option value="disabled" disabled>
          Disabled
      </Option>
        <Option value="Yiminghe">yiminghe</Option>
      </Select>

    </div>
  );
}

export default App;

craco.config.js

const CracoLessPlugin = require('craco-less');
const { getThemeVariables } = require('antd/dist/theme');


module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars:  getThemeVariables({
                         dark: true, 
                         compact: true,
            }),
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

输出:

Answer 1

我已经通过引用这个 link 得到了答案.不仅有主题切换器明暗切换的详细信息，还展示了改变antd组件颜色的方法。
我准备了github repo它有一个简化版本，只是为了演示而切换黑色和浅色主题。
页面顶部放置了一个 antd Select 组件，供您选择“深色”或“浅色”主题。以下是运行时切换主题的截图。

以下是步骤:

安装软件包。

npm i react-app-rewire-antd-theme antd-theme antd

复制~public/color.less进入你的 ~public 文件夹。你可以在上面的 github 链接的 ~public/color.less 中找到这个文件。

将以下代码复制到 标记的 ~/public/index.html 底部或正文内容之后，例如

用于默认 react index.html。

<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>

复制 ~src/components/dark.json和 ~src/components/light.json到你想要的文件夹。您可以在上面的 github 链接中的 ~src/components/中找到这两个文件。

使用以下代码调用dark.json或light.json切换主题~src/components/ThemeSelector .无论如何，代码是一个示例，您可以构建自己的代码来切换主题。

  //sample code
  let vars = value === 'light' ? lightVars : darkVars;
  vars = { ...vars, '@white': '#fff', '@black': '#000' };
  window.less.modifyVars(vars).catch(error => {});
  setTheme(value)