Konfiguration

Themes fuer Docs, Dashboard und Admin konsistent konfigurieren

Theme-Konfiguration ist in QuantenRam kein rein optisches Thema. Sie bestimmt, wie gut du lange Diffs liest, Warnungen erkennst, Billing-Zustaende einordnest und zwischen Docs und Dashboard ohne kognitive Reibung wechselst.

QuantenRam verwendet aktuell zwei Haupt-Theme-Kontexte. Die Docs und oeffentlichen Seiten speichern ihre Auswahl unter theme im Browser. Das Nutzer-Dashboard verwendet dashboard-theme. Interne Verwaltungsoberflaechen arbeiten mit separaten Theme-Schluesseln. Wenn du ein neues Theme oder eine visuelle Ueberarbeitung baust, solltest du diese Trennung bewusst respektieren, statt dieselben Schalter blind fuer alle Oberflaechen zu vermischen.

Docs und oeffentliche Seiten

Hier ist Lesbarkeit fuer laengere Texte, Codebeispiele und Tabellen entscheidend. Ein Theme sollte deshalb vor allem Ueberschriften, Fliesstext, Codebloecke und Kartenflaechen klar voneinander trennen, ohne mit zu viel Scheinwirkung zu arbeiten.

Dashboard

Im Dashboard stehen Aktivitaet, Plan, Keys und Modellwahl im Vordergrund. Theme-Farben muessen hier besonders gut zeigen, ob etwas neutral, erfolgreich, warnend oder kritisch ist, weil Nutzer auf dieser Seite echte Betriebsentscheidungen treffen.

Interne Verwaltung

Verwaltungsoberflaechen brauchen hohe Informationsdichte und schnelle visuelle Orientierung. Kontrast, Tabellenlesbarkeit und Statusfarben sind dort wichtiger als atmosphaerische Effekte, weil Freigaben, Modellzustand und Providerpflege auf engem Raum sichtbar bleiben muessen. Diese Oberflaechen sind nicht oeffentlich zugaenglich und verwenden eigene Theme-Schluessel.

Dark- und Light-Mode sauber schalten

Technisch ist das Grundmuster in QuantenRam einfach: Der gewaehlte Wert landet in localStorage, und die Seite setzt eine Klasse wie dark auf dem Wurzelelement. Wenn du neue UI-Teile hinzufuegst, sollte deine Theme-Logik genau an dieser Stelle andocken, statt neue Sondermechaniken einzufuehren. So bleiben Toggle, Persistenz und Testbarkeit ueber alle Bereiche konsistent.

function applyTheme(theme) {
  const isDark = theme === "dark";
  document.documentElement.classList.toggle("dark", isDark);
}

const saved = localStorage.getItem("dashboard-theme") || "light";
applyTheme(saved);

Die konkrete Storage-Key-Wahl darf je Oberflaeche unterschiedlich bleiben, aber die Semantik sollte gleich sein. Ein Nutzer darf nicht raten muessen, ob ein Theme per CSS-Klasse, Datenattribut oder Inline-Style aktiviert wird. Waehle einen Weg und halte ihn fuer die ganze Oberflaeche durch.

Eigene Themes ueber semantische Variablen bauen

Wenn du ein Custom Theme erstellst, beginne nicht bei einzelnen Komponenten, sondern bei semantischen Variablen. Hintergrund, Kartenflaeche, Standardtext, Sekundaertext, Linien, Fokus und Statusfarben sollten als Systemvariablen definiert werden. Danach werden Komponenten nur noch an diese Variablen gebunden. Genau so bleiben Dashboard, Docs und Admin konsistent, auch wenn sie unterschiedlich dicht oder unterschiedlich dekorativ gestaltet sind.

:root {
  --qr-bg: #f7f9fc;
  --qr-panel: #ffffff;
  --qr-text: #1b2533;
  --qr-muted: #667285;
  --qr-line: #d9e1ea;
  --qr-ok: #1f9d55;
  --qr-warn: #d97706;
  --qr-risk: #c2410c;
}

html.dark {
  --qr-bg: #0f1217;
  --qr-panel: #171c24;
  --qr-text: #e7edf6;
  --qr-muted: #9fb0c6;
  --qr-line: #2a3442;
}

Barrierefreiheit und visuelle Regression mitdenken

Ein Theme ist erst dann produktionsreif, wenn es sowohl im Light- als auch im Dark-Mode dieselben Statusinformationen transportiert. Gerade in QuantenRam muessen Erfolg, Warnung, Fehler und neutrale Hinweise in Docs, Dashboard und Admin dieselbe Sprache sprechen. Kontrastpruefung, sichtbare Focus-Zustaende und lesbare Codebloeke sind deshalb keine Endpolitur, sondern Teil der eigentlichen Konfiguration.

Praktisch hilft eine kleine Regression-Routine. Pruefe nach jeder Theme-Aenderung mindestens die Docs-Navigation, eine Codebox, das Dashboard mit Aktivitaets- oder Plan-Ansicht und eine Admin-Tabelle unter /ksxok. Wenn dieselbe Information in einem dieser Bereiche nur ueber Farbe und nicht auch ueber Struktur oder Text erkennbar ist, ist das Theme noch nicht fertig.

Theme-Konfiguration gelingt in QuantenRam am besten mit einer einfachen Regel: ein gemeinsames Farb- und Zustandsvokabular, getrennte Storage-Keys pro Oberflaeche und keinerlei Sonderlogik ausserhalb des zentralen Dark/Light-Umschalters.