Prefers-Color-Scheme und Prefers-Reduced-Motion
Berücksichtigen Sie die Systemeinstellungen der Nutzenden für den Dark Mode und reduzierte Animationen.
Prefers-Color-Scheme und Prefers-Reduced-Motion ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Media Features für Benutzereinstellungen
CSS kann Systemeinstellungen des Benutzers abfragen, die über die Bildschirmgröße hinausgehen. So lassen sich ein automatischer Dark Mode und animationsbezogene Barrierefreiheit ohne Interaktion des Benutzers auf Ihrer Website ermöglichen.
prefers-color-scheme
Erkennt, ob der Benutzer sein Betriebssystem auf den hellen oder dunklen Modus eingestellt hat:
<p>This page follows your OS color-scheme preference.</p>
Automatischen Dark Mode implementieren
Die sauberste Implementierung verwendet CSS-Variablen, deren Werte abhängig von der Einstellung ausgetauscht werden:
<p>Auto dark mode via CSS variables.</p>
prefers-reduced-motion
Bei manchen Benutzern lösen Animationen Übelkeit oder Unwohlsein aus. Das Media Feature prefers-reduced-motion: reduce erkennt diese Einstellung zur Barrierefreiheit.
<div class="box spun"></div>
Bewegungseinstellungen berücksichtigen
Deaktivieren Sie nicht sämtliche Animationen, sondern bieten Sie alternative, subtile Animationen an:
<div class="card">Card with motion-aware transition</div>
prefers-contrast
Erkennt, ob der Benutzer einen höheren Kontrast (für die Barrierefreiheit) oder einen niedrigeren Kontrast bevorzugt. Passen Sie die Farbauswahl entsprechend an:
<p>Contrast-aware text</p>
prefers-reduced-transparency
Manche Benutzer mit Sehbeeinträchtigungen bevorzugen weniger Transparenz. Reduzieren Sie backdrop-filter- und opacity-basierte Effekte:
<div class="glass-card">Glass card</div>
Über JavaScript auf Einstellungen zugreifen
Fragen Sie diese Einstellungen aus JavaScript mit window.matchMedia() ab:
<div class="demo dark-mode" id="demo">Preference-aware box (dark-mode class toggled via JS below)</div>
<script>
const dark = window.matchMedia('(prefers-color-scheme: dark)');
dark.addEventListener('change', e => {
document.getElementById('demo').classList.toggle('dark-mode', e.matches);
});
</script>
Systemeinstellung + manuelle Überschreibung
Berücksichtigen Sie standardmäßig die Systemeinstellung und ermöglichen Sie den Benutzern, sie mit einem Umschalter zu überschreiben. Speichern Sie die Überschreibung in localStorage und wenden Sie eine Klasse auf <html> an:
<div class="theme dark">Manual dark override applied via class</div>
prefers-reduced-data
Erkennt, ob der Benutzer den Datensparmodus aktiviert hat. Liefern Sie kleinere Bilder aus oder überspringen Sie nicht unbedingt erforderliche Ressourcen:
<div class="hero">Hero banner</div>
In DevTools testen
In Chrome DevTools können Sie über die Registerkarte Rendering den Dark Mode, reduzierte Bewegung und andere Media Features für Benutzereinstellungen emulieren, ohne die Betriebssystemeinstellungen zu ändern.
Kurzer Check
Wie lässt sich ein automatischer Dark Mode am besten implementieren, der auch einen manuellen Umschalter unterstützt?
Zusammenfassung
prefers-color-scheme ermöglicht einen automatischen Dark Mode. prefers-reduced-motion sollte Animationen für die Barrierefreiheit deaktivieren oder vereinfachen. Implementieren Sie beides mithilfe von CSS-Variablen, um sauberen und wartbaren Code zu erhalten. Bieten Sie immer eine manuelle Überschreibung an, damit Benutzer ihre Einstellung unabhängig vom Betriebssystem steuern können.
Häufig gestellte Fragen
Ist die Lektion „Prefers-Color-Scheme und Prefers-Reduced-Motion“ kostenlos?
Ja — der vollständige Text von „Prefers-Color-Scheme und Prefers-Reduced-Motion“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Prefers-Color-Scheme und Prefers-Reduced-Motion“?
Berücksichtigen Sie die Systemeinstellungen der Nutzenden für den Dark Mode und reduzierte Animationen. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Prefers-Color-Scheme und Prefers-Reduced-Motion“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Syntax und gängige Breakpoints
- Abfragen von Breite, Höhe und Ausrichtung
- Prefers-Color-Scheme und Prefers-Reduced-Motion
- Mehrere Media Queries kombinieren