Règles de couleurs daisyUI 5 pour Next.js

Couleurs daisyUI 5

Noms de couleurs daisyUI

• primary : La couleur principale de la marque.
• primary-content : Couleur de contenu au premier plan à utiliser sur primary.
• secondary : Une couleur secondaire facultative.
• secondary-content : Couleur de contenu au premier plan à utiliser sur secondary.
• accent : Une couleur d'accentuation facultative.
• accent-content : Couleur de contenu au premier plan à utiliser sur accent.
• neutral : Une couleur neutre foncée pour les zones d'interface qui n'utilisent pas de couleurs saturées.
• neutral-content : Couleur de contenu au premier plan à utiliser sur neutral.
• base-100 : Couleur de surface de base de la page pour les arrière-plans vierges.
• base-200 : Nuance de base plus foncée qui donne de l'élévation.
• base-300 : Nuance de base encore plus foncée qui donne plus d'élévation.
• base-content : Couleur de contenu au premier plan à utiliser sur une couleur de base.
• info : Couleur pour les messages d'information et d'aide.
• info-content : Couleur de contenu au premier plan à utiliser sur info.
• success : Couleur pour les messages de succès et d'état sûr.
• success-content : Couleur de contenu au premier plan à utiliser sur success.
• warning : Couleur pour les messages d'avertissement et de prudence.
• warning-content : Couleur de contenu au premier plan à utiliser sur warning.
• error : Couleur pour les messages d'erreur, de danger et d'action destructrice.
• error-content : Couleur de contenu au premier plan à utiliser sur error.

Règles de couleurs daisyUI

1. daisyUI ajoute des noms de couleurs sémantiques aux couleurs de Tailwind CSS.
2. Utilisez les noms de couleurs daisyUI dans les classes utilitaires comme vous utilisez les autres noms de couleurs Tailwind CSS. Par exemple, bg-primary utilise la couleur principale pour l'arrière-plan.
3. La valeur de chaque nom de couleur daisyUI est une variable. Ainsi, la couleur peut changer avec le thème.
4. N'utilisez pas dark: avec les noms de couleurs daisyUI.
5. Si possible, utilisez uniquement les noms de couleurs daisyUI. Cela permet aux couleurs de changer automatiquement avec le thème.
6. Si vous utilisez un nom de couleur Tailwind CSS tel que red-500, sa couleur reste la même dans tous les thèmes.
7. Si vous utilisez un nom de couleur daisyUI tel que primary, sa couleur change avec le thème.
8. Évitez les noms de couleurs Tailwind CSS pour le texte. Par exemple, text-gray-800 sur bg-base-100 devient illisible dans un thème sombre car bg-base-100 est sombre.
9. Les couleurs *-content doivent avoir un contraste clair avec leurs couleurs associées.
10. Utilisez les couleurs base-* pour la majeure partie de la page. Utilisez la variante par défaut pour tous les éléments. Utilisez primary uniquement pour l'élément le plus important de la page. Ne l'utilisez qu'une seule fois.
11. Dans de rares cas, vous pouvez utiliser une couleur Tailwind CSS si le contenu doit conserver la même couleur dans tous les thèmes. Par exemple, vous pouvez utiliser text-red-500 au lieu de text-error. Pour une icône SVG ou un graphique, une couleur fixe peut être nécessaire.

Activer et appliquer les thèmes

La configuration par défaut active light et dark. Dans le plugin daisyUI, sélectionnez des thèmes spécifiques, tous les thèmes, ou aucun thème intégré :

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

• Utilisez themes: all; pour activer tous les thèmes intégrés.
• Utilisez themes: false; pour désactiver tous les thèmes intégrés. En général, faites-le avant de définir uniquement des thèmes personnalisés.
• Ajoutez data-theme="NOM_DU_THEME" à <html> ou à un élément imbriqué. Vous pouvez imbriquer des thèmes sans limite de profondeur.

<html data-theme="dark">
  <section data-theme="light">
    <div data-theme="retro">Thème imbriqué</div>
  </section>
</html>

Thème personnalisé daisyUI avec couleurs personnalisées

Un fichier CSS qui contient Tailwind CSS, daisyUI et un thème daisyUI personnalisé a cette structure :

@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
  name: "mytheme";
  default: true; /* définit comme thème par défaut */
  prefersdark: false; /* définit comme mode sombre par défaut (prefers-color-scheme:dark) */
  color-scheme: light; /* couleur de l'interface utilisateur du navigateur */

  --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; /* rayon de bordure des sélecteurs (case à cocher, toggle, badge) */
  --radius-field: 0.25rem; /* rayon de bordure des champs (bouton, input, select, onglet) */
  --radius-box: 0.5rem; /* rayon de bordure des boîtes (carte, modale, alerte) */
  /* valeurs préférées pour --radius-* : 0rem, 0.25rem, 0.5rem, 1rem, 2rem */

  --size-selector: 0.25rem; /* taille de base des sélecteurs (case à cocher, toggle, badge). La valeur doit être 0.25rem sauf si on veut intentionnellement des sélecteurs plus grands. Si c'est le cas, cela peut être 0.28125 ou 0.3125. Si on veut intentionnellement des sélecteurs plus petits, cela peut être 0.21875 ou 0.1875 */
  --size-field: 0.25rem; /* taille de base des champs (bouton, input, select, onglet). La valeur doit être 0.25rem sauf si on veut intentionnellement des champs plus grands. Si c'est le cas, cela peut être 0.28125 ou 0.3125. Si on veut intentionnellement des champs plus petits, cela peut être 0.21875 ou 0.1875 */

  --border: 1px; /* taille de la bordure. La valeur doit être 1px sauf si on veut intentionnellement des bordures plus épaisses. Si c'est le cas, cela peut être 1.5px ou 2px. Si on veut intentionnellement des bordures plus fines, cela peut être 0.5px */

  --depth: 1; /* seulement 0 ou 1 - Ajoute une ombre et un effet de profondeur 3D subtil aux composants */
  --noise: 0; /* seulement 0 ou 1 - Ajoute un effet de bruit (grain) subtil aux composants */
}

Règles

• Vous devez inclure toutes les variables CSS de l'exemple.
• Les couleurs peuvent utiliser OKLCH, hexadécimal ou un autre format.
• Si vous générez un thème personnalisé, n'incluez pas les commentaires de l'exemple. Donnez uniquement le code.

Optionnel : Utilisez l'outil visuel à l'adresse https://daisyui.com/theme-generator/ pour créer un thème personnalisé.

Modifier un thème intégré

Utilisez le nom du thème intégré. Modifiez uniquement les valeurs nécessaires. daisyUI hérite des autres valeurs :

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

Pour un thème CDN personnalisé, définissez les mêmes variables dans un sélecteur. Le sélecteur doit correspondre au data-theme sélectionné et au contrôleur de thème :

:root:has(input.theme-controller[value=mytheme]:checked),
[data-theme="mytheme"] {
  color-scheme: light;
  --color-primary: oklch(55% 0.3 240);
  /* définir les autres variables du thème personnalisé */
}

Pour faire en sorte que la variante dark: de Tailwind suive un ou plusieurs thèmes daisyUI, définissez une variante personnalisée :

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