Modo Oscuro Automático en React con Tailwind CSS

Tiempo de lectura: 2 minutos

Vamos a mejorar el tutorial de modo oscuro para que el modo oscuro se active automáticamente según la configuración del sistema o la hora del día.

🔹 1. Configurar Tailwind CSS (Si aún no lo hiciste)

Si aún no tienes Tailwind instalado, agrégalo:

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

En tailwind.config.js, aseguramos que el modo oscuro se base en clases:

export default {
  darkMode: 'class',
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [],
};

---

🔹 2. Mejorar el Hook useDarkMode.ts

Vamos a actualizar useDarkMode.ts para:
✔️ Detectar el modo del sistema.
✔️ Activar el modo oscuro después de las 19:00 y antes de las 07:00 si no hay configuración previa en localStorage.

import { useEffect, useState } from "react";

export function useDarkMode() {
  // Verificar si el sistema está en modo oscuro
  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

  // Obtener la preferencia del usuario o usar el sistema/hora
  const getInitialTheme = () => {
    const storedTheme = localStorage.getItem("theme");
    if (storedTheme) return storedTheme === "dark";

    // Si no hay configuración previa, usar la hora del día
    const hour = new Date().getHours();
    return prefersDark || (hour >= 19 || hour < 7);
  };

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

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

---

🔹 3. Crear el botón de cambio de tema

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 ? "🌙 Modo Oscuro" : "☀️ Modo Claro"}
    </button>
  );
};

export default ToggleDarkMode;

---

🔹 4. Integrarlo en la App

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 Automático</h1>
      <ToggleDarkMode />
    </div>
  );
};

export default App;

---

🎯 Resultado Mejorado

✅ Modo oscuro automático según la hora (19:00 – 07:00).
✅ Modo oscuro automático según la configuración del sistema.
✅ El usuario aún puede cambiarlo manualmente y se guardará su preferencia.

Ahora tu aplicación cambia automáticamente al modo oscuro basado en la hora del día o preferencias del sistema, además de permitir que el usuario lo ajuste manualmente. 🔥