Generador de temas para shadcn/ui: variables CSS en OKLCH | We.Inc
Elige el tono, la croma y el radio de tu marca y obtén todas las variables CSS de shadcn/ui para modo claro y oscuro en OKLCH, con vista previa en vivo y comprobación de contraste.
Los componentes de shadcn/ui leen sus colores de variables CSS como --primary, --muted y --border, escritas en OKLCH. Elige aquí un tono, una croma, una luminosidad, un tinte de gris y un radio de esquinas, revisa la vista previa en claro y oscuro con las ratios de contraste y luego pega los bloques :root y .dark generados en tu hoja de estilos global.
Parejas de variables que define todo tema de shadcn/ui
Superficie
Texto sobre ella
Lo usan
--background
--foreground
El cuerpo de la página
--card / --popover
--card-foreground / --popover-foreground
Tarjetas, menús, diálogos
--primary
--primary-foreground
Botones por defecto, estados activos
--secondary / --muted
--secondary-foreground / --muted-foreground
Botones discretos, pistas, leyendas
--accent
--accent-foreground
Elementos de menú al pasar el cursor
La documentación de temas define unas treinta variables, y editarlas a mano es lento porque un cambio en el color principal también cambia qué color de texto sigue siendo legible encima. Este generador obtiene el conjunto completo a partir de unas pocas elecciones, elige un color de primer plano legible para cada superficie y señala cualquier pareja que quede por debajo de los objetivos de contraste habituales.
Empieza con un preajuste, o define el tono, la croma y la luminosidad principales con los controles deslizantes. La muestra enseña el color y avisa si queda fuera del rango sRGB.
Sube el tinte de gris para dar a fondos, bordes y texto atenuado un toque del tono de la marca. Con cero se quedan en un neutro puro.
Cambia la vista previa entre claro y oscuro y lee la tabla de contraste del texto sobre cada superficie.
Copia el CSS y sustituye los bloques :root y .dark correspondientes en tu globals.css. Conserva el bloque @theme inline existente, que vincula estas variables con las utilidades de Tailwind.
Mantén una croma principal moderada, entre 0.12 y 0.2, en interfaces que la gente usa todo el día. Una croma muy alta resulta estridente en botones grandes.
El tema oscuro sube un poco la luminosidad principal, porque el mismo color parece más apagado sobre un fondo oscuro.
Busca al menos 4.5:1 entre el texto principal y su fondo, y revisa aparte el texto atenuado, porque es más claro por diseño.
Si añades tu propio color, como uno de advertencia, defínelo en ambos bloques y añade una entrada --color-warning a @theme inline, como muestra la documentación de temas.
Preguntas frecuentes
¿Por qué OKLCH en lugar de HSL?
La luminosidad de OKLCH sigue lo brillante que parece un color, así que dos colores con la misma L se perciben igual de claros aunque sus tonos sean distintos. Eso facilita crear conjuntos claros y oscuros que encajen. La documentación actual de temas de shadcn/ui usa OKLCH para todos los colores.
¿Qué significa cada número de OKLCH?
L es la luminosidad de 0 (negro) a 1 (blanco), C es la croma, lo vivo que es el color, empezando en 0 para el gris, y H es el ángulo del tono en grados. Un alfa opcional va después de una barra, como en oklch(1 0 0 / 10%).
¿Qué cambia --radius?
Los componentes redondean sus esquinas a partir de este único valor. La documentación de temas lo fija en 0.625rem por defecto, y el bloque @theme inline deriva de él pasos de radio más pequeños y más grandes.
¿Funcionará con proyectos más antiguos?
Los proyectos con plantillas antiguas pueden guardar los colores en otro formato y vincularlos de otra manera en la configuración de Tailwind. Compara tu globals.css con las variables de aquí antes de sustituir nada.
¿Son exactas las ratios de contraste?
Usan la fórmula de WCAG 2 tras convertir cada color OKLCH a sRGB, recortando cualquier valor fuera de rango. Los colores fuera de sRGB se verán ligeramente distintos en pantallas de gama amplia.
Cómo se obtiene la paleta
Tu color principal alimenta las variables primary, ring y sidebar-primary. Los grises de fondos, bordes y texto atenuado comparten un mismo tono con una croma mínima definida por el control de tinte, de modo que la interfaz se siente relacionada con la marca sin parecer coloreada.
Cada color de primer plano se elige midiendo el contraste con su superficie y quedándose con el casi blanco o el casi negro que se lea mejor. Los colores de los gráficos avanzan por la rueda de tonos desde tu tono principal para que las series sigan siendo distinguibles.
Detalles del modo oscuro
En el bloque oscuro, los bordes y los campos usan blanco con un alfa bajo en lugar de un gris sólido, lo que les permite adaptarse a cualquier superficie sobre la que estén. Las tarjetas se elevan ligeramente sobre el fondo de la página para que las capas sigan viéndose.
Prueba en especial los anillos de foco en modo oscuro. Un anillo que se ve claro sobre blanco puede desaparecer en una página azul marino oscuro.
Resultado de ejemplo: el preajuste Azul
Esto es exactamente lo que escribe el generador para el preajuste Azul. Pégalo sobre los bloques de color de globals.css.
Bloques de color de globals.css
Los valores claros van en :root y los oscuros en .dark, ambos en OKLCH.
Añadir tu propio token de color
Un color de advertencia que se puede usar como bg-warning
Define la pareja en ambos modos y luego exponla a Tailwind mediante @theme inline.
Neutro
Azul
Violeta
Verde
Naranja
Rosa
Preajustes: Neutro, Azul, Violeta, Verde, Naranja, Rosa. Ajusta tono, croma, luminosidad, tinte de gris y radio, previsualiza en claro y oscuro, y copia el CSS.
Crear proyecto
Despliega tu nuevo proyecto con un clic.
Nombre
Sitio de Acme
Desplegar
Cancelar
Eliminar
Elemento de menú con el cursor encima
Colores de gráficos
Crea tu tema
Preajustes
Aproximadamente {hex} en sRGB
, fuera de sRGB, así que las pantallas lo recortan