Couleurs

Un composant, ici, n'écrit jamais une couleur. Il demande un jetonUne variable CSS nommée --dp-quelque-chose, définie une fois et lue par chaque composant., et le thème répond — c'est pourquoi une ligne change tout le site, y compris les parties que vous n'avez pas encore écrites.

À vous

Ouvrez docpensieve.config.mjs et donnez à l'accent une couleur à vous :

theme: {
  framework: 'tailwind',
  tokens: {
    '--dp-accent': '#7c5cff',
    '--dp-radius': '0.75rem',
  },
},

Regénérez, puis regardez un lien, une jauge, l'entrée courante du menu, la bordure d'une carte que vous n'avez jamais touchée. Tout a bougé.

Le schéma sombre

La palette sombre est un second jeu de valeurs pour les mêmes jetons. Elle se redéfinit dans le dossier theme/, à la racine du projet — chaque fichier .css qui s'y trouve est lu dans l'ordre des noms et ajouté en dernier, ce qui en fait le dernier mot du projet :

• mon-cours

  • docpensieve.config.mjs
  • theme

    • 10-sombre.css — le vôtre
    • 99-docpensieve.css — écrit par init, sous le thème custom
  • docs

Créez theme/10-sombre.css. Le sombre arrive de deux façons — le système du lecteur, et la classe que pose une configuration — donc les deux s'écrivent :

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --dp-accent: #a78bfa;
    --dp-bg: #0b0b14;
  }
}

:root.dark {
  --dp-accent: #a78bfa;
  --dp-bg: #0b0b14;
}

L'en-tête porte un bouton qui bascule entre les deux et retient le choix. C'est le seul script que charge une page de contenu, et theme.toggle: false le retire.

Ce que vous devriez voir

Ce qui suit l'accent tout seul

Une icône posée dans la page prend la couleur du texte qui l'entoure : elle suit donc votre palette sans qu'on le lui dise.

sur l'accent, sur le texte discret.

<LogoIcon src="./icons/star.svg" size="1.5rem" style={{ color: 'var(--dp-accent)' }} />

La seule chose qui ne suit pas d'elle-même, c'est une classe que vous écrivez, et sa forme dépend du thème choisi à la première leçon du cours :

Sous le thème tailwind, une couleur ponctuelle est un utilitaire, écrit là où il sert :

<div className="text-indigo-500">Une ligne à vous</div>

Cette page vous montre la variante du thème que ce site emploie — c'est ForTheme, et c'est ainsi que toute la documentation reste juste sous les deux.

Vérifiez par vous-même