Reactjs React:antd在运行时更改暗主题或亮主题

有一个类似的问题张贴在，但张贴的答案不能帮助我。我已经遵循了这些步骤，但没有效果。基本上，我不知道这个config-overrides.js应该放在哪里，如答案所示，而且似乎还有很多模块需要安装

除此之外，我还遵循了配置web应用程序以运行暗主题的步骤。它可以在web应用程序启动后更改为暗主题。下面是代码，但是如何在运行时选择主题，即我想要的暗或亮

项目结构：

package.json:（脚本部分的更改）

App.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;

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,
          },
        },
      },
    },
  ],
};

输出：

---

我已经通过引用这个问题设法得到了答案。它不仅有一个关于主题切换器在明暗之间切换的详细信息，它还显示了改变antd组件颜色的方法

我已经准备了一个简单的版本，只是为了演示而切换黑白主题

网页顶部放置了一个antd选择组件，供您选择“暗”或“亮”主题。以下是运行时切换主题的快照

以下是步骤：

安装软件包

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

将文件复制到~public文件夹中。您可以在上面github链接的~public/color.less中找到此文件

将以下代码复制到标记底部的~/public/index.html中，或复制到正文内容之后，例如default 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>

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

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