Helles / dunkles Design

Überblick — was es leistet

Die InfraGuard-Konsole wird mit zwei Designs ausgeliefert: dunkel (Standard) und hell. Das Design wird über ein einziges Attribut am Wurzelelement des Dokuments (<html>) umgeschaltet, data-theme, dessen Wert den gesamten Satz der in SCSS definierten --infr-*-CSS-Variablen-Token austauscht. Jede Komponente verwendet var(--infr-*)-Token statt fest codierter Hex-Werte, sodass das Umlegen eines einzigen Wortes (dark ↔ light) die gesamte Oberfläche sofort neu einfärbt.

Der Standard ist dunkel — als NOC-Konsole (Network Operations Center) nutzt sie einen tief blauschwarzen Hintergrund mit türkisfarbenen Signalakzenten, damit die Schweregradfarben (crit / warn / good) auf dunklem Grund klar ablesbar bleiben.

<html data-theme="dark">   ← Standard, NOC-Dunkel
<html data-theme="light">  ← hell (helle Büroumgebungen)

Das Design ist eine reine Front-End-Einstellung. Es wird niemals auf dem Server gespeichert und hat weder mit Ihrem Konto noch mit der Datenbank zu tun — es lebt ausschließlich im localStorage des Browsers. Es übersteht das Abmelden, und wenn sich jemand mit demselben Konto auf einem anderen Gerät anmeldet, folgt dieses Gerät seiner eigenen Einstellung.

Wann Sie es nutzen

• Nachtbetrieb / NOC-Wanddisplays → dunkel (weniger Blendung, höherer Kontrast der Schweregradfarben).
• Helle Büros, Beamer, Screenshots für Dokumentation → hell.
• Persönliche Kontrast- oder Farbsehpräferenz — pro Benutzer umschaltbar.

Einmal gewählt bleibt die Einstellung in diesem Browser erhalten, Sie stellen sie also normalerweise nur einmal ein.

Aufbau

Umschalt-Schaltfläche in der Kopfleiste

Sowohl die Konsolenhülle (layouts/app.blade.php) als auch der Anmeldebildschirm (layouts/simple.blade.php) platzieren rechts in der oberen Leiste eine Schaltfläche zum Designwechsel.

Der Bildschirm vor der Anmeldung (Gast) trägt dieselbe Schaltfläche, Sie können das Design also ohne Authentifizierung ändern.

Gruppen von Farb-Token

resources/scss/_variables.scss definiert dieselben Token-Namen mit unterschiedlichen Werten in zwei Blöcken: :root[data-theme="dark"] und :root[data-theme="light"]. Repräsentative Token:

Darüber hinaus definiert jedes Design außerdem --infr-surface-2/hi, --infr-border-2, --infr-accent-soft/ink, --infr-on-accent (Schaltflächentext auf Akzentfarbe), TCP-Zustandsfarben (--infr-state-*), Diagrammfarben (--infr-chart-2), Schatten/Leuchten (--infr-shadow / --infr-glow) sowie das Glas der oberen Leiste (--infr-topbar-*). Jeder Block deklariert zusätzlich color-scheme: dark|light, damit native Formularelemente und Bildlaufleisten zum Design passen.

Die Farbpalette des SSH-Terminals ist eine Ausnahme. Die --infr-term-*-Token bleiben unabhängig von data-theme tief und immersiv dunkel. Auch im hellen Design behält die SSH-Konsole ein dunkles Terminal.

Vorgehen

Umschalten

1. Klicken Sie rechts in der oberen Leiste auf das Halbmond-Symbol (Design wechseln).
2. Es wechselt sofort zwischen dunkel ↔ hell, und die Auswahl wird automatisch gespeichert.
3. Beim nächsten Besuch oder nach einem Neuladen der Seite wird Ihre letzte Auswahl wiederhergestellt.

Unter der Haube (Entwicklerreferenz)

Das Front-End ist in resources/js/app.js verdrahtet. Kernlogik:

const THEME_KEY = 'infr-theme';                 // localStorage-Schlüssel
const get_theme = () => localStorage.getItem(THEME_KEY) || 'dark';   // Standard dunkel
const set_theme = (t) => {
    document.documentElement.setAttribute('data-theme', t);   // Attribut am Wurzelelement
    localStorage.setItem(THEME_KEY, t);                        // dauerhaft speichern
    window.dispatchEvent(new CustomEvent('infr:theme', { detail: t })); // Diagramme neu einfärben
};
// die Umschalt-Schaltfläche verdrahten
document.querySelectorAll('[data-theme-toggle]')
    .forEach(btn => btn.addEventListener('click',
        () => set_theme(get_theme() === 'dark' ? 'light' : 'dark')));

Zusammenfassung des Verhaltens:

Vermeidung des Aufblitzens ungestylter Inhalte (FOUC) — Skript vor dem Zeichnen

Ein winziges Inline-Skript ganz oben im <head> (von app.blade.php und simple.blade.php gemeinsam genutzt, vor dem CSS-Laden per @vite) setzt data-theme, bevor irgendein Stylesheet greift. Damit entfällt das "Dunkel→Hell-Aufblitzen" beim Neuladen.

<script>
  (function () {
    try { document.documentElement.setAttribute('data-theme',
            localStorage.getItem('infr-theme') || 'dark'); }
    catch (e) { document.documentElement.setAttribute('data-theme', 'dark'); }
  })();
</script>

Selbst dort, wo localStorage blockiert ist (Inkognito, blockierter Drittanbieterspeicher usw.), fällt das catch sicher auf dunkel zurück.

Diagramme und Editoren folgen dem Design

• ECharts (<metric-chart> / echarts-kit): liest die --infr-*-Token per getComputedStyle, um Diagrammfarben, Achsen und Tooltips aufzubauen, und färbt beim infr:theme-Ereignis neu ein. Die Prüfung is_dark() lautet data-theme !== 'light' (dunkel ist der Standard). Siehe Server-Zeitreihen.
• CodeMirror (<cm-editor>): die Eigenschaft :dark schaltet zwischen oneDark (dunkel) und einem hellen Design um. Vue-Seiten berechnen is_dark_mode = document.documentElement.dataset.theme === 'dark', übergeben es als :dark="is_dark_mode" und aktualisieren es beim infr:theme-Ereignis. Siehe Generator für Sicherungsskripte.

<cm-editor v-model="script.body" lang="bash" :dark="is_dark_mode"></cm-editor>

Datenquellen

Das Design hat überhaupt keine Speicherung in der Datenbank oder auf dem Server. Es verwendet ausschließlich:

Anhang C (Token für helles/dunkles Design) in CLAUDE.md ist die maßgebliche Quelle für den Entwurf der Farbpalette.

Zugriff

Das Design ist eine Oberflächeneinstellung ohne Bezug zu Authentifizierung oder Autorisierung.

• Jeder Benutzer, einschließlich Gästen (vor der Anmeldung), kann frei umschalten — keine Beschränkung nach Stufe.
• Bei demo=1 / staff=5 / admin=10 verhält es sich identisch.
• Da serverseitig nichts geschrieben wird, taucht es nie im Auditprotokoll (infr_audit_log) auf.

Fehlerbehebung und FAQ

F. Das Design wird beim Neuladen zurückgesetzt. Wenn der Browser localStorage blockiert (Inkognito, strenge Datenschutzeinstellungen, Blockade von Drittanbieterspeicher), lässt sich die Auswahl nicht sichern und fällt jedes Mal auf den Standard dunkel zurück. Gewähren Sie der Website Zugriff auf den Speicher.

F. Ich habe es in einem Tab geändert, aber ein anderer Tab hat sich nicht aktualisiert. Der Wechsel wird über das storage-Ereignis an andere Tabs desselben Browsers weitergegeben. Wird er nicht sofort übernommen, hat dieser Tab die Verdrahtung des Listeners (app.js) möglicherweise noch nicht geladen — laden Sie ihn neu. Unterschiedliche Geräte/Browser haben getrennte Speicher und synchronisieren sich nicht (so gewollt).

F. Ich habe auf Hell umgeschaltet, aber das SSH-Terminal bleibt dunkel. Das ist zu erwarten. Das Terminal verwendet eine eigene --infr-term-*-Palette, die unabhängig vom Anwendungsdesign tiefdunkel bleibt (Lesbarkeit / Immersion).

F. Eine Komponente sieht falsch aus (das Design greift bei ihr nicht). Diese Komponente hat Hex-Werte fest codiert statt Token zu verwenden. Per Konvention dürfen Komponenten ausschließlich var(--infr-*)-Token verwenden. Prüfen Sie resources/scss/pages mit dem Regressions-Grep auf direkte Hex-Werte:

rg -n "#[0-9a-fA-F]{3,6}" resources/scss/pages

F. Ich möchte, dass es dem Dunkelmodus meines Betriebssystems folgt. Die aktuelle Implementierung folgt der Betriebssystemeinstellung (prefers-color-scheme) nicht. Der Anfangswert ist immer dark, und sie merkt sich nur, was der Benutzer über die Schaltfläche ausdrücklich gewählt hat. Die Integration mit dem Betriebssystem steht auf der Roadmap.

Verwandte Themen

• Navigation und Layout — der Aktionsbereich der oberen Leiste (Design / Sprache / Benutzermenü)
• Sprache · Gebietsschema — die andere Front-End-Einstellung neben dem Design
• In diesem Handbuch suchen — Suche und Struktur von /manual
• Server-Zeitreihen und MetricChart — Diagramme, die sich aus den Design-Token neu einfärben
• Generator für Sicherungsskripte — die :dark-Bindung von CodeMirror
• SSH-Konsole — ein fest dunkles Terminal, unabhängig vom Anwendungsdesign