Ant Design prend en charge le thème sombre depuis un certain temps maintenant, et il n'était pas facile de basculer entre les thèmes clairs et sombres. Vous auriez quelques composants pris en charge prêts à l'emploi, et vous devriez utiliser des bibliothèques comme @callstack/react-theme-provider pour basculer entre différents fichiers CSS. Heureusement pour nous, Design 5 rend la vie tellement plus facile.

Commençons

Étape 1

Vous aurez besoin d'une application de réaction fonctionnant avec Ant Design 5.0.0 ou supérieur.

Pour installer andd, utilisez npm i antd.

Étape 2

Accédez au App.jsfichier dans votre application React et importez les éléments suivants :

import { useState } from "react";
import { ConfigProvider, theme, Button, Card } from "antd";

Utilisation themefournie par AntD pour déstructurer et utiliser les différents algorithmes de thème fournis par AntD. AntD fournit darkAlgorithm, compactAlgorithmet defaultAlgorithm, mais pour notre cas d'utilisation, nous n'utiliserons que darkAlgorithmet defaultAlgorithm.

const { defaultAlgorithm, darkAlgorithm } = theme;

Créez un état pour suivre le thème que nous utilisons actuellement et basculer entre les thèmes. Idéalement, vous devriez utiliser une gestion d'état pour cela, mais pour notre cas d'utilisation, useState()le travail est fait.

const [isDarkMode, setIsDarkMode] = useState(false);

Enveloppez votre composant d'application avec ConfigProvidercelui que nous avons importé d'AntD. Cela nous permet de choisir l'algorithme à utiliser et de personnaliser le thème à notre goût.

return (
  <ConfigProvider>
    ...
  </ConfigProvider>
);

Créons un composant dont nous allons changer le thème en ajoutant un bouton bascule.

return (
  <ConfigProvider>
    <Card style={{ width: "max-content" }}>
      <Button>
        Change Theme to {isDarkMode ? "Light" : "Dark"}
      </Button>
    </Card>
  </ConfigProvider>
);

      
                

                    
                    
                
            

Étape 7

Nous pouvons maintenant utiliser les options fournies par ConfigProviderpour basculer entre les thèmes.

return (
  <ConfigProvider
    theme={{
      algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
    }}>
    <Card style={{ width: "max-content" }}>
      <Button>
        Change Theme to {isDarkMode ? "Light" : "Dark"}
      </Button>
    </Card>
  </ConfigProvider>
);

Étape 8

Bien que nous ayons créé un état pour suivre le thème, nous n'avons aucun moyen de modifier cet état, alors créons un onClickgestionnaire qui s'en occupe.

const handleClick = () => {
  setIsDarkMode((previousValue) => !previousValue);
 };

return (
  <ConfigProvider
    theme={{
      algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
    }}>
    <Card style={{ width: "max-content" }}>
      <Button onClick={handleClick}>
        Change Theme to {isDarkMode ? "Light" : "Dark"}
      </Button>
    </Card>
  </ConfigProvider>
);

Résultat final

À la fin, vous App.jsdevriez ressembler à ceci :

import { useState } from "react";
import { ConfigProvider, theme, Button, Card } from "antd";

function App() {
 const { defaultAlgorithm, darkAlgorithm } = theme;
 const [isDarkMode, setIsDarkMode] = useState(false);

 const handleClick = () => {
  setIsDarkMode((previousValue) => !previousValue);
 };

 return (
  <ConfigProvider
   theme={{
    algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
   }}>
   <Card style={{ width: "max-content" }}>
    <Button onClick={handleClick}>
     Change Theme to {isDarkMode ? "Light" : "Dark"}
    </Button>
   </Card>
  </ConfigProvider>
 );
}

export default App;

Au fil des ans, j'ai été un fan d'Ant Design, mais je n'ai jamais vraiment aimé la façon dont ils ont géré le changement de thème jusqu'à présent. Ant Design 5 permet de changer de thème très facilement et de les personnaliser à votre guise.

Pour en savoir plus sur la personnalisation, consultez la documentation .

J'espère que ça aide!