Aller au contenu
duxt

Surcharger le thème

Changer une couleur, remplacer un composant, ajouter une primitive shadcn-vue.

La couche livre le thème sous forme de fichiers que vous pouvez masquer. Trois niveaux, du plus petit au plus grand — et le plus petit qui fait l’affaire est le bon, car un composant que vous remplacez est un composant que vous maintenez désormais.

Étapes

  1. Une couleur : redéfinissez le token. La palette est l’ensemble neutre de shadcn sous forme de variables CSS. Redéfinissez-en une dans votre feuille de style ; aucun fork du fichier de la couche n’est nécessaire.
    :root {
  --primary: oklch(0.55 0.2 265);
}
.dark {
  --primary: oklch(0.7 0.18 265);
}

    Les deux blocs comptent : le thème bascule sur une classe dark, pas sur une media query — un token défini une seule fois est donc faux dans l’un des deux modes.
  1. Un morceau de la mise en page : créez le fichier. Nuxt résout d’abord votre composant du même nom : remplacer DuxtFooter, c’est donc créer app/components/DuxtFooter.vue dans votre projet. Les noms, props et slots sont dans la référence des composants — un nom documenté fait partie de la surface publique et ne sera pas renommé sans une version majeure.
  2. Un slot, là où il y en a un. DuxtPageFeedback émet feedback et expose son état via un slot : vous pouvez y accrocher votre propre formulaire sans remplacer le composant — détaillé dans Recueillir des retours.
  3. Une nouvelle primitive : utilisez la CLI. La couche possède ses composants shadcn-vue au lieu de les importer, et components.json oriente déjà la CLI vers le bon alias :
pnpm dlx shadcn-vue@latest add tooltip
  1. Un composant pour le Markdown. Tout ce qui se trouve dans app/components/content/ est appelable depuis une page avec la syntaxe de bloc MDC. Votre fichier du même nom remplace celui de la couche — voir la référence MDC.

Liste de contrôle

  • Rien n’a été copié hors de la couche qu’un token aurait pu changer
  • Chaque token redéfini a une valeur en clair et en sombre
  • Les composants remplacés portent exactement le nom que la référence leur donne
  • pnpm build rend toujours chaque page (une surcharge est l’endroit où le SSR casse)
Cette page vous a-t-elle été utile ?