# 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](/media/editor_temp/6/80ae2ebd-04c4-4f84-b0d2-15666a888080.png) > Este artículo asume que la instalación ya está completa. > Si necesitas instalar, consulta la guía oficial: --- ## La clave del tema: “No asignes colores directamente” {#sec-648a5757ecf6} 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 {#sec-0b5438bac864} ```html
``` ### ✅ Ejemplo correcto: usar tokens daisyUI y adaptarse al tema {#sec-e1146fcf48a6} ```html
``` 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? {#sec-7cfab9901bed} 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. ```html
Falta información de pago.
``` --- ## Aplicar el tema: cambiar el ambiente con una sola `data-theme` {#sec-4d6308cbf561} Aplicar el tema es sorprendentemente sencillo. ```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 {#sec-e0f142807b1a} 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

Todo es oscuro

Esta sección siempre es clara Este span es retro
``` Esta funcionalidad se usa con más frecuencia que un simple “toggle de tema”. --- ## Gestión del tema: activa solo los temas que necesitas {#sec-ab5d0648dae0} Una vez instalado, la activación de temas se controla en el bloque `@plugin "daisyui" { ... }` de CSS. ```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: ```css @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 {#sec-612655295e82} 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? {#sec-67726d664b47} 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 {#sec-b349bf2c99ab} 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!