Añadir Dark Mode en tu página de React

El modo oscuro sería una excelente adición a tu aplicación, ya que enriquecería la experiencia del usuario. En esta ocasión, te mostraré cómo implementarlo en React sin necesidad de utilizar ninguna librería externa.

1. Primero creamos el proyecto.

Al proyecto lo llamaremos darkmode (le puedes poner el nombre que quieras).

npx create-react-app darkmode

2. Primeros pasos.

En el archivo App.js vamos a crear un estado para el modo oscuro.

const [darkMode, setDarkMode] = useState(true);

Luego, vamos a crear una función que nos permita cambiar el estado del modo oscuro.

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

Ahora vamos a crear un botón que nos permita cambiar el estado del modo oscuro.

<button onClick={toggleDarkMode}>Toggle Dark Mode</button>

A continuación, vamos a dar una clase al div principal con la clase "App" y una clase adicional "dark-mode" para que cuando le demos click al botón cambie el estado a true.

Ahora vamos a crear una clase en el archivo App.css que nos permita cambiar el color de fondo y el color de la letra.

.dark-mode { background-color: #1e1e1e; color: white; }

Si hemos seguido los pasos correctamente, deberíamos tener algo como esto:

3. Conclusión

Como puedes ver, añadir el modo oscuro a tu aplicación de React es bastante sencillo. No necesitas de ninguna librería externa para implementarlo. Si tienes alguna duda, no dudes en dejarme un comentario.