Temas

logic2b ui usa variables CSS —tokens de diseño— para todos los colores, con pares como --background y --foreground para cada superficie. Los componentes nunca fijan colores directamente: cambia los tokens para rediseñar el sistema.

Tokens

Añade este bloque a tu CSS global (Tailwind v4 y colores oklch). Es el tema neutral por defecto; genera otras paletas desde el creador de temas:

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --radius: 0.625rem;
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --border: oklch(1 0 0 / 10%);
  /* ... valores oscuros para cada token ... */
}

Después enlázalos con las utilidades de Tailwind mediante @theme inline:

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  /* ... un --color-* por cada token ... */
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
}

Modo oscuro

Los componentes activan el modo oscuro con la clase .dark en <html>. Puedes alternarla sin instalar ninguna librería:

const isDark = document.documentElement.classList.toggle("dark")
localStorage.setItem("theme", isDark ? "dark" : "light")

Ejecuta un pequeño script inline antes del primer pintado para evitar el destello del tema incorrecto.

Radio

Una variable controla el redondeo de todos los componentes: --radius. Usa 0rem para esquinas rectas o 1rem para un aspecto más suave.