Cheat Sheet de Nombres de Colores y Clases de daisyUI: Tabla Esencial para Cambiar Temas
daisyUI se utiliza principalmente para facilitar el cambio de temas. Sin embargo, esa ventaja se pierde cuando los desarrolladores o diseñadores insertan colores fijos de Tailwind como bg-blue-500. En su lugar, si escribes tu HTML con los nombres de color semánticos que ofrece daisyUI y los aplicas con clases como btn-primary, bg-base-200 o text-error, al cambiar el tema todo el tono de la UI se ajusta automáticamente.
Por eso, la clave es conocer los nombres de color y los patrones de clases, y combinarlos en el marcado. Los diseñadores experimentados lo memorizarán de inmediato, pero para principiantes o desarrolladores backend/full‑stack que tocan la UI de vez en cuando, es mucho más rápido tener esta cheat sheet a mano que buscar en la documentación cada vez. En este artículo, organizamos de forma clara cuándo usar cada nombre de color y cómo combinarlos con las clases.
Nombres de Colores (Cuándo usarlos)
| Nombre de color | ¿Cuándo usarlo? (breve) | Ejemplo típico |
|---|---|---|
primary |
Color principal de la marca | Botón principal, CTA clave |
primary-content |
Texto/ícono sobre primary |
Texto de botón primary |
secondary |
Acción secundaria / sub-marca | Botón secundario, énfasis secundario |
secondary-content |
Texto/ícono sobre secondary |
Texto en zona secondary |
accent |
Punto de atención/énfasis | Badge, enlace destacado |
accent-content |
Texto/ícono sobre accent |
Texto sobre fondo accent |
neutral |
UI neutra (tono oscuro) | Navegación, pie de página, panel profundo |
neutral-content |
Texto/ícono sobre neutral |
Texto en zona neutral |
base-100 |
Fondo de página principal | Fondo de página/ lienzo |
base-200 |
Superficie ligeramente elevada | Tarjeta, fondo de sección |
base-300 |
Separación más marcada/ capa profunda | Línea divisoria, panel profundo |
base-content |
Texto/ícono sobre la familia base |
Texto principal |
info |
Información/guía | Banner informativo, pista |
info-content |
Texto/ícono sobre info |
Texto sobre fondo info |
success |
Éxito/normalidad | Notificación de éxito |
success-content |
Texto/ícono sobre success |
Texto sobre fondo success |
warning |
Precaución/advertencia | Mensaje de advertencia |
warning-content |
Texto/ícono sobre warning |
Texto sobre fondo warning |
error |
Error/riesgo | Acción destructiva |
error-content |
Texto/ícono sobre error |
Texto sobre fondo error |
Patrones de Clases (Reglas de combinación de colores)
| Propósito | Patrón | Ejemplo |
|---|---|---|
| Fondo | bg-{COLOR} |
bg-primary, bg-base-200 |
| Texto | text-{COLOR} |
text-base-content, text-error |
| Borde | border-{COLOR} |
border-neutral, border-base-300 |
| Degradado (inicio/medio/final) | from- / via- / to-{COLOR} |
from-primary via-accent to-secondary |
| Anillo (focus) | ring-{COLOR} |
ring-primary |
| Desplazamiento de anillo | ring-offset-{COLOR} |
ring-offset-base-100 |
| Relleno SVG | fill-{COLOR} |
fill-accent |
| Trazo SVG | stroke-{COLOR} |
stroke-neutral-content |
| Sombra | shadow-{COLOR} |
shadow-primary |
| Contorno | outline-{COLOR} |
outline-info |
| División | divide-{COLOR} |
divide-base-300 |
| Acento de formulario | accent-{COLOR} |
accent-primary |
| Cursor (caret) | caret-{COLOR} |
caret-primary |
| Decoración (subrayado) | decoration-{COLOR} |
decoration-accent |
| Marcador de posición | placeholder-{COLOR} |
placeholder-base-content |
Ajustar la opacidad
| Propósito | Patrón | Ejemplo |
|---|---|---|
| Fondo claro | bg-{COLOR}/10 |
bg-primary/10, bg-success/15 |
| Borde sutil | border-{COLOR}/30 |
border-error/30 |
| Texto tenue | text-{COLOR}/70 |
text-base-content/70 |
| Intensidad al pasar el ratón | hover:bg-{COLOR}/80 |
hover:bg-primary/80 |
Cuando quieras ajustar la intensidad de un color, combina la clase con
/número(%). Puedes sobreescribir los nombres de color, pero añadir colores fuera de la paleta de daisyUI no es recomendable, ya que rompe la coherencia del diseño y puede causar problemas al cambiar de tema.
Lecturas relacionadas :
No hay comentarios.