Schnittstellenthema-Schalter

1) Grundsätze

1. System> Haut. Das Thema ist nicht nur eine Umkehrung des Hintergrunds, sondern eine Reihe von Token (Farbe, Hintergrund, Kontrast, Schatten, Zustände, Illustrationen, Grafiken).
2. System-first. Die Voreinstellung ist System ('prefers-color-scheme') mit der Möglichkeit, Light/Dark/High-Contrast manuell auszuwählen.
3. Der Standardkontrast. Das Ziel ist WCAG AA, für kleinen Text/wichtige Tags ist AAA.
4. Keine Ausbrüche. Wir wenden das Thema vor dem Rendern an (Inline-Skript), und wir machen die Übergänge sorgfältig.
5. Stabilität der Marke. Die Akzente und Semantik der Status bleiben in allen Themen erhalten.

2) Modi und Szenarien

Licht - Tagesszenarien/Zahlungsformulare/langes Lesen.
Dunkel - Abend/wenig Licht/Live-Matches; reduziert die Blendung.
System - Folgen Sie dem Betriebssystem/Browser ('prefers-color-scheme').
High-Contrast - erhöhter Kontrast und Minimierung von Schmuck (inkl. Reduce Motion).
Saisonal/Promo (optional) - oben auf dem Basisthema unter dem Turnier/Event (bricht keine Token).

3) Token-Architektur

css
:root {
/ semantics/
--bg:    hsl(0 0% 99%);
--bg-elev:  hsl(0 0% 100%);
--fg:    hsl(220 15% 15%);
--muted:   hsl(220 10% 45%);
--accent: hsl (260 95% 60%) ;/brand accent/
--success:  hsl(152 55% 40%);
--warning:  hsl(36 85% 45%);
--danger:  hsl(0 75% 50%);
--border:  hsl(220 10% 90%);
--focus:   hsl(260 95% 60% /.6);
--shadow:  0 6px 24px hsl(220 20% 10% /.08);

/ typography/radii/
--radius: 12px;
--lh: 1. 4;
}
:root[data-theme="dark"]{
--bg:   hsl(220 18% 10%);
--bg-elev: hsl(220 18% 14%);
--fg:   hsl(0 0% 96%);
--muted:  hsl(220 10% 70%);
--accent: hsl (260 95% 65%) ;/slightly lighter in the dark/
--border: hsl(220 14% 22%);
--shadow: 0 8px 28px hsl(220 50% 2% /.6);
}
:root[data-theme="hc"]{
/ high-contrast: simple pairs, high Lc/
--bg: #000; --bg-elev:#000; --fg:#fff; --muted:#fff;
--accent:#00E; --success:#0F0; --warning:#FF0; --danger:#F00;
--border:#fff; --focus:#0FF;
}

Regel: Komponenten verwenden nur semantische Token.

4) Detektor und Auswahl speichern

html
<script>
(function(){
const saved = localStorage. getItem('theme'); // 'light'    'dark'    'hc'    'system'    null const sys = window. matchMedia('(prefers-color-scheme: dark)'). matches? 'dark': 'light';
const theme = saved && saved!=='system'? saved: sys;
document. documentElement. setAttribute('data-theme', theme);
})();
</script>

js matchMedia('(prefers-color-scheme: dark)'). addEventListener('change', e=>{
if(localStorage. getItem('theme')==='system'){
document. documentElement. setAttribute('data-theme', e. matches? 'dark': 'light');
}
});

5) Glatte Übergänge ohne FOUC

Wenden Sie das Thema an, bevor Sie CSS (Inline-Skript) herunterladen.

css
@media (prefers-reduced-motion: no-preference){
html. theme-ready { transition: color. 18s, background-color. 18s, border-color. 18s; }
}

Fügen Sie nach dem Mounten der Anwendung 'class =' theme-ready''hinzu.

6) Komponenten und Zustände

Text/Icons: Kontrast ≥ AA; Sekundärtext mindestens 4. 5:1 (im Dunkeln leicht „verblassen“).
Felder/Karten: Hintergrund '--bg-elev', Grenze' --border', Schatten '--shadow'.
CTA: Hintergrund '--accent', Text kontrastierend ('# fff 'oder berechnet).
Zustände (hover/focus/active/disabled): Helligkeit/Alpha ändern, nicht „Regenbogen übergießen“.
Grafiken/Sparklines: separate Paletten für Licht/Dunkel; Gitter/Achsen sind kontrastarm, aber lesbar.

7) Bilder/Medien/Logos

Die Icons sind monochrom - durch 'currentColor' (angepasst an den Text).
Markenlogos nicht invertieren; bereiten Sie zwei Versionen vor (hell/dunkel).
Poster/Screenshots: leichtes Overlay in Darka (8-12%) für die Lesbarkeit der Texte.
SVG: Vermeiden Sie „harte“ Füllungen, verwenden Sie vars' var (--fg) '/' var (--accent)'.

8) Verfügbarkeit

Hoher Kontrast: separates Preset 'data-theme =' hc''.
Fokusringe: immer sichtbar ('outline: 2px solid var (--focus); outline-offset: 2px`).
Verlassen Sie sich nicht auf Farbe. Icon/Text/Muster für Status.
Schriftarten: 'font-variant-numeric: tabular-nums;' für Summen/Koeffizienten.
RTL: Das Thema bricht die Spiegelung nicht (wir verwenden logische Eigenschaften).

9) Performance

Farben - CSS custom properties an der Wurzel → sofortige Neubenutzung ohne Render der Komponenten.
Vermeiden Sie es, Bilder mit 'invert ()' -Filtern auf großen Containern zu „übermalen“.
Fauler Ersatz schwerer Illustrationen für ein Thema (falls erforderlich).
Speichern Sie keine großen Paletten in JS - das Thema wird von der Klasse/dem Attribut gesteuert.

10) Besonderheiten von iGaming

Live-Koeffizienten in der Nacht: „weicher“ Kontrast (AAA für Zahlen), Hervorhebung der Koeffizientenänderung - unaufdringlich, ohne Flimmern.
Verantwortungsvolles Spielen: Erinnerungen und Hinweise sind in beiden Themen lesbar; ohne „giftige“ Blumen in der Nacht.
Kasse: Felder/Unterschriften/Fehler ohne ermüdende leuchtende Akzente; Erfolg/Fehler stabil zum Thema.
Turnier „Skins“: nur als oberflächliche Akzent-Override, brechen Sie nicht die zugrunde liegenden Token.

11) UI Snippets

html
<label class="theme-switch">
<span> Topic </span>
<select id="theme">
<option value = "system "> System </option>
<option value = "light "> Bright </option>
<option value = "dark "> Dark </option>
<option value = "hc"> High contrast </option>
</select>
</label>
<script>
const sel = document. getElementById('theme');
sel. value = localStorage. getItem('theme')          'system';
sel. addEventListener('change', e=>{
const v = e. target. value;
localStorage. setItem('theme', v);
if(v==='system'){
const sys = matchMedia('(prefers-color-scheme: dark)'). matches? 'dark':'light';
document. documentElement. setAttribute('data-theme', sys);
} else {
document. documentElement. setAttribute('data-theme', v);
}
});
</script>

css
.btn{height:44px; padding:0 16px; border-radius:var(--radius); display:inline-flex; align-items:center; gap:8px}
.btn--primary{background:var(--accent); color:#fff}
.card{background:var(--bg-elev); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:var(--radius)}
.text-muted{color:var(--muted)}

tsx import { useEffect, useState } from 'react';
type Theme = 'light'    'dark'    'hc'    'system';
export function useTheme(){
const [theme, setTheme] = useState<Theme>(()=>localStorage. getItem('theme') as Theme          'system');
useEffect(()=>{
const apply = (t:Theme)=>{
const v = t==='system'? (matchMedia('(prefers-color-scheme: dark)'). matches? 'dark':'light'): t;
document. documentElement. setAttribute('data-theme', v);
};
apply(theme);
const mql = matchMedia('(prefers-color-scheme: dark)');
const on = ()=> theme==='system' && apply('system');
mql. addEventListener('change', on);
return ()=> mql. removeEventListener('change', on);
},[theme]);
useEffect(()=> localStorage. setItem('theme', theme),[theme]);
return { theme, setTheme };
}

12) Metriken

Theme Adoption Rate: Anteil der Nutzer auf Dark/System/HC.
FOUC-Rate: Anteil mit sichtbarem „white burst“ beim Start (<1%).
Contrast defects: Anzahl der Contrast Bugs pro Release.
Error visibility: Klicks/Wiederholungen aufgrund „unauffälliger“ Fehler in verschiedenen Themen.
Energiewirkung (mobil): Vergleich der Sitzungszeit im Darkie gegen Laite (indirekte Metrik).

13) Anti-Muster

Alles invertieren 'filter: invert (1)' - bricht Marke und Bedeutungen.
Farben direkt in Komponenten ohne Token ändern.
Verstecke die Fokusringe in einem dunklen Thema.
Zu dunkler Text auf dunklem Hintergrund (oder hell auf hell).
Lange Transition auf der ganzen Seite (Verzögerung).
„Exklusive“ Statusfarben in einem Thema, die es in einem anderen nicht gibt.

14) QS-Checkliste

Kontrast und Lesbarkeit

• Alle Texte ≥ AA; Kritische Tags/kleiner Text ≥ AAA.
• Fehler/Erfolge/Warnungen sind nicht nur farblich erkennbar.

Verhalten

• Das System respektiert das' prefers-color-scheme' und reagiert auf die Änderung des Betriebssystems.
• Kein FOUC (das Thema wird vor dem Rendern angewendet).
• Das Wechseln des Designs setzt den Status der Seiten nicht zurück.

Komponenten

• Karten/Formulare/Tabellen verwenden nur Token.
• Grafiken haben Paletten für beide Themen.
• Logos/Icons sind in beiden Themen korrekt sichtbar.

A11y

• Sichtbarer Fokus-Ring; High-Contrast-Modus ist verfügbar.
• Berücksichtigt wird „prefers-reduced-motion“.

Leistung

• Übergang ≤ 200 ms; ohne globale Reflow.
• Keine schweren Filter/Blends auf den Behältern.

15) Dokumentation im Konstruktionssystem

Thementoken: Paletten, Kontraste, Zustand (hover/focus/active/disabled).
Guides: Wie man einen neuen Brando-Akzent ohne Kontrast-Regression hinzufügt.
Charts/Medien: Vorkonfigurierte Paletten für Licht/Dunkel.
Muster: System-first, High-Contrast, sanftes Schalten ohne FOUC.
Do/Don't: Inversion durch Filter, Inline-Farben, unsichtbare Fehler/Fokus.

Kurze Zusammenfassung

Der Arbeitsschalter des Themas sind semantische Token + System-first + ein unscharfer Start. Fixieren Sie den Kontrast, zentralisieren Sie die Farben, respektieren Sie das' prefers-color-scheme' und die reduce-motion, speichern Sie die Auswahl des Benutzers und vermeiden Sie schwere Effekte. Dann bleibt die Benutzeroberfläche in jeder Umgebung lesbar und erkennbar - vom Late-Night-Live-Match über die Tageskasse bis hin zu Turnierbildschirmen.