Wie wende ich ein dunkles Thema für eine React-App an?

Ich möchte dieses dunkle Thema für meine neue React-Web-App verwenden: https://github.com/ant-design/ant-design-dark-theme

Nachdem ich den Anweisungen zum Anpassen des Themas hier und den Anweisungen zum Anwenden des Themas in README hier gefolgt bin, sieht meine config-overrides.js folgendermaßen aus:

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

Dies scheint nicht zu funktionieren. Zum Beispiel habe ich eine Menü- und Komponentenkomponente, die immer noch im Thema "Hell" anstelle des Themas "Dunkel" angezeigt wird.

Ich möchte, dass alle meine Antd-Komponenten mit dem dunklen Thema gerendert werden, ohne dass ich es explizit einstelle. Ist das möglich? Wenn ja, was mache ich falsch?

Kein Frontend-Entwickler hier, also lassen Sie mich bitte wissen, wenn mir etwas Offensichtliches fehlt.

Die Lösung, die für mich funktioniert hat, war eine Kombination aus @ JoseFelix- und @ Anujs-Antworten. Vielen Dank für die Antworten:

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

Wenn Sie darkThemedie importierte Konsolenprotokollvariable verwenden , sind alle Stilvariablen im darkTheme.defaultObjekt vorhanden. Ich habe ihre implementiert aliyum-theme.

Damit Ihr Code funktioniert, müssen Sie modifyVarsinnerhalb der config-overrides.jsDatei auf ändern

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

ProTip: Um darkTheme in der Anwendung zu überschreiben, können Sie Ihre eigene Javascript-Datei erstellen und in eine Datei importieren config-overrides.jsund in dieser zerstörenmodifyVars

Der Code zerstört den Standardexport, wenn der Standardexport das Objekt mit den Variablen ist. Daher sollte es sein:

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

Für diejenigen , die verwenden react-app-rewire-lessund customize-cramit reagieren-app-rewired aktivieren Sie Javascript wie folgt

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