¿Cómo aplicar el tema antd dark para una aplicación React?

Quiero usar este tema oscuro para mi nueva aplicación web de reacción: https://github.com/ant-design/ant-design-dark-theme

Después de seguir las instrucciones para personalizar el tema aquí y las instrucciones para aplicar el tema en README aquí, mi config-overrides.js se ve así:

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

Esto no parece estar funcionando. Por ejemplo, todavía tengo un componente de menú antd que aparece en el tema "claro" en lugar del tema "oscuro".

Me gustaría tener todos mis componentes antd renderizados con el tema oscuro sin que yo lo configure explícitamente. ¿Es eso posible? Si es así, ¿qué estoy haciendo mal?

No soy un desarrollador frontend aquí, así que avíseme si me falta algo obvio.

La solución que funcionó para mí fue una combinación de las respuestas @JoseFelix y @Anujs. Gracias a ambos por las respuestas:

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

Si consola la darkThemevariable de registro que se ha importado, todas las variables de estilo están presentes dentro del darkTheme.defaultobjeto. He implementado su aliyum-theme.

Entonces, para que su código funcione, debe cambiar modifyVarsdentro del config-overrides.jsarchivo a

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

Sugerencia: para anular darkTheme dentro de la aplicación, puede crear su propio archivo javascript e importarlo dentro del config-overrides.jsarchivo y desestructurarlo dentro demodifyVars

El código está desestructurando la exportación predeterminada cuando la exportación predeterminada es el objeto con las variables. Por lo tanto, debería ser:

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

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

app.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'));

Para aquellos que están usando react-app-rewire-lessy customize-cracon react-app-rewired, habilite javascript como este

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