papopporking-oss/opencode-nextjs-standard

Colores de daisyUI 5

Nombres de color de daisyUI

• primary: El color principal de la marca.
• primary-content: Color de contenido en primer plano para usar sobre primary.
• secondary: Un color opcional secundario de la marca.
• secondary-content: Color de contenido en primer plano para usar sobre secondary.
• accent: Un color opcional de acento de la marca.
• accent-content: Color de contenido en primer plano para usar sobre accent.
• neutral: Un color neutro oscuro para áreas de la interfaz que no usan colores saturados.
• neutral-content: Color de contenido en primer plano para usar sobre neutral.
• base-100: El color de superficie base de la página para fondos en blanco.
• base-200: Un tono base más oscuro que proporciona elevación.
• base-300: Un tono base aún más oscuro que proporciona más elevación.
• base-content: Color de contenido en primer plano para usar sobre un color base.
• info: Color para mensajes de información y ayuda.
• info-content: Color de contenido en primer plano para usar sobre info.
• success: Color para mensajes de éxito y estado seguro.
• success-content: Color de contenido en primer plano para usar sobre success.
• warning: Color para mensajes de advertencia y precaución.
• warning-content: Color de contenido en primer plano para usar sobre warning.
• error: Color para mensajes de error, peligro y acciones destructivas.
• error-content: Color de contenido en primer plano para usar sobre error.

Reglas de color de daisyUI

1. daisyUI agrega nombres de color semánticos a los colores de Tailwind CSS.
2. Usa los nombres de color de daisyUI en las clases de utilidad como usas otros nombres de color de Tailwind CSS. Por ejemplo, bg-primary usa el color primario para el fondo.
3. El valor de cada nombre de color de daisyUI es una variable. Por lo tanto, el color puede cambiar con el tema.
4. No uses dark: con nombres de color de daisyUI.
5. Si es posible, usa solo nombres de color de daisyUI. Esto permite que los colores cambien automáticamente con el tema.
6. Si usas un nombre de color de Tailwind CSS como red-500, su color permanece igual en todos los temas.
7. Si usas un nombre de color de daisyUI como primary, su color cambia con el tema.
8. Evita los nombres de color de Tailwind CSS para el texto. Por ejemplo, text-gray-800 sobre bg-base-100 se vuelve ilegible en un tema oscuro porque bg-base-100 es oscuro.
9. Los colores *-content deben tener un contraste claro con sus colores relacionados.
10. Usa colores base-* para la mayor parte de la página. Usa la variante predeterminada para todos los elementos. Usa primary solo para el elemento más importante de la página. Úsalo solo una vez.
11. En casos raros, puedes usar un color de Tailwind CSS si el contenido debe mantener el mismo color en todos los temas. Por ejemplo, puedes usar text-red-500 en lugar de text-error. Para un ícono SVG o un gráfico, un color fijo puede ser necesario.

Habilitar y aplicar temas

La configuración predeterminada habilita light y dark. En el plugin de daisyUI, selecciona temas específicos, todos los temas o ningún tema integrado:

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

• Usa themes: all; para habilitar todos los temas integrados.
• Usa themes: false; para deshabilitar todos los temas integrados. Generalmente, haz esto antes de definir solo temas personalizados.
• Agrega data-theme="NOMBRE_DEL_TEMA" a <html> o un elemento anidado. Puedes anidar temas sin límite de profundidad.

<html data-theme="dark">
  <section data-theme="light">
    <div data-theme="retro">Tema anidado</div>
  </section>
</html>

Tema personalizado de daisyUI con colores personalizados

Un archivo CSS que contiene Tailwind CSS, daisyUI y un tema personalizado de daisyUI tiene esta estructura:

@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
  name: "mitema";
  default: true; /* establecer como predeterminado */
  prefersdark: false; /* establecer como modo oscuro predeterminado (prefers-color-scheme:dark) */
  color-scheme: light; /* color de la interfaz proporcionada por el navegador */

  --color-base-100: oklch(98% 0.02 240);
  --color-base-200: oklch(95% 0.03 240);
  --color-base-300: oklch(92% 0.04 240);
  --color-base-content: oklch(20% 0.05 240);
  --color-primary: oklch(55% 0.3 240);
  --color-primary-content: oklch(98% 0.01 240);
  --color-secondary: oklch(70% 0.25 200);
  --color-secondary-content: oklch(98% 0.01 200);
  --color-accent: oklch(65% 0.25 160);
  --color-accent-content: oklch(98% 0.01 160);
  --color-neutral: oklch(50% 0.05 240);
  --color-neutral-content: oklch(98% 0.01 240);
  --color-info: oklch(70% 0.2 220);
  --color-info-content: oklch(98% 0.01 220);
  --color-success: oklch(65% 0.25 140);
  --color-success-content: oklch(98% 0.01 140);
  --color-warning: oklch(80% 0.25 80);
  --color-warning-content: oklch(20% 0.05 80);
  --color-error: oklch(65% 0.3 30);
  --color-error-content: oklch(98% 0.01 30);

  --radius-selector: 1rem; /* radio de borde de selectores (checkbox, toggle, badge) */
  --radius-field: 0.25rem; /* radio de borde de campos (button, input, select, tab) */
  --radius-box: 0.5rem; /* radio de borde de cajas (card, modal, alert) */
  /* valores preferidos para --radius-* : 0rem, 0.25rem, 0.5rem, 1rem, 2rem */

  --size-selector: 0.25rem; /* tamaño base de selectores (checkbox, toggle, badge). El valor debe ser 0.25rem a menos que intencionalmente queramos selectores más grandes. Si es así, puede ser 0.28125 o 0.3125. Si intencionalmente queremos selectores más pequeños, puede ser 0.21875 o 0.1875 */
  --size-field: 0.25rem; /* tamaño base de campos (button, input, select, tab). El valor debe ser 0.25rem a menos que intencionalmente queramos campos más grandes. Si es así, puede ser 0.28125 o 0.3125. Si intencionalmente queremos campos más pequeños, puede ser 0.21875 o 0.1875 */

  --border: 1px; /* tamaño del borde. El valor debe ser 1px a menos que intencionalmente queramos bordes más gruesos. Si es así, puede ser 1.5px o 2px. Si intencionalmente queremos bordes más delgados, puede ser 0.5px */

  --depth: 1; /* solo 0 o 1 - Agrega una sombra y un sutil efecto de profundidad 3D a los componentes */
  --noise: 0; /* solo 0 o 1 - Agrega un sutil efecto de ruido (grano) a los componentes */
}

Reglas

• Debes incluir todas las variables CSS del ejemplo.
• Los colores pueden usar OKLCH, hexadecimal u otro formato.
• Si generas un tema personalizado, no incluyas los comentarios del ejemplo. Proporciona solo el código.

Opcional: Usa la herramienta visual en https://daisyui.com/theme-generator/ para crear un tema personalizado.

Cambiar un tema integrado

Usa el nombre del tema integrado. Cambia solo los valores necesarios. daisyUI hereda los demás valores:

@plugin "daisyui/theme" {
  name: "light";
  default: true;
  --color-primary: blue;
  --color-secondary: teal;
}

Para un tema CDN personalizado, define las mismas variables en un selector. El selector debe coincidir con el data-theme seleccionado y el controlador de tema:

:root:has(input.theme-controller[value=mitema]:checked),
[data-theme="mitema"] {
  color-scheme: light;
  --color-primary: oklch(55% 0.3 240);
  /* define las variables restantes del tema personalizado */
}

Para que la variante dark: de Tailwind siga uno o más temas de daisyUI, define una variante personalizada:

@custom-variant dark (&:where([data-theme=night], [data-theme=night] *));