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

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

Boutique de estilo con colores vibrantes

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

La clave del tema: “No asignes colores directamente”

Commandbox 광고

Este suele ser el punto que más confunde a quienes empiezan.

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">
  <button class="bg-blue-600 text-white px-4 py-2 rounded-lg">Save</button>
</div>

✅ Ejemplo correcto: usar tokens daisyUI y adaptarse al tema

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

Lo importante es el rol que cumple el 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).

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">
  Falta información de pago.
</div>

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

Commandbox 광고

Aplicar el tema es sorprendentemente sencillo.

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

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 y la página de usuario es clara”

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

<html data-theme="dark">
  <body>
    <main class="p-10">
      <h1 class="text-2xl font-bold">Todo es oscuro</h1>

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

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";

@plugin "daisyui" {
  themes: light --default, dark --prefersdark, cupcake;
}
  • 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" {
  themes: all;
}

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.

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:

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.

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