Revision Ver-1

Tema daisyUI: 35 paletas para acabar con las dudas de color

daisyUI no se limita a “soporte de modo oscuro”.\n35 paletas (temas) predefinidas con combinaciones de colores de nivel de producto están disponibles, y puedes aplicarlas de forma coherente en toda la aplicación.

Boutique de estilo con colores vibrantes

\n
Este artículo asume que la instalación ya está completa.\nSi necesitas instalar, consulta la guía oficial: https://daisyui.com/docs/install/
\n

Entendiendo el tema: “No se asignan colores directamente”

El punto más confuso para los principiantes es aquí.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Método incorrecto	Resultado
Usar Tailwind con `bg-white`, `text-slate-900`, `bg-blue-600` y asignar colores directamente	El elemento mantiene el color fijo incluso cuando cambias el tema

Para usar el tema, no codifiques colores; utiliza los tokens (nombres de colores basados en significado) que daisyUI ofrece.

❌ Ejemplo incorrecto: ignorar el tema con codificación directa

<div class="bg-white text-slate-900 p-6 rounded-2xl">\n  <button class="bg-blue-600 text-white px-4 py-2 rounded-lg">Save</button>\n</div>\n

✅ Ejemplo correcto: usar tokens daisyUI y adaptarse al tema

<div class="bg-base-100 text-base-content p-6 rounded-box">\n  <button class="btn btn-primary">Save</button>\n</div>\n

Lo importante es el rol del color, no el color en sí.

bg-base-100: fondo principal de pantalla/carta
text-base-content: color de texto principal
btn-primary: acción principal (CTA)

El tema asigna colores según estos roles.

Entonces, ¿qué se debe usar?

Para usar correctamente el tema daisyUI, adopta una de las siguientes prácticas (o ambas).

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Uso	Ejemplo
Clases de componentes daisyUI	`btn`, `btn-primary`, `alert`, `badge`, `card`, `navbar`, `input`, etc.
Clases de tokens de color daisyUI (basados en significado)	Fondo/texto base: `bg-base-100`, `bg-base-200`, `bg-base-300`, `text-base-content` Color de punto: `bg-primary`, `text-primary`, `bg-secondary`, `bg-accent`, `bg-neutral` Estado: `bg-info`, `bg-success`, `bg-warning`, `bg-error` (+ sus `*-content`)

Por ejemplo, para una barra de advertencia, no asignes colores directamente, sino que expreses el rol.

<div class="bg-warning text-warning-content p-4 rounded-box">\n  Falta información de pago.\n</div>\n

Aplicar el tema: cambiar el ambiente con una sola `data-theme`

Aplicar el tema es sorprendentemente sencillo.

<html data-theme="cupcake">\n  <body>\n    <div class="bg-base-100 text-base-content min-h-screen p-10">\n      <button class="btn btn-primary">Primary</button>\n    </div>\n  </body>\n</html>\n

Esta única línea (data-theme) cambia el conjunto de variables de color de toda la aplicación.

El tema no solo cambia “todo”: también se aplica por sección

En el desarrollo de productos surgen requerimientos frecuentes.

“La página principal es limpia, pero el banner de eventos debe destacar”
“El panel de administración es oscuro, la página de usuario es claro”

daisyUI permite aplicar data-theme a un DOM específico, cambiando solo esa zona. No hay límite de anidamiento.

<html data-theme="dark">\n  <body>\n    <main class="p-10">\n      <h1 class="text-2xl font-bold">Todo es oscuro</h1>\n\n      <section data-theme="light" class="mt-8 p-6 rounded-box bg-base-100 text-base-content">\n        Esta sección siempre es clara\n        <span data-theme="retro" class="ml-2">Este span es retro</span>\n      </section>\n    </main>\n  </body>\n</html>\n

Esta funcionalidad se usa con más frecuencia que un simple “toggle de tema”.

Gestión del tema: activa solo los temas que necesitas

Una vez instalado, la activación de temas se controla en el bloque @plugin "daisyui" { ... } de CSS.

@import "tailwindcss";\n\n@plugin "daisyui" {\n  themes: light --default, dark --prefersdark, cupcake;\n}\n

themes es una lista separada por comas.
--default indica el tema por defecto.
--prefersdark activa el tema cuando el sistema prefiera modo oscuro (prefers-color-scheme: dark).

Si quieres probar todos, puedes hacer:

@plugin "daisyui" {\n  themes: all;\n}\n

En la práctica, suele ser más sencillo activar solo los temas necesarios.

Diferenciador: ver la “selección de tema” como estrategia de producto, no solo diseño

Ver los 35 temas como simples “skins bonitas” es un desperdicio. Mi enfoque es el siguiente.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Etapa	Uso
MVP	Presentar varios temas como “candidatos de marca” y validar rápidamente con UI/Contenido
Operación	Al no codificar colores, renovar la marca o eventos de temporada se logra cambiando solo el tema
Colaboración	Sin diseñador, mantener la coherencia con tokens basados en roles

El mensaje clave es:

\n
Al eliminar la codificación directa de colores, el tema se convierte en una herramienta que actualiza toda la aplicación de un solo golpe.
\n

¿Cuándo se necesita un tema personalizado?

En resumen, la mayoría de los casos se resuelven con los 35 temas por defecto. Son suficientemente completos que, normalmente, basta con elegir uno y hacer ajustes mínimos.

Sin embargo, hay situaciones donde se considera un tema personalizado.

Color de marca definido: Si la marca ya tiene un color principal, puedes elegir un tema base y sobreponer ese color.

En estos casos, es más eficiente personalizar solo primary y secondary que crear un tema desde cero. Así, los botones, enlaces y CTA reflejan la marca, mientras que el resto mantiene el equilibrio tonal del tema base.

La forma práctica de sobrescribir primary y secondary se detalla en el próximo artículo con ejemplos de código.

Próximo artículo

En la siguiente publicación abordaremos:

Patrón práctico de “mantener el tema y modificar ligeramente los componentes”
Cómo personalizar el tema
Cheat sheet de variables de color y clases que ofrece daisyUI

¡Hasta la próxima!

', '/media/editor_temp/6/80ae2ebd-04c4-4f84-b0d2-15666a888080.png')

Tema daisyUI: 35 paletas de colores para acabar con las dudas de color [ r1 ]