Question

在stack overflow中发布了类似的问题，但发布的答案无济于事。我已经执行了步骤，但是没有任何效果。基本上，我不知道答案中显示的config-overrides.js放在哪里，而且似乎还有许多模块需要安装。

除此之外，我还遵循antd website来配置Web应用程序以运行深色主题。 Web应用程序启动后，它可以更改为深色主题。以下是代码，但是如何选择运行时想要的主题，即深色还是浅色？

项目结构：

Project structure

package.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"
    ]
  }
}

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;

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

输出：

Project structure

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底部或正文内容之后，例如

用于默认反应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)

React：在运行时antd改变深色或浅色主题

1 个答案: