EMZETT.Gute Seiten sind für alle nutzbar: ausreichender Farbkontrast, sichtbarer Fokus (:focus-visible), alt-Texte, Bedienbarkeit per Tastatur, sinnvolle Überschriften. Mit CSS-Variablen (--farbe: #3b82f6;, benutzt via var(--farbe)) hältst du Designwerte an einer Stelle. @media (prefers-color-scheme: dark) erkennt den Dunkelmodus des Geräts.
Übergänge (transition) machen Interaktionen sanft; beachte prefers-reduced-motion für Menschen, die Animationen meiden.
:root {
--bg: #ffffff;
--text: #1a1a1a;
--akzent: #2563eb;
}
@media (prefers-color-scheme: dark) {
:root { --bg: #111; --text: #eee; }
}
body { background: var(--bg); color: var(--text); }
button { background: var(--akzent); transition: transform .15s; }
button:hover { transform: translateY(-2px); }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
}Merke
CSS-Variablen:
--nameundvar(--name)prefers-color-schemefür den DunkelmodusFokus sichtbar halten und Kontrast beachten
Aufgabe
Baue ein hell/dunkel-fähiges Farbschema mit CSS-Variablen.