4 temas en 1 archivo CSS: editorial light/dark + terminal light/dark

Contexto

El portfolio necesita 4 combinaciones de tema: editorial light, editorial dark, terminal light, terminal dark. Cada una con ~25 CSS custom properties. La pregunta era: como organizar esto sin que se vuelva inmanejable.

Lo que aprendi

El patron es: clases en <html> controlan que bloque de variables aplica, y Tailwind las consume via @theme inline.

Estructura del CSS

/* 1. Tailwind consume las variables */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  /* ... 25+ mappings */
}

/* 2. Cada combo define sus variables */
.theme-editorial {
  --background: #fafaf9;
  --foreground: #1c1917;
  --primary: #c2410c;        /* orange-700 */
  --radius: 0.5rem;
}

.theme-editorial.dark {
  --background: #0c0a09;
  --foreground: #fafaf9;
  --primary: #ea580c;        /* orange-600 */
}

.theme-terminal {
  --background: #f8fafc;
  --foreground: #0f172a;
  --primary: #059669;        /* emerald-600 */
  --radius: 0.25rem;
}

.theme-terminal.dark {
  --background: #020617;
  --foreground: #f1f5f9;
  --primary: #10b981;        /* emerald-500 */
}

Como se aplican las clases

<!-- Editorial dark (default) -->
<html class="theme-editorial dark">

<!-- Terminal light -->
<html class="theme-terminal">

Por que este patron y no Tailwind themes

Composicion: .theme-editorial + .dark son clases independientes que se combinan
Un solo archivo: todo en globals.css, facil de auditar
Tailwind compatible: bg-background, text-primary funcionan automaticamente via @theme inline
Extensible: agregar un tercer tema es copiar un bloque y cambiar valores

Personalidad por tema

No son solo colores diferentes -- son identidades visuales completas: