Cómo agregar un Modo Oscuro en React con Tailwind CSS de forma manual

Tiempo de lectura: 2 minutos

Cómo añadir modo oscuro con React y Tailwind CSS de forma manual.

1️⃣ Configurar Tailwind CSS

Si aún no tienes Tailwind instalado en tu proyecto, agrégalo con:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Luego, en tailwind.config.js, habilita el modo oscuro basado en clases:

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: 'class', // Habilita el modo oscuro basado en clases
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

---

2️⃣ Crear un Hook para manejar el modo oscuro

Creamos un hook useDarkMode.ts que guarda la preferencia en localStorage:

import { useEffect, useState } from "react";

export function useDarkMode() {
  const [darkMode, setDarkMode] = useState(() => {
    return localStorage.getItem("theme") === "dark";
  });

  useEffect(() => {
    if (darkMode) {
      document.documentElement.classList.add("dark");
      localStorage.setItem("theme", "dark");
    } else {
      document.documentElement.classList.remove("dark");
      localStorage.setItem("theme", "light");
    }
  }, [darkMode]);

  return { darkMode, setDarkMode };
}

🔹 Explicación:

• Guarda la preferencia en localStorage para recordarla después de recargar la página.
• Añade la clase "dark" al document.documentElement si el modo oscuro está activado.

---

3️⃣ Crear el botón de cambio de tema

Ahora creamos un ToggleDarkMode.tsx para cambiar entre modo claro y oscuro:

import { useDarkMode } from "./useDarkMode";

const ToggleDarkMode = () => {
  const { darkMode, setDarkMode } = useDarkMode();

  return (
    <button
      onClick={() => setDarkMode(!darkMode)}
      className="p-2 rounded-full bg-gray-200 dark:bg-gray-700 transition-all"
    >
      {darkMode ? "🌙" : "☀️"}
    </button>
  );
};

export default ToggleDarkMode;

---

4️⃣ Integrarlo en la App

Modificamos App.tsx para aplicar los estilos de modo oscuro y agregar el botón de cambio:

import ToggleDarkMode from "./ToggleDarkMode";

const App = () => {
  return (
    <div className="h-screen flex flex-col items-center justify-center bg-white dark:bg-gray-900 text-black dark:text-white transition-all">
      <h1 className="text-2xl font-bold">🌗 Modo Oscuro en React</h1>
      <ToggleDarkMode />
    </div>
  );
};

export default App;

---

🎯 Resultado

✅ Al hacer clic en el botón, el tema cambiará de claro a oscuro.
✅ La preferencia del usuario se guardará en localStorage.
✅ Se aplicarán estilos oscuros automáticamente si el usuario lo activó antes.

Con este método, agregaste un modo oscuro en React con Tailwind CSS y localStorage de manera eficiente. 🌓