¡Ey! Entonces, si eres como yo y te encanta todo el ambiente del modo oscuro, es posible que hayas pensado en agregarlo a tu sitio web. Es bastante fácil de configurar con sólo un poco de CSS y JavaScript. Así es como lo hice.

Paso 1: configurar el HTML

En primer lugar, necesita un botón o un interruptor en el que los usuarios puedan hacer clic para alternar entre los modos claro y oscuro. Para este ejemplo elegí un botón simple (puedes usar un ícono si lo deseas):

Toggle Dark Mode

Este botón será el activador para cambiar de modo.

Paso 2: Agregar CSS para los modos claro y oscuro

A continuación, debes definir cómo se verán tu modo claro y tu modo oscuro. En tu CSS, configurarás los estilos predeterminados (que serán tu modo claro) y luego agregarás una clase de modo oscuro que anula estos estilos.

body {
    background-color: white;
    color: black;
    transition: background-color 0.3s, color 0.3s;
}

.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

Esto es lo que está pasando:

• Modo de luz (predeterminado): El cuerpo tiene un fondo blanco y texto negro. Agregué una transición para que el cambio sea fluido al cambiar entre modos.
• Modo oscuro: La clase .dark-mode cambia el fondo a gris oscuro y el texto a blanco.

Paso 3: cambiar entre modos con JavaScript

Ahora viene la parte en la que hacemos que el botón realmente haga algo. Este fragmento de JavaScript alternará la clase .dark-mode en el cuerpo cada vez que se haga clic en el botón.

const toggleButton = document.getElementById('dark-mode-toggle');
const body = document.body;

toggleButton.addEventListener('click', () => {
    body.classList.toggle('dark-mode');

    // Save the user's preference in local storage
    if (body.classList.contains('dark-mode')) {
        localStorage.setItem('theme', 'dark');
    } else {
        localStorage.setItem('theme', 'light');
    }
});

Aquí hay un desglose:

• Alternar clase: Cuando se hace clic en el botón, alternamos la clase .dark-mode en el cuerpo. Esto cambia los estilos entre los modos claro y oscuro.
• Preferencia de guardado: Agregué un poco más al guardar la preferencia del usuario en localStorage. Esto significa que si eligen el modo oscuro, permanecerá así incluso si abandonan y regresan al sitio.

Paso 4: cargar la preferencia del usuario al cargar la página

Para asegurarse de que el sitio se cargue en el modo preferido del usuario, debe verificar el almacenamiento local cuando se carga la página y configurar el modo en consecuencia.

window.addEventListener('load', () => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
        body.classList.add('dark-mode');
    }
});

Si estás usando React, el proceso es bastante similar, pero manejarás las cosas dentro de tus componentes. He aquí cómo hacerlo:

1. Configurar estado y clase CSS para modo oscuro:

Utilice useState de React para administrar el estado del modo oscuro y aplique la clase apropiada a su elemento raíz:

   import React, { useState } from 'react';

   function App() {
       const [darkMode, setDarkMode] = useState(false);

       const toggleDarkMode = () => {
           setDarkMode(!darkMode);
       };

       return (
           

               
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               
           
       );
   }

   export default App;

En este ejemplo:

• El estado del modo oscuro determina si el modo oscuro está activo.
• La función toggleDarkMode activa y desactiva el modo oscuro.

1. CSS para modo oscuro:

Agrega la clase .dark-mode a tu CSS, como antes:

   body {
       background-color: white;
       color: black;
       transition: background-color 0.3s, color 0.3s;
   }

   .dark-mode {
       background-color: #121212;
       color: #ffffff;
   }

1. Almacenamiento local:

Si deseas que la preferencia del tema persista, puedes agregar este pequeño ajuste:

   import React, { useState, useEffect } from 'react';

   function App() {
       const [darkMode, setDarkMode] = useState(() => {
           const savedTheme = localStorage.getItem('theme');
           return savedTheme === 'dark';
       });

       useEffect(() => {
           localStorage.setItem('theme', darkMode ? 'dark' : 'light');
       }, [darkMode]);

       return (
           

                setDarkMode(!darkMode)}>
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               
           
       );
   }

   export default App;

Esto es lo que está pasando:

• Estado inicial: El estado inicial de darkMode se establece en función del valor almacenado en localStorage.
• Gancho de efecto: El gancho useEffect guarda la preferencia del tema actual cada vez que cambia el modo oscuro.

¡Y listo! Esta es una forma más sencilla de agregar el modo oscuro a tu aplicación React sin complicar demasiado las cosas.