Das Theme überschreiben

Eine Farbe ändern, eine Komponente ersetzen, ein shadcn-vue-Primitiv hinzufügen.

Die Ebene liefert das Theme als Dateien, die du überschatten kannst. Drei Stufen, die kleinste zuerst — und die kleinste, die die Aufgabe erledigt, ist die richtige, denn eine Komponente, die du ersetzt, ist eine Komponente, die du nun pflegst.

Schritte

Eine Farbe: definiere den Token neu. Die Palette ist das neutrale shadcn-Set als CSS-Variablen. Definiere eine in deinem eigenen Stylesheet neu; ein Fork der Datei der Ebene ist nicht nötig.
```
:root {
  --primary: oklch(0.55 0.2 265);
}
.dark {
  --primary: oklch(0.7 0.18 265);
}
```
Beide Blöcke sind wichtig: Das Theme schaltet über eine dark-Klasse, nicht über eine Media-Query — ein nur einmal definierter Token ist also in einem der beiden Modi falsch.

Prüfe den Kontrast, den du gerade geändert hast

--muted-foreground trägt die Seitenbeschreibungen, das Inhaltsverzeichnis und den Breadcrumb. Der Wert der Ebene ist bewusst dunkler als shadcns Standard, der auf den Flächen, auf denen dieser Token tatsächlich landet, unter 4,5:1 misst.

Ein Stück des Layouts: lege die Datei an. Nuxt löst deine Komponente gleichen Namens zuerst auf — DuxtFooter zu ersetzen heißt also, app/components/DuxtFooter.vue in deinem Projekt anzulegen. Die Namen, Props und Slots stehen in der Komponentenreferenz — ein dokumentierter Name ist Teil der öffentlichen Oberfläche und wird nicht ohne ein Major-Release umbenannt.
Ein Slot, wo es einen gibt. DuxtPageFeedback sendet feedback und legt seinen Zustand über einen Slot offen, du kannst dein eigenes Formular also daran hängen, ohne die Komponente zu ersetzen — durchgespielt in Seiten-Feedback sammeln.
Ein neues Primitiv: nimm die CLI. Die Ebene besitzt ihre shadcn-vue-Komponenten, statt sie zu importieren, und components.json richtet die CLI bereits auf den passenden Alias:

pnpm dlx shadcn-vue@latest add tooltip

Eine Komponente für Markdown. Alles in app/components/content/ ist aus einer Seite mit MDC-Blocksyntax aufrufbar. Deine eigene Datei gleichen Namens ersetzt die der Ebene — siehe MDC-Referenz.

Checkliste

Nichts wurde aus der Ebene kopiert, was ein Token hätte ändern können
Jeder neu definierte Token hat einen Wert für hell und dunkel
Ersetzte Komponenten heißen genau so, wie die Referenz sie benennt
pnpm build rendert weiterhin jede Seite (ein Override ist die Stelle, an der SSR bricht)

War diese Seite hilfreich?

#Schritte

#Checkliste

Schritte

Checkliste