Add light/dark theme with system-preference detection
Build and Deploy / version (push) Successful in 2s
Build and Deploy / build (push) Successful in 8s
Build and Deploy / deploy (push) Successful in 1s

Neues client/src/lib/theme.ts verwaltet die Wahl (system/light/dark) in
localStorage. Umschalter-Button im Header (zyklisch: System -> Hell -> Dunkel),
Icon zeigt den aktuellen Modus. CSS-Variablen (--bg/--card/--text/--muted/
--bor/--cyan) bekommen einen Hell-Override über [data-theme="light"] bzw.
@media(prefers-color-scheme:light) ohne explizites [data-theme="dark"] - so
gewinnt eine manuelle Wahl in beide Richtungen gegen die Systemeinstellung.
Header/Tabs/Login bleiben bewusst immer dunkel-navy (Markenidentität), nur
der Content-Bereich wechselt. Inline-Script in index.html verhindert ein
kurzes Aufblitzen des falschen Farbschemas vor dem ersten Paint.

Temporärer test-build-only.yml Workflow zur Verifikation ohne Registry-Push.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Fidelis Huber
2026-08-22 17:33:15 +02:00
co-authored by Claude Sonnet 5
parent 3d070d4dd7
commit c1bb51b480
6 changed files with 105 additions and 0 deletions
+3
View File
@@ -2,9 +2,12 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import { MsalProvider } from '@azure/msal-react';
import { msalInstance } from './lib/authConfig';
import { initTheme } from './lib/theme';
import App from './App';
import './styles.css';
initTheme();
msalInstance.initialize().then(() => {
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>