如何为 React App 应用 antd dark 主题？

Question

我想将这个黑暗主题用于我的新反应 web 应用程序： https://github.com/ant-design/ant-design-dark-theme

按照此处自定义主题的说明和此处自述文件中应用主题的说明进行操作后，我的 config-overrides.js 如下所示：

const { darkTheme } = require('@ant-design/dark-theme');
const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: darkTheme
  }),
);

这似乎不起作用。 例如，我有一个 Menu antd 组件仍然以“light”主题而不是“dark”主题显示。

我想让我所有的 antd 组件都以深色主题呈现，而无需我明确设置它。 那可能吗？ 如果是，我做错了什么？

这里不是前端开发人员，所以如果我遗漏了一些明显的东西，请告诉我。

Answer 1

对我有用的解决方案是@JoseFelix 和@Anujs 答案的组合。 谢谢两位的回答：

const darkTheme = require('@ant-design/dark-theme');
const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: darkTheme.default
  }),
);

Answer 2

当默认导出是带有变量的对象时，代码正在解构默认导出。 因此，它应该是：

const darkTheme = require('@ant-design/dark-theme').default;
const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: darkTheme
  }),
);

Answer 3

如果您控制台日志已导入的darkTheme变量，则所有样式变量都存在于darkTheme.default对象中。 我已经实现了他们的aliyum-theme 。

因此，为了让您的代码正常工作，您需要将config-overrides.js文件中的modifyVars更改为

const { darkTheme } = require('@ant-design/dark-theme');
const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {...darkTheme.default}
  }),
);

专业提示：要在应用程序中覆盖 darkTheme，您可以创建自己的 javascript 文件并将其导入config-overrides.js文件并在modifyVars

Answer 4

以前的答案对我不起作用。 如果它可以帮助其他人，这对我有用。 我认为这是由于新的 less loader 版本和/或 antd 打包方式的变化（我真的不确定）。

const { getThemeVariables } = require("antd/dist/theme");
const { override, fixBabelImports, addLessLoader } = require("customize-cra");

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: true,
  }),
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: {
        ...getThemeVariables({
          dark: true,
          compact: true,  // optional
        }),
      },
    },
  })
);

Answer 5

https://www.npmjs.com/package/antd-theme

应用程序.jsx

import { Button, Select } from 'antd';
import { ThemeProvider, useTheme } from 'antd-theme';
import React from 'react';
import ReactDOM from 'react-dom';
import { SketchPicker } from 'react-color';

const initialTheme = {
  name: 'default',
  variables: { 'primary-color': '#00ff00' },
};

const ThemeSelect = () => {
  const [{ name, variables, themes }, setTheme] = useTheme();

  return (
    <>
      <Select
        style={{ width: 100 }}
        value={name}
        onChange={
          (theme) => setTheme({ name: theme, variables })
        }
      >
        {
          themes.map(
            ({ name }) => (
              <Select.Option key={name} value={name}>
                {name}
              </Select.Option>
            )
          )
        }
      </Select>
      <SketchPicker
        color={variables['primary-color']}
        onChange={(value) => {
          // Will update all css attributes affected by primary-color
          setTheme({ name, variables: { 'primary-color': value.hex } });
        }}
      />
    </>
  );
};

const App = () => {
  const [theme, setTheme] = React.useState(initialTheme);
  return (
    <ThemeProvider
      theme={theme}
      onChange={(value) => setTheme(value)}
    >
      <ThemeSelect />
      <Button type="primary">Button</Button>
    </ThemeProvider>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

对于那些使用react-app-rewire-less和customize-cra with react-app-rewired 的人，像这样启用 javascript

config-overrides.js

const { override, fixBabelImports, addLessLoader, addPostcssPlugins, adjustStyleLoaders, addWebpackPlugin } = require('customize-cra');

const AntdThemePlugin = require('antd-theme/plugin');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
  }),
  adjustStyleLoaders(
    (loaders) => {
      loaders.use[0] = {
        loader: AntdThemePlugin.loader
      }
    }
  ),
  addWebpackPlugin(
    new AntdThemePlugin({
      themes: [
        {
          name: 'dark',
          filename: require.resolve('antd/lib/style/themes/dark.less'),
        },
        {
          name: 'compact',
          filename: require.resolve('antd/lib/style/themes/compact.less'),
        },
      ],
    })
  ),
);

Answer 6

2023 - Ant 设计 V5 Suuuuuper 为任何查看 V5 的人提供简单的实现。

这是 NextJS 而不是 React，但你得到的只是：

import { ConfigProvider, theme } from 'antd';
import '../styles/globals.css';
import 'antd/dist/reset.css';

export default function App({ Component, pageProps }) {
  return (
    <ConfigProvider
      theme={{
        token: {
          // any theme overirdes
          colorPrimary: '#7f00ff',
        },
        // this line sets it to dark mode
        algorithm: theme.darkAlgorithm,
      }}
    >
      <Component {...pageProps} />
    </ConfigProvider>
  );
}

https://ant.design/docs/react/customize-theme#use-preset-algorithms