Konfiguration

Themes für 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-Zustände einordnest und zwischen Docs und Dashboard ohne kognitive Reibung wechselst.

QuantenRam verwendet aktuell zwei Haupt-Theme-Kontexte. Die Docs und öffentlichen Seiten speichern ihre Auswahl unter theme im Browser. Das Nutzer-Dashboard verwendet dashboard-theme. Interne Verwaltungsoberflächen arbeiten mit separaten Theme-Schlüsseln. Wenn du ein neues Theme oder eine visuelle Ueberarbeitung baust, solltest du diese Trennung bewusst respektieren, statt dieselben Schalter blind für alle Oberflächen zu vermischen.

Docs und öffentliche Seiten

Hier ist Lesbarkeit für längere Texte, Codebeispiele und Tabellen entscheidend. Ein Theme sollte deshalb vor allem Ueberschriften, Fliesstext, Codeblöcke und Kartenflächen klar voneinander trennen, ohne mit zu viel Scheinwirkung zu arbeiten.

Dashboard

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

Interne Verwaltung

Verwaltungsoberflächen brauchen hohe Informationsdichte und schnelle visuelle Orientierung. Kontrast, Tabellenlesbarkeit und Statusfarben sind dort wichtiger als atmosphärische Effekte, weil Freigaben, Modellzustand und Providerpflege auf engem Raum sichtbar bleiben müssen. Diese Oberflächen sind nicht öffentlich zugänglich und verwenden eigene Theme-Schlüssel.

Dark- und Light-Mode sauber schalten

Technisch ist das Grundmuster in QuantenRam einfach: Der gewählte Wert landet in localStorage, und die Seite setzt eine Klasse wie dark auf dem Wurzelelement. Wenn du neue UI-Teile hinzufügst, sollte deine Theme-Logik genau an dieser Stelle andocken, statt neue Sondermechaniken einzuführen. 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 Oberfläche unterschiedlich bleiben, aber die Semantik sollte gleich sein. Ein Nutzer darf nicht raten müssen, ob ein Theme per CSS-Klasse, Datenattribut oder Inline-Style aktiviert wird. Wähle einen Weg und halte ihn für die ganze Oberfläche durch.

Eigene Themes ueber semantische Variablen bauen

Wenn du ein Custom Theme erstellst, beginne nicht bei einzelnen Komponenten, sondern bei semantischen Variablen. Hintergrund, Kartenfläche, Standardtext, Sekundärtext, 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 müssen Erfolg, Warnung, Fehler und neutrale Hinweise in Docs, Dashboard und Admin dieselbe Sprache sprechen. Kontrastprüfung, sichtbare Focus-Zustände und lesbare Codeblöke sind deshalb keine Endpolitur, sondern Teil der eigentlichen Konfiguration.

Praktisch hilft eine kleine Regression-Routine. Prüfe nach jeder Theme-Änderung mindestens die Docs-Navigation, eine Codebox, das Dashboard mit Aktivitäts- 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 Oberfläche und keinerlei Sonderlogik ausserhalb des zentralen Dark/Light-Umschalters.