Saltar al contenido principal

Theming

Closegram admite modo claro y oscuro mediante la estrategia darkMode: "class" de Tailwind CSS.

Cómo funciona​

El tema se alterna agregando o quitando la clase dark en el elemento <html>. Tailwind aplica entonces las clases de variante dark: correspondientes.

Componente ThemeToggle​

src/components/ThemeToggle.tsx renderiza un botón de alternancia sol/luna. Al hacer clic:

  1. Alterna la clase dark en document.documentElement
  2. Persiste la preferencia en localStorage

Contexto de tema​

El tema actual se gestiona en un contexto de React para que cualquier componente pueda leerlo o cambiarlo:

const { theme, toggleTheme } = useTheme();

Configuración de Tailwind​

El modo oscuro se habilita mediante el paquete compartido packages/tailwind-config:

// tailwind.config.ts
export default {
  darkMode: "class",
  // ...
};

Uso en componentes​

<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  ...
</div>

Preferencia del sistema​

En la primera carga (antes de que se guarde cualquier preferencia del usuario), el tema toma por defecto la preferencia del sistema operativo:

window.matchMedia("(prefers-color-scheme: dark)").matches