Tematización

Personaliza colores, radios de borde y más para adaptar los componentes a tu proyecto.

Los componentes están construidos usando variables CSS y Tailwind, lo que te permite personalizar fácilmente los colores y estilos de toda tu aplicación.

Cómo funciona

Usamos una convención simple: cada color tiene una variable --background para el fondo y una --foreground para el texto que va sobre ese fondo.

Por ejemplo:

--primary define el color de fondo principal
--primary-foreground define el color del texto sobre ese fondo

Esto garantiza automáticamente un buen contraste entre el fondo y el texto.

<button className="bg-primary text-primary-foreground p-4">Mi botón</button>

Colores disponibles

:root {
  --background: oklch(99.405% 0.00011 271.152);
  --foreground: oklch(0% 0 0);
  --primary: oklch(53.934% 0.2714 286.753);
  --primary-foreground: oklch(100% 0.00011 271.152);
  --secondary: oklch(95.4% 0.00637 255.746);
  --secondary-foreground: oklch(13.441% 0.00002 271.152);
  --muted: oklch(97.015% 0.00011 271.152);
  --muted-foreground: oklch(43.861% 0.00005 271.152);
  --accent: oklch(93.929% 0.02887 266.393);
  --accent-foreground: oklch(54.456% 0.19041 259.501);
  --destructive: oklch(62.902% 0.19024 23.052);
  --destructive-foreground: oklch(100% 0.00011 271.152);
  --border: oklch(88.09% 0.00941 258.48);
  --input: oklch(93.1% 0.00011 271.152);
  --ring: oklch(0% 0 0);
}

¿Qué es OKLCH?

OKLCH es un formato de color moderno que ofrece mejor control sobre el brillo y la saturación que HSL o RGB. La sintaxis es:

oklch(lightness chroma hue)

Lightness: 0% = negro, 100% = blanco
Chroma: 0 = gris, ~0.4 = muy saturado
Hue: 0-360 grados de color

Puedes usar herramientas como oklch.com para elegir colores visualmente.

Personalizar colores

Cambiar colores existentes

Modifica las variables directamente en tu archivo CSS:

:root {
  --primary: oklch(65% 0.25 150); /* Verde */
  --primary-foreground: oklch(100% 0 0); /* Blanco */
}

Agregar nuevos colores

1. Define las variables:

:root {
  --success: oklch(75% 0.15 145);
  --success-foreground: oklch(15% 0.01 145);
}
 
.dark {
  --success: oklch(55% 0.12 145);
  --success-foreground: oklch(95% 0.005 145);
}

2. Extiende el @theme

@theme inline {
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
}

3. Úsalas en tus componentes:

<Alert className="bg-success text-success-foreground">¡Operación exitosa!</Alert>

Radio de bordes

Controla qué tan redondeadas son las esquinas de todos los componentes:

:root {
  --radius: 0.625rem; /* 10px por defecto */
}

Variantes disponibles:

rounded-sm → 6px
rounded-md → 8px
rounded-lg → 10px (valor base)
rounded-xl → 14px
rounded-2xl → 18px

Para esquinas más redondeadas en toda tu app:

:root {
  --radius: 1rem; /* 16px */
}

Temas personalizados

Puedes crear múltiples temas más allá del claro y oscuro. Aquí tienes algunos temas predefinidos que puedes usar:

Ocean

Un tema azul calmado inspirado en el mar:

:root {
  --background: oklch(98% 0.008 230);
  --foreground: oklch(20% 0.01 230);
  --card: oklch(99% 0.005 230);
  --card-foreground: oklch(20% 0.01 230);
  --primary: oklch(55% 0.18 230);
  --primary-foreground: oklch(100% 0 0);
  --secondary: oklch(87% 0.06 220);
  --secondary-foreground: oklch(25% 0.01 220);
  --muted: oklch(92% 0.025 230);
  --muted-foreground: oklch(45% 0.02 230);
  --accent: oklch(88% 0.09 210);
  --accent-foreground: oklch(25% 0.01 210);
  --destructive: oklch(62% 0.17 25);
  --destructive-foreground: oklch(98% 0 0);
  --border: oklch(87% 0.03 230);
  --input: oklch(91% 0.025 230);
  --ring: oklch(55% 0.18 230);
}
 
.dark {
  --background: oklch(20% 0.02 230);
  --foreground: oklch(96% 0.008 230);
  --card: oklch(23% 0.018 230);
  --card-foreground: oklch(96% 0.008 230);
  --primary: oklch(70% 0.18 230);
  --primary-foreground: oklch(15% 0.01 230);
  --secondary: oklch(32% 0.04 230);
  --secondary-foreground: oklch(95% 0.008 230);
  --muted: oklch(28% 0.02 230);
  --muted-foreground: oklch(75% 0.015 230);
  --accent: oklch(40% 0.06 210);
  --accent-foreground: oklch(95% 0.01 210);
  --destructive: oklch(60% 0.18 25);
  --destructive-foreground: oklch(20% 0.01 25);
  --border: oklch(30% 0.02 230);
  --input: oklch(25% 0.018 230);
  --ring: oklch(70% 0.18 230);
}

Forest

Un tema verde natural:

:root {
  --background: oklch(98% 0.008 140);
  --foreground: oklch(18% 0.01 140);
  --card: oklch(99% 0.005 140);
  --card-foreground: oklch(18% 0.01 140);
  --primary: oklch(48% 0.16 145);
  --primary-foreground: oklch(100% 0 0);
  --secondary: oklch(88% 0.07 130);
  --secondary-foreground: oklch(25% 0.01 130);
  --muted: oklch(92% 0.025 140);
  --muted-foreground: oklch(45% 0.02 140);
  --accent: oklch(88% 0.085 150);
  --accent-foreground: oklch(25% 0.01 150);
  --destructive: oklch(62% 0.16 25);
  --destructive-foreground: oklch(98% 0 0);
  --border: oklch(87% 0.03 140);
  --input: oklch(91% 0.025 140);
  --ring: oklch(48% 0.16 145);
}
 
.dark {
  --background: oklch(18% 0.02 140);
  --foreground: oklch(95% 0.01 140);
  --card: oklch(22% 0.02 140);
  --card-foreground: oklch(95% 0.01 140);
  --primary: oklch(70% 0.16 145);
  --primary-foreground: oklch(15% 0.01 145);
  --secondary: oklch(30% 0.04 130);
  --secondary-foreground: oklch(95% 0.01 130);
  --muted: oklch(27% 0.02 140);
  --muted-foreground: oklch(75% 0.015 140);
  --accent: oklch(38% 0.06 150);
  --accent-foreground: oklch(95% 0.01 150);
  --destructive: oklch(60% 0.18 25);
  --destructive-foreground: oklch(20% 0.01 25);
  --border: oklch(30% 0.02 140);
  --input: oklch(25% 0.018 140);
  --ring: oklch(70% 0.16 145);
}

Sunset

Un tema cálido de naranja y rosa:

:root {
  --background: oklch(98% 0.015 40);
  --foreground: oklch(20% 0.01 40);
  --card: oklch(99% 0.01 40);
  --card-foreground: oklch(20% 0.01 40);
  --primary: oklch(60% 0.2 30);
  --primary-foreground: oklch(100% 0 0);
  --secondary: oklch(88% 0.09 50);
  --secondary-foreground: oklch(22% 0.01 50);
  --muted: oklch(92% 0.03 40);
  --muted-foreground: oklch(45% 0.02 40);
  --accent: oklch(88% 0.11 20);
  --accent-foreground: oklch(22% 0.01 20);
  --destructive: oklch(60% 0.18 25);
  --destructive-foreground: oklch(98% 0 0);
  --border: oklch(87% 0.04 40);
  --input: oklch(91% 0.03 40);
  --ring: oklch(60% 0.2 30);
}
 
.dark {
  --background: oklch(20% 0.02 40);
  --foreground: oklch(96% 0.015 40);
  --card: oklch(23% 0.02 40);
  --card-foreground: oklch(96% 0.015 40);
  --primary: oklch(70% 0.2 30);
  --primary-foreground: oklch(20% 0.01 30);
  --secondary: oklch(32% 0.05 50);
  --secondary-foreground: oklch(95% 0.01 50);
  --muted: oklch(28% 0.02 40);
  --muted-foreground: oklch(75% 0.015 40);
  --accent: oklch(40% 0.07 20);
  --accent-foreground: oklch(95% 0.01 20);
  --destructive: oklch(60% 0.18 25);
  --destructive-foreground: oklch(20% 0.01 25);
  --border: oklch(30% 0.02 40);
  --input: oklch(25% 0.018 40);
  --ring: oklch(70% 0.2 30);
}

Midnight

Un tema púrpura profundo perfecto para apps creativas:

:root {
  --background: oklch(97% 0.015 280);
  --foreground: oklch(20% 0.01 280);
  --card: oklch(98% 0.01 280);
  --card-foreground: oklch(20% 0.01 280);
  --primary: oklch(60% 0.22 290);
  --primary-foreground: oklch(100% 0 0);
  --secondary: oklch(88% 0.06 280);
  --secondary-foreground: oklch(22% 0.01 280);
  --muted: oklch(92% 0.025 280);
  --muted-foreground: oklch(45% 0.02 280);
  --accent: oklch(88% 0.09 270);
  --accent-foreground: oklch(22% 0.01 270);
  --destructive: oklch(62% 0.17 25);
  --destructive-foreground: oklch(98% 0 0);
  --border: oklch(87% 0.03 280);
  --input: oklch(91% 0.025 280);
  --ring: oklch(60% 0.22 290);
}
 
.dark {
  --background: oklch(15% 0.02 280);
  --foreground: oklch(96% 0.01 280);
  --card: oklch(18% 0.02 280);
  --card-foreground: oklch(96% 0.01 280);
  --primary: oklch(70% 0.22 290);
  --primary-foreground: oklch(20% 0.01 290);
  --secondary: oklch(30% 0.05 280);
  --secondary-foreground: oklch(95% 0.01 280);
  --muted: oklch(25% 0.017 280);
  --muted-foreground: oklch(70% 0.015 280);
  --accent: oklch(35% 0.06 270);
  --accent-foreground: oklch(96% 0.01 270);
  --destructive: oklch(60% 0.18 25);
  --destructive-foreground: oklch(20% 0.01 25);
  --border: oklch(25% 0.018 280);
  --input: oklch(20% 0.015 280);
  --ring: oklch(70% 0.22 290);
}

Rose

Un tema rosa suave:

:root {
  --background: oklch(98% 0.02 350);
  --foreground: oklch(20% 0.01 350);
  --card: oklch(99% 0.015 350);
  --card-foreground: oklch(20% 0.01 350);
  --primary: oklch(58% 0.18 340);
  --primary-foreground: oklch(100% 0 0);
  --secondary: oklch(88% 0.07 355);
  --secondary-foreground: oklch(22% 0.01 355);
  --muted: oklch(92% 0.03 350);
  --muted-foreground: oklch(45% 0.02 350);
  --accent: oklch(88% 0.1 345);
  --accent-foreground: oklch(22% 0.01 345);
  --destructive: oklch(60% 0.18 25);
  --destructive-foreground: oklch(98% 0 0);
  --border: oklch(87% 0.04 350);
  --input: oklch(91% 0.03 350);
  --ring: oklch(58% 0.18 340);
}
 
.dark {
  --background: oklch(20% 0.02 350);
  --foreground: oklch(96% 0.015 350);
  --card: oklch(23% 0.02 350);
  --card-foreground: oklch(96% 0.015 350);
  --primary: oklch(70% 0.18 340);
  --primary-foreground: oklch(20% 0.01 340);
  --secondary: oklch(32% 0.05 355);
  --secondary-foreground: oklch(95% 0.01 355);
  --muted: oklch(28% 0.02 350);
  --muted-foreground: oklch(75% 0.015 350);
  --accent: oklch(40% 0.07 345);
  --accent-foreground: oklch(95% 0.01 345);
  --destructive: oklch(60% 0.18 25);
  --destructive-foreground: oklch(20% 0.01 25);
  --border: oklch(30% 0.02 350);
  --input: oklch(25% 0.018 350);
  --ring: oklch(70% 0.18 340);
}

Cyber

Un tema cian vibrante para productos tech:

:root {
  --background: oklch(97% 0.015 200);
  --foreground: oklch(18% 0.01 200);
  --card: oklch(98% 0.01 200);
  --card-foreground: oklch(18% 0.01 200);
  --primary: oklch(70% 0.23 195);
  --primary-foreground: oklch(10% 0.01 195);
  --secondary: oklch(88% 0.06 200);
  --secondary-foreground: oklch(22% 0.01 200);
  --muted: oklch(92% 0.025 200);
  --muted-foreground: oklch(45% 0.02 200);
  --accent: oklch(60% 0.18 180);
  --accent-foreground: oklch(10% 0.01 180);
  --destructive: oklch(60% 0.18 25);
  --destructive-foreground: oklch(98% 0 0);
  --border: oklch(87% 0.03 200);
  --input: oklch(91% 0.025 200);
  --ring: oklch(70% 0.23 195);
}
 
.dark {
  --background: oklch(10% 0.02 200);
  --foreground: oklch(96% 0.01 200);
  --card: oklch(13% 0.02 200);
  --card-foreground: oklch(96% 0.01 200);
  --primary: oklch(70% 0.23 195);
  --primary-foreground: oklch(15% 0.01 195);
  --secondary: oklch(25% 0.04 200);
  --secondary-foreground: oklch(95% 0.01 200);
  --muted: oklch(20% 0.02 200);
  --muted-foreground: oklch(70% 0.015 200);
  --accent: oklch(55% 0.18 180);
  --accent-foreground: oklch(15% 0.01 180);
  --destructive: oklch(60% 0.18 25);
  --destructive-foreground: oklch(20% 0.01 25);
  --border: oklch(20% 0.018 200);
  --input: oklch(15% 0.015 200);
  --ring: oklch(70% 0.23 195);
}

Consejos

Mantén siempre la pareja background y foreground para buen contraste
Usa oklch.com para elegir colores visualmente
Prueba tus colores en modo claro y oscuro
Verifica el contraste de accesibilidad (mínimo 4.5:1 para texto normal)

AnteriorInstalación SiguienteModo Oscuro