Thème

Pour apprendre à s'en servir, voir Thèmes. Cette page liste ce qui existe.

Les options

theme: {
  framework: 'tailwind',
  darkMode: 'class',
  tokens: { '--dp-accent': 'oklch(55% 0.2 250)' },
  css: '.dp-article h2 { letter-spacing: -0.01em; }',
  source: '@import "tailwindcss";',
},

source ne concerne que le provider tailwind : c'est la feuille d'entrée qu'il compile. La remplacer permet d'ajouter des directives — un bloc @theme, par exemple — sans sortir du mécanisme. Les directives @plugin ne sont pas encore prises en charge et arrêtent la génération.

Les jetons

Vingt et un jetons, que les deux providers définissent et que les composants lisent. Un jeton redéfini se propage partout, sans qu'aucun composant ait à le savoir — dans la palette claire : les valeurs sombres vivent dans la feuille du thème, et se redéfinissent dans le dossier theme/ du projet.

Certains composants ajoutent les leurs, documentés sur leur page : --dp-skill-size pour une jauge circulaire, --dp-skill-color pour sa teinte, --dp-logo-icon-size pour une icône.

Les créneaux

Les gabarits n'écrivent aucune classe. Ils demandent la classe de chaque créneau, et le thème répond. Un provider ne redéfinit que ce qu'il change ; tout le reste garde la classe dp-* ci-dessous.

Un créneau peut porter des variantes, suffixées --variante : column donne dp-column--span-8, skill donne dp-skill--circle.

Comment un créneau est rendu

Toujours en triple accolade, dans les gabarits :

<nav class="{{{cls.sidebar}}}">

Une double accolade échapperait le contenu, et une classe utilitaire telle que aria-[current=page] deviendrait aria-[current=page] — un sélecteur muet, sans la moindre erreur.

Les feuilles de style

La feuille livrée est assemblée à partir de quatre morceaux, dans cet ordre :

Vient ensuite ce que le projet ajoute : theme.css, puis chaque fichier .css de son dossier theme/, dans l'ordre des noms.

La mise en page n'est jamais dupliquée dans un provider : elle vit dans structure.css, que les deux partagent. Un provider ne s'occupe que de l'habillage.

Ordre des couches

Sous le thème tailwind, la feuille déclare ses couches dans cet ordre :

@layer theme, base, components, utilities;

Les règles des composants vivent dans components, sous les utilitaires. Un className posé à l'emploi l'emporte donc toujours, quelle que soit la place de la règle dans le fichier.

Le thème custom n'a pas de couche d'utilitaires : ses feuilles ne sont dans aucune couche, et viennent donc avant les règles des composants, qui restent dans la couche components.

Ce qu'ajoutent theme.css et le dossier theme/ n'est dans aucune couche : sans couche, une règle l'emporte sur toutes celles qui en ont une. C'est ce qui permet d'y écrire un correctif sans se soucier de spécificité.