Stile & Theming

Pixi’VN-Vorlagen erstellen die UI mit shadcn/ui auf Basis von Tailwind CSS. Anders als eine gewöhnliche Komponentenbibliothek wird shadcn/ui nicht als Paket ausgeliefert: Der Quellcode der Komponenten wird in dein eigenes Projekt kopiert (unter src/components/ui/).

Das gesamte Theme — Farben, Rundungen, Schriftarten und mehr — hängt von einer einzigen Datei ab: src/styles.css.

Jenseits des einfachen Theme-Builders

Anstatt styles.css von Hand zu bearbeiten, kannst du mit einem visuellen Tool ein komplettes Theme generieren.

shadcn/ui-Theme-Builder

Der offizielle Theme-Builder ist ein visueller Editor: Du wählst eine Basisfarbe, passt die Palette für den hellen und dunklen Modus an und legst den Eckenradius fest, mit einer Live-Vorschau echter shadcn-Komponenten (Buttons, Cards, Inputs usw.) sodass du das Ergebnis siehst, bevor du etwas anwendest. Sobald du damit zufrieden bist, öffne den Abschnitt Copy der Seite: Er gibt dir einen startbereiten Befehl in der Form:

npx shadcn@latest add <generated-command>

Wenn du diesen Befehl im Stammverzeichnis deines Projekts ausführst, wird dein generiertes Theme abgerufen und damit werden die Farb-/Radius-Variablen in styles.css überschrieben, wie unter Vorlagen → Stil anpassen beschrieben.

Sobald du diesen generierten Code auf dein Projekt angewendet hast, führe aus:

npm run ui:reinit

Dies erzwingt eine Neuinstallation jeder shadcn-Komponente, die bereits in deinem Projekt vorhanden ist, direkt aus der shadcn-Registry, unter Verwendung deiner aktualisierten styles.css und components.json, und formatiert die Quelldateien anschließend neu. So bleiben alle Komponenten mit dem neuen Theme konsistent, anstatt sie auf den Variablen zu belassen, mit denen sie ursprünglich erstellt wurden.

tweakcn

tweakcn ist eine von der Community erstellte Alternative zum offiziellen Theme-Builder. Es deckt die gleichen Farben und Radien ab, ermöglicht aber zusätzlich die Live-Bearbeitung von Schriftarten und Schatten und bietet eine Galerie mit fertigen Voreinstellungen, von denen aus du starten kannst, anstatt eine Palette von Grund auf zu erstellen. Außerdem exportiert es sein Ergebnis als CSS-Variablen, sodass du die Ausgabe auf die gleiche Weise in styles.css einfügst und anschließend npm run ui:reinit ausführen kannst.

Diese beiden sind heute die am weitesten verbreiteten Theme-Generatoren für shadcn/ui. Falls du auf andere stößt: Wichtig ist, dass sie einfache CSS-Variablen (oder einen shadcn-Registry-Befehl) ausgeben — alles in diesem Format lässt sich auf die gleiche Weise in styles.css einfügen.