Modo oscuro

Cobalt soporta tema oscuro nativo. Toda la capa semántica (--co-semantic-*) cambia automáticamente cuando el documento tiene [data-theme="dark"].

Activación

@import '@prolibu-suite/cobalt-tokens/css';        /* modo claro (root) */
@import '@prolibu-suite/cobalt-tokens/css/dark';   /* overrides scoped a [data-theme="dark"] */

Luego en tu app, cambia el atributo del <html>:

document.documentElement.setAttribute('data-theme', 'dark');

Detectar preferencia del sistema

const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');

Qué cambia y qué no

Capa	Cambia en dark	Notas
Base (`--co-color-azul-700`, etc.)	❌	Son constantes
Primary (`--co-color-primary-azul`)	❌	Son alias estables
Status (`--co-color-status-success`)	❌	Mismo color en ambos modos
*Semantic (`--co-semantic-`)**	✅	Es la capa que define la apariencia

Por eso la regla práctica: en componentes y app, consume siempre --co-semantic-* para que el tema oscuro funcione gratis.