Template — Theming y dark mode
Dark mode no es feature opcional — es expectativa. Hacerlo bien desde el inicio con CSS variables es trivial; agregarlo después es refactor doloroso. El template viene con class strategy, tokens semánticos (`--bg`, `--fg`, `--cobalt-*`), y toggle persistente.
Tokens semánticos + class strategy + localStorage = dark mode sin deuda técnica.
El sistema de tokens
Dos niveles:
- Tokens de marca (
--cobalt-800,--ink,--paper) — colores absolutos. - Tokens semánticos (
--bg-surface,--fg-primary,--border) — referencian a los de marca; cambian con el modo.
Cuando activas dark, solo cambian los semánticos. Los componentes referencian semánticos, no marca.
El toggle
`js
// $stores/ui.ts
function setTheme(theme) {
document.documentElement.classList.toggle('dark', theme === 'dark');
localStorage.setItem('theme', theme);
}
`
Respeta preferencia del OS en primer render si no hay setting guardado.
El error que hay que evitar
Hard-codear colores en componentes. class="bg-white" en dark mode queda blanco y flashea. class="bg-[var(--bg-surface)]" se adapta.
El agente puede revisar: busca bg-white, text-black, #fff — cada uno es deuda técnica en dark mode.
En tu proyecto, busca por regex `bg-white|text-black|#fff`. ¿Cuántas ocurrencias? Cada una es deuda de dark mode. Puede esperar, pero cuenta.
- Dos niveles: marca (absoluto) + semántico (condicional).
- Componentes usan semánticos; marca solo en definición de tema.
- Toggle persiste en localStorage + respeta preferencia OS.