Aller au contenu principal

Votre marque, sans étape de build.

Un thème daisyUI 5 n’est rien d’autre qu’un bloc de propriétés CSS personnalisées sous un sélecteur data-theme — ApiGlow peut donc accepter le vôtre à l’exécution. Deux canaux existent, à dessein, et tous deux prennent la sortie du générateur de thèmes daisyUI telle quelle.

Canal 1 : la config

Déclarez le thème dans theme.custom ; l’app génère et injecte son CSS au démarrage.

{
  "theme": {
    "default": "acme",
    "available": ["acme", "light", "dark"],
    "custom": [
      {
        "name": "acme",
        "extends": "dark",
        "tokens": {
          "--color-primary": "#6d28d9",
          "--color-primary-content": "#f5f3ff",
          "--radius-box": "0.5rem"
        }
      }
    ]
  }
}
  • name — requis, [a-z][a-z0-9-]*. Le nommer comme un thème intégré (light, dark, …) restyle ce thème sur place — le chemin le moins cher pour « garder light et dark, brander le primary ».
  • extends — optionnel, n’importe quel thème daisyUI intégré dont hériter. Le cas d’usage premier : « dark, mais à nos couleurs », une poignée de tokens. Sans lui, les tokens absents retombent sur le thème par défaut du build : déclarez alors le jeu complet — le générateur émet tous les tokens de toute façon. Étendre un autre thème custom n’est pas pris en charge.
  • colorScheme — optionnel, "light" ou "dark", pilote l’UI fournie par le navigateur (barres de défilement, contrôles de formulaire). Hérité d’extends quand absent.
  • tokens — les variables de thème daisyUI 5 sous leurs noms exacts : les vingt --color-*, les rayons et tailles, --border, --depth, --noise. C’est ce qui permet de coller la sortie du générateur sans traduction.

Listez aussi le thème dans theme.available, sinon il est injecté mais pas sélectionnable.

Canal 2 : votre CSS

Zéro config au-delà du listage : un bloc dans la feuille de style de la page hôte, et le nom dans theme.available.

[data-theme="acme"] {
  color-scheme: dark;
  --color-primary: #6d28d9;
  --color-primary-content: #f5f3ff;
  /* …le reste des variables de thème daisyUI… */
}

Les tokens non définis retombent sur les valeurs du thème par défaut. Pour restyler un thème intégré sur place, préférez le canal config : il reproduit les sélecteurs de daisyUI, donc il continue de fonctionner quelle que soit la façon dont daisyUI organise ses couches CSS.

Une validation indulgente, exprès

Un thème est une affaire de style, donc rien chez lui n’a le droit de casser la page : un token inconnu ou une valeur invalide est ignoré avec un avertissement en console, un nom absent d’available est signalé (probablement une erreur de config) mais injecté quand même, et un nom en double avertit et garde le premier. Le pire qu’un mauvais thème puisse faire, c’est être laid.

En multi-spec

theme.custom reste à la racine — les thèmes sont du chrome global, injecté une fois au démarrage. Une entrée specs[] peut toujours surcharger theme.default et theme.available : une spec restreint ce qui est sélectionnable, elle ne définit jamais un thème. Détails dans le guide multi-spec.

Le reste du branding — nom du produit, logo, liens de pied de page, et la seule chose qui reste toujours — vit sur la page Thèmes & branding.