Erscheinungsbild

Farben und Schrift der gesamten Installation stecken in einer einzigen Datei, tokens.css. Der Weg ist: herunterladen — im Editor ändern — hochladen. Einzustellen unter Einstellungen → Erscheinungsbild.

1. Gerüst herunterladen. Ist noch kein eigenes Theme hinterlegt, kommt die mitgelieferte Datei; sonst die derzeit aktive. Sie ist durchgehend kommentiert.
2. Ändern. Geändert werden die Werte, nicht die Namen. Ein Variablenname, den es nicht gibt, bleibt wirkungslos — die Seite bleibt heil, die Änderung passiert nur nicht. Ebenso wichtig ist der Platz: Es wirkt nur, was in :root, in .dark oder in einem anderen gewöhnlichen Selektor steht. :root gilt im hellen Modus (und im dunklen, sofern .dark nichts anderes sagt), .dark nur im dunklen.
3. Hochladen. Nur .css. Die Datei wird vollständig übernommen und als <style>-Block in den Kopf jeder Seite gesetzt.

Die zwei Ebenen

Welche du anfasst, entscheidet, wie viel sich ändert.

Ebene 1 — Grundpalette (--c-…). Acht Werte, und die ganze Installation sieht anders aus. --c-ink ist die Textfarbe, --c-surface-50 der Seitengrund, --c-border die Linienfarbe, --c-brand der Akzent — je einmal für hell (:root) und dunkel (.dark). Alles, was nichts Eigenes sagt, folgt diesen Werten.

Ebene 2 — Element-Tokens (--e-…). Ein Wert je Element. Auszugsweise:

Element	Token
Fließtext	--e-body
Überschriften	--e-heading (h1/h2), --e-subheading (h3/h4)
Feld-Beschriftungen	--e-label, Hilfetexte --e-help
Fließtext-Links	--e-link, Unterstrich beim Zeigen --e-link-hover
Kopfleiste	--e-nav (Fläche), --e-on-nav (Links und Symbole), --e-nav-line
Menüs	--e-menu, --e-on-menu, --e-menu-line
Buttons	--e-button (Fläche), --e-on-button (Beschriftung), --e-button-line
Buttons, zweite Stufe	--e-button-secondary, --e-on-button-secondary, --e-button-secondary-line
Karten	--e-card, --e-card-line
Tabellen	--e-table, --e-table-head, --e-table-line
Dialoge und Toasts	--e-dialog, --e-toast samt -line
Formularfelder	--e-input, --e-on-input, --e-input-line, --e-input-hint
Ablagefläche beim Hochladen	--e-dropzone, --e-on-dropzone, --e-dropzone-line, beim Ziehen --e-dropzone-active
Fortschrittsbalken	--e-progress (Balken), --e-track (Spur darunter)
Trennlinien allgemein	--e-line
Fußzeile	--e-footer, --e-on-footer, --e-footer-line
Zeigen mit der Maus	--e-hover und --e-on-hover, je Element zusätzlich --e-button-hover, --e-nav-hover, …

Die vollständige Liste steht kommentiert in der Datei. Jeder dieser Werte zeigt per Vorgabe auf Ebene 1 und erbt, solange du ihn nicht anfasst.

Das ist der praktische Unterschied: Überschriften in der Hausfarbe bei schwarzem Fließtext sind eine Zeile —

:root {
    --e-heading: #1d4ed8;
}

— und nicht der Versuch, --c-ink zu ändern, was Fließtext, Überschriften, Kartenrahmen und Menütexte in einem Zug erwischt hätte.

Ein fester Farbwert gilt in beiden Modi. Sobald ein Element-Token auf eine Farbe statt auf die Palette zeigt, ist die Vererbung unterbrochen — auch im dunklen Modus. Soll er dort anders sein, wiederhole ihn im Block .dark. Prüfe in diesem Fall den Kontrast in beiden Modi.

Es gibt keinen Farbwähler. Dreißig Farbfelder in einem Formular könnten weniger und würden das Wichtigste nicht mitliefern: die Erklärung, welche Variable wohin wirkt.

Zurücksetzen

Zurücksetzen stellt das mitgelieferte Theme wieder her. Die hochgeladene Datei wird dabei gelöscht — wer sie behalten will, lädt sie vorher herunter.

Wo die Datei liegt

storage/app/private/theme/tokens.css. Das Verzeichnis storage/ ist vom Deployment ausgenommen, eine Aktualisierung überschreibt das Theme also nicht. Ins Backup gehört es trotzdem.

Zwei Meldungen nach dem Hochladen

@theme wirkt hier nicht. Wer die Datei resources/css/tokens.css direkt aus dem Quelltext nimmt statt das Gerüst herunterzuladen, findet dort @theme-Blöcke. Die gehören zum Bauvorgang von Tailwind; ein Browser kennt diese Anweisung nicht und überliest sie samt Inhalt — ohne Fehlermeldung. Das Ergebnis sieht aus wie „halb übernommen": Die Farben greifen, Schrift, Radien und Statusfarben nicht. Das Gerüst aus dieser Oberfläche hat die Blöcke bereits an den richtigen Platz gerückt; wird trotzdem eine Datei mit @theme hochgeladen, meldet die Seite die betroffenen Zeilen — und übernimmt die Datei dennoch.

Hinweis auf fremde Server. Enthält die Datei ein @import oder ein url() auf eine fremde Adresse — typisch bei aus dem Netz kopierten Themes, die ihre Schrift von einem CDN holen —, wird das nach dem Hochladen mit Zeilennummer angezeigt. Das Theme ist trotzdem aktiv: Die Entscheidung gehört dem Betreiber. Zu bedenken ist, dass dann bei jedem Seitenaufruf die IP-Adresse jedes Besuchers an diesen Server geht. Das gehört in die Datenschutzerklärung — oder die Dateien werden lokal abgelegt.

Schriften

Schriften werden nicht über die Oberfläche hochgeladen. Die Dateien (.woff2) werden von Hand nach public/fonts/ gelegt, der passende @font-face-Block gehört in die eigene tokens.css.

Web-Schriften sind lizenzpflichtig, und wer eine ablegt, muss die Lizenz haben. Das ist eine Entscheidung am Server, keine in einem Browser-Formular.