Ant Design ha admitido el tema oscuro desde hace un tiempo, y no fue fácil cambiar entre temas claros y oscuros. Tendría algunos componentes compatibles listos para usar, y tendría que usar bibliotecas como @callstack/react-theme-provider para cambiar entre diferentes archivos CSS. Por suerte para nosotros, Design 5 hace la vida mucho más fácil.

Empecemos

Paso 1

Necesitará una aplicación de reacción que se ejecute con Ant Design 5.0.0 o superior.

Para instalar antd, use npm i antd.

Paso 2

Vaya al App.jsarchivo en su aplicación React e importe lo siguiente:

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

Uso themeproporcionado por AntD para desestructurar y utilizar los diferentes algoritmos de temas proporcionados por AntD. AntD proporciona darkAlgorithm, compactAlgorithmy defaultAlgorithm, pero para nuestro caso de uso, solo usaremos darkAlgorithmy defaultAlgorithm.

const { defaultAlgorithm, darkAlgorithm } = theme;

Cree un estado para rastrear el tema que estamos usando actualmente y alternar temas. Idealmente, debería usar alguna gestión de estado para esto, pero para nuestro caso de uso, useState()hace el trabajo.

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

Envuelva el componente de su aplicación con ConfigProviderel que importamos de AntD. Esto nos permite elegir qué algoritmo usar y personalizar el tema a nuestro gusto.

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

Vamos a crear un componente cuyo tema cambiaremos agregando un botón de alternar.

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

      
                

                    
                    
                
            

Paso 7

Ahora podemos usar las opciones proporcionadas por ConfigProviderpara cambiar entre temas.

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

Paso 8

Aunque creamos un estado para realizar un seguimiento del tema, no tenemos una forma de cambiar ese estado, así que creemos un onClickcontrolador que se encargue de eso.

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

Resultado final

Al final, App.jsdebería verse algo como esto:

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;

A lo largo de los años, he sido fanático de Ant Design, pero nunca me gustó cómo manejaron el cambio entre temas hasta ahora. Ant Design 5 hace que sea muy fácil cambiar de tema y personalizarlo a tu gusto.

Para obtener más información sobre la personalización, consulte los documentos .

¡Espero que esto ayude!