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.

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

Colores disponibles

1:root {
2  --background: oklch(99.405% 0.00011 271.152);
3  --foreground: oklch(0% 0 0);
4  --primary: oklch(53.934% 0.2714 286.753);
5  --primary-foreground: oklch(100% 0.00011 271.152);
6  --secondary: oklch(95.4% 0.00637 255.746);
7  --secondary-foreground: oklch(13.441% 0.00002 271.152);
8  --muted: oklch(97.015% 0.00011 271.152);
9  --muted-foreground: oklch(43.861% 0.00005 271.152);
10  --accent: oklch(93.929% 0.02887 266.393);
11  --accent-foreground: oklch(54.456% 0.19041 259.501);
12  --destructive: oklch(62.902% 0.19024 23.052);
13  --destructive-foreground: oklch(100% 0.00011 271.152);
14  --border: oklch(88.09% 0.00941 258.48);
15  --input: oklch(93.1% 0.00011 271.152);
16  --ring: oklch(0% 0 0);
17}

¿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:

1oklch(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:

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

Agregar nuevos colores

1. Define las variables:

1:root {
2  --success: oklch(75% 0.15 145);
3  --success-foreground: oklch(15% 0.01 145);
4}
5 
6.dark {
7  --success: oklch(55% 0.12 145);
8  --success-foreground: oklch(95% 0.005 145);
9}

2. Extiende el @theme

1@theme inline {
2  --color-success: var(--success);
3  --color-success-foreground: var(--success-foreground);
4}

3. Úsalas en tus componentes:

1<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:

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

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:

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

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:

1:root {
2  --background: oklch(98% 0.008 230);
3  --foreground: oklch(20% 0.01 230);
4  --card: oklch(99% 0.005 230);
5  --card-foreground: oklch(20% 0.01 230);
6  --primary: oklch(55% 0.18 230);
7  --primary-foreground: oklch(100% 0 0);
8  --secondary: oklch(87% 0.06 220);
9  --secondary-foreground: oklch(25% 0.01 220);
10  --muted: oklch(92% 0.025 230);
11  --muted-foreground: oklch(45% 0.02 230);
12  --accent: oklch(88% 0.09 210);
13  --accent-foreground: oklch(25% 0.01 210);
14  --destructive: oklch(62% 0.17 25);
15  --destructive-foreground: oklch(98% 0 0);
16  --border: oklch(87% 0.03 230);
17  --input: oklch(91% 0.025 230);
18  --ring: oklch(55% 0.18 230);
19}
20 
21.dark {
22  --background: oklch(20% 0.02 230);
23  --foreground: oklch(96% 0.008 230);
24  --card: oklch(23% 0.018 230);
25  --card-foreground: oklch(96% 0.008 230);
26  --primary: oklch(70% 0.18 230);
27  --primary-foreground: oklch(15% 0.01 230);
28  --secondary: oklch(32% 0.04 230);
29  --secondary-foreground: oklch(95% 0.008 230);
30  --muted: oklch(28% 0.02 230);
31  --muted-foreground: oklch(75% 0.015 230);
32  --accent: oklch(40% 0.06 210);
33  --accent-foreground: oklch(95% 0.01 210);
34  --destructive: oklch(60% 0.18 25);
35  --destructive-foreground: oklch(20% 0.01 25);
36  --border: oklch(30% 0.02 230);
37  --input: oklch(25% 0.018 230);
38  --ring: oklch(70% 0.18 230);
39}

Forest

Un tema verde natural:

1:root {
2  --background: oklch(98% 0.008 140);
3  --foreground: oklch(18% 0.01 140);
4  --card: oklch(99% 0.005 140);
5  --card-foreground: oklch(18% 0.01 140);
6  --primary: oklch(48% 0.16 145);
7  --primary-foreground: oklch(100% 0 0);
8  --secondary: oklch(88% 0.07 130);
9  --secondary-foreground: oklch(25% 0.01 130);
10  --muted: oklch(92% 0.025 140);
11  --muted-foreground: oklch(45% 0.02 140);
12  --accent: oklch(88% 0.085 150);
13  --accent-foreground: oklch(25% 0.01 150);
14  --destructive: oklch(62% 0.16 25);
15  --destructive-foreground: oklch(98% 0 0);
16  --border: oklch(87% 0.03 140);
17  --input: oklch(91% 0.025 140);
18  --ring: oklch(48% 0.16 145);
19}
20 
21.dark {
22  --background: oklch(18% 0.02 140);
23  --foreground: oklch(95% 0.01 140);
24  --card: oklch(22% 0.02 140);
25  --card-foreground: oklch(95% 0.01 140);
26  --primary: oklch(70% 0.16 145);
27  --primary-foreground: oklch(15% 0.01 145);
28  --secondary: oklch(30% 0.04 130);
29  --secondary-foreground: oklch(95% 0.01 130);
30  --muted: oklch(27% 0.02 140);
31  --muted-foreground: oklch(75% 0.015 140);
32  --accent: oklch(38% 0.06 150);
33  --accent-foreground: oklch(95% 0.01 150);
34  --destructive: oklch(60% 0.18 25);
35  --destructive-foreground: oklch(20% 0.01 25);
36  --border: oklch(30% 0.02 140);
37  --input: oklch(25% 0.018 140);
38  --ring: oklch(70% 0.16 145);
39}

Sunset

Un tema cálido de naranja y rosa:

1:root {
2  --background: oklch(98% 0.015 40);
3  --foreground: oklch(20% 0.01 40);
4  --card: oklch(99% 0.01 40);
5  --card-foreground: oklch(20% 0.01 40);
6  --primary: oklch(60% 0.2 30);
7  --primary-foreground: oklch(100% 0 0);
8  --secondary: oklch(88% 0.09 50);
9  --secondary-foreground: oklch(22% 0.01 50);
10  --muted: oklch(92% 0.03 40);
11  --muted-foreground: oklch(45% 0.02 40);
12  --accent: oklch(88% 0.11 20);
13  --accent-foreground: oklch(22% 0.01 20);
14  --destructive: oklch(60% 0.18 25);
15  --destructive-foreground: oklch(98% 0 0);
16  --border: oklch(87% 0.04 40);
17  --input: oklch(91% 0.03 40);
18  --ring: oklch(60% 0.2 30);
19}
20 
21.dark {
22  --background: oklch(20% 0.02 40);
23  --foreground: oklch(96% 0.015 40);
24  --card: oklch(23% 0.02 40);
25  --card-foreground: oklch(96% 0.015 40);
26  --primary: oklch(70% 0.2 30);
27  --primary-foreground: oklch(20% 0.01 30);
28  --secondary: oklch(32% 0.05 50);
29  --secondary-foreground: oklch(95% 0.01 50);
30  --muted: oklch(28% 0.02 40);
31  --muted-foreground: oklch(75% 0.015 40);
32  --accent: oklch(40% 0.07 20);
33  --accent-foreground: oklch(95% 0.01 20);
34  --destructive: oklch(60% 0.18 25);
35  --destructive-foreground: oklch(20% 0.01 25);
36  --border: oklch(30% 0.02 40);
37  --input: oklch(25% 0.018 40);
38  --ring: oklch(70% 0.2 30);
39}

Midnight

Un tema púrpura profundo perfecto para apps creativas:

1:root {
2  --background: oklch(97% 0.015 280);
3  --foreground: oklch(20% 0.01 280);
4  --card: oklch(98% 0.01 280);
5  --card-foreground: oklch(20% 0.01 280);
6  --primary: oklch(60% 0.22 290);
7  --primary-foreground: oklch(100% 0 0);
8  --secondary: oklch(88% 0.06 280);
9  --secondary-foreground: oklch(22% 0.01 280);
10  --muted: oklch(92% 0.025 280);
11  --muted-foreground: oklch(45% 0.02 280);
12  --accent: oklch(88% 0.09 270);
13  --accent-foreground: oklch(22% 0.01 270);
14  --destructive: oklch(62% 0.17 25);
15  --destructive-foreground: oklch(98% 0 0);
16  --border: oklch(87% 0.03 280);
17  --input: oklch(91% 0.025 280);
18  --ring: oklch(60% 0.22 290);
19}
20 
21.dark {
22  --background: oklch(15% 0.02 280);
23  --foreground: oklch(96% 0.01 280);
24  --card: oklch(18% 0.02 280);
25  --card-foreground: oklch(96% 0.01 280);
26  --primary: oklch(70% 0.22 290);
27  --primary-foreground: oklch(20% 0.01 290);
28  --secondary: oklch(30% 0.05 280);
29  --secondary-foreground: oklch(95% 0.01 280);
30  --muted: oklch(25% 0.017 280);
31  --muted-foreground: oklch(70% 0.015 280);
32  --accent: oklch(35% 0.06 270);
33  --accent-foreground: oklch(96% 0.01 270);
34  --destructive: oklch(60% 0.18 25);
35  --destructive-foreground: oklch(20% 0.01 25);
36  --border: oklch(25% 0.018 280);
37  --input: oklch(20% 0.015 280);
38  --ring: oklch(70% 0.22 290);
39}

Rose

Un tema rosa suave:

1:root {
2  --background: oklch(98% 0.02 350);
3  --foreground: oklch(20% 0.01 350);
4  --card: oklch(99% 0.015 350);
5  --card-foreground: oklch(20% 0.01 350);
6  --primary: oklch(58% 0.18 340);
7  --primary-foreground: oklch(100% 0 0);
8  --secondary: oklch(88% 0.07 355);
9  --secondary-foreground: oklch(22% 0.01 355);
10  --muted: oklch(92% 0.03 350);
11  --muted-foreground: oklch(45% 0.02 350);
12  --accent: oklch(88% 0.1 345);
13  --accent-foreground: oklch(22% 0.01 345);
14  --destructive: oklch(60% 0.18 25);
15  --destructive-foreground: oklch(98% 0 0);
16  --border: oklch(87% 0.04 350);
17  --input: oklch(91% 0.03 350);
18  --ring: oklch(58% 0.18 340);
19}
20 
21.dark {
22  --background: oklch(20% 0.02 350);
23  --foreground: oklch(96% 0.015 350);
24  --card: oklch(23% 0.02 350);
25  --card-foreground: oklch(96% 0.015 350);
26  --primary: oklch(70% 0.18 340);
27  --primary-foreground: oklch(20% 0.01 340);
28  --secondary: oklch(32% 0.05 355);
29  --secondary-foreground: oklch(95% 0.01 355);
30  --muted: oklch(28% 0.02 350);
31  --muted-foreground: oklch(75% 0.015 350);
32  --accent: oklch(40% 0.07 345);
33  --accent-foreground: oklch(95% 0.01 345);
34  --destructive: oklch(60% 0.18 25);
35  --destructive-foreground: oklch(20% 0.01 25);
36  --border: oklch(30% 0.02 350);
37  --input: oklch(25% 0.018 350);
38  --ring: oklch(70% 0.18 340);
39}

Cyber

Un tema cian vibrante para productos tech:

1:root {
2  --background: oklch(97% 0.015 200);
3  --foreground: oklch(18% 0.01 200);
4  --card: oklch(98% 0.01 200);
5  --card-foreground: oklch(18% 0.01 200);
6  --primary: oklch(70% 0.23 195);
7  --primary-foreground: oklch(10% 0.01 195);
8  --secondary: oklch(88% 0.06 200);
9  --secondary-foreground: oklch(22% 0.01 200);
10  --muted: oklch(92% 0.025 200);
11  --muted-foreground: oklch(45% 0.02 200);
12  --accent: oklch(60% 0.18 180);
13  --accent-foreground: oklch(10% 0.01 180);
14  --destructive: oklch(60% 0.18 25);
15  --destructive-foreground: oklch(98% 0 0);
16  --border: oklch(87% 0.03 200);
17  --input: oklch(91% 0.025 200);
18  --ring: oklch(70% 0.23 195);
19}
20 
21.dark {
22  --background: oklch(10% 0.02 200);
23  --foreground: oklch(96% 0.01 200);
24  --card: oklch(13% 0.02 200);
25  --card-foreground: oklch(96% 0.01 200);
26  --primary: oklch(70% 0.23 195);
27  --primary-foreground: oklch(15% 0.01 195);
28  --secondary: oklch(25% 0.04 200);
29  --secondary-foreground: oklch(95% 0.01 200);
30  --muted: oklch(20% 0.02 200);
31  --muted-foreground: oklch(70% 0.015 200);
32  --accent: oklch(55% 0.18 180);
33  --accent-foreground: oklch(15% 0.01 180);
34  --destructive: oklch(60% 0.18 25);
35  --destructive-foreground: oklch(20% 0.01 25);
36  --border: oklch(20% 0.018 200);
37  --input: oklch(15% 0.015 200);
38  --ring: oklch(70% 0.23 195);
39}

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