Personalización

Personalizador en vivo

Elige un color y mira cómo cambia esta página. El CSS de abajo está listo para pegar en tu proyecto. Los colores se ajustan solos para mantener contraste AA en ambos modos.

Tres niveles

1. Una variable. Cambia --cb-accent y se recalculan la escala 50–950, el relleno de botones, los fondos suaves y el foco.

:root {
  --cb-accent: #e11d48;
}

2. Un tema predefinido. Seis temas, cada uno con su versión clara y oscura.

<html data-cb-accent="esmeralda">

3. Un tema propio. Define los valores de cada modo con los prefijos --cb-dark-* y --cb-light-*. Mira el ejemplo completo en Crear un tema propio.

Dónde va este CSS

Es CSS normal, así que funciona igual en Laravel, Vite, TypeScript o un HTML sin build. Pégalo en tu propia hoja de estilos, después de importar Cobalto. En Laravel es resources/css/app.css:

@import 'tailwindcss';
@import 'cobalto/tailwind';

:root {
  --cb-dark-accent: #808080;
  --cb-light-accent: #000000;
}

Sin build, ponlo en un archivo o en un <style> que cargue después del CSS de Cobalto:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cobalto@0.1.0/dist/cobalto.min.css">
<link rel="stylesheet" href="/css/mi-tema.css">

Un bloque en :root gana siempre, incluso sobre data-cb-accent: mientras esté, los temas predefinidos no cambian el color. Si quieres tu tema y además poder cambiar entre temas, dale un nombre:

[data-cb-accent="marca"] {
  --cb-dark-accent: #808080;
  --cb-light-accent: #000000;
}

Y actívalo en el HTML, o desde JS cuando el usuario lo elija. Queda guardado igual que los temas predefinidos:

<html data-cb-accent="marca">

cobalto.theme.setAccent('marca');

Temas predefinidos

Haz clic para aplicarlo a esta página. La elección se guarda en localStorage. Los puntos de color usan data-cb-accent anidado: un tema también se puede aplicar solo a una parte de la página.

<html data-cb-accent="violeta">

<section data-cb-accent="ambar">...</section>

Claro y oscuro

Sin atributo, Cobalto sigue prefers-color-scheme (oscuro si el sistema no indica nada). data-cb-theme lo fija, en html o en cualquier sección.

<html data-cb-theme="light">

<section data-cb-theme="dark">...</section>

Las variantes dark: y light: de Tailwind siguen las mismas reglas:

<div class="bg-cb-bg-2 dark:bg-cb-bg-3 light:shadow-cb-sm">...</div>

Desde JS:

cobalto.theme.set('light'); // 'dark', 'light', 'system'
cobalto.theme.toggle();
cobalto.theme.setAccent('rubi');

document.addEventListener('cb:theme', (event) => console.log(event.detail.resolved));

Escala de acento

Generada con color-mix(in oklab) a partir de --cb-accent. Disponible como variables (--cb-accent-500) y utilidades (bg-cb-accent-200).

Tokens de color

Cada token existe como variable --cb-* y como utilidad de Tailwind: bg-cb-bg-2, text-cb-muted, border-cb-line, bg-cb-accent/20...

Crear un tema propio

Copia este bloque, cambia los valores y actívalo con data-cb-accent="marca". Si omites un token, se usa el de Cobalto. Revisa que el texto tenga al menos 4.5:1 de contraste con el fondo.

[data-cb-accent="marca"] {
  --cb-dark-bg: #0c0a09;
  --cb-dark-bg-2: #141210;
  --cb-dark-bg-3: #1c1917;
  --cb-dark-line: #292524;
  --cb-dark-line-2: #3a3431;
  --cb-dark-text: #f5f5f4;
  --cb-dark-muted: #a8a29e;
  --cb-dark-dim: #8a837e;
  --cb-dark-accent: #fb923c;
  --cb-dark-accent-ink: #0c0a09;

  --cb-light-bg: #fafaf9;
  --cb-light-bg-2: #f5f5f4;
  --cb-light-bg-3: #e7e5e4;
  --cb-light-line: #d6d3d1;
  --cb-light-line-2: #c4bfbb;
  --cb-light-text: #1c1917;
  --cb-light-muted: #57534e;
  --cb-light-dim: #6b645f;
  --cb-light-accent: #c2410c;
  --cb-light-accent-ink: #ffffff;
}

Los colores de estado también se pueden cambiar por modo: --cb-dark-success, --cb-light-danger, etc.

Otros tokens

Definidos en @theme, así que también generan utilidades (font-cb-mono, rounded-cb-lg, py-cb-section, text-cb-4xl...).