0Pricing
CSS Academy · Lektion

prefers-color-scheme-Media-Query

Erkennen Sie anhand der prefers-color-scheme-Media-Query, ob das System der Nutzerin oder des Nutzers den hellen oder dunklen Modus bevorzugt.

prefers-color-scheme-Media-Query ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Warum ein automatischer Dark Mode?

Viele Benutzer aktivieren den Dark Mode auf Betriebssystemebene, um ihre Augen zu schonen, Akkulaufzeit zu sparen (bei OLED-Bildschirmen) oder die Barrierefreiheit zu verbessern. Die Media Query prefers-color-scheme erkennt diese Präferenz und ermöglicht es Ihrer Website, sich automatisch anzupassen.

Abfragewerte

Zwei Werte:

  • light – der Benutzer bevorzugt ein helles Farbschema (oder hat keine Präferenz)
  • dark – der Benutzer bevorzugt den Dark Mode
<p>This page respects your OS dark mode setting.</p>

Dark Mode mit Mobile-First

Wenn die meisten Ihrer Nutzer OLED-Mobilgeräte verwenden, sollten Sie den Dark Mode als Basisthema verwenden:

<p>Dark by default; switches to light in light mode.</p>

Ansatz mit CSS-Variablen

Die sauberste Umsetzung besteht darin, für jedes Farbschema eine eigene Token-Menge zu definieren:

<div class="card">Themed card using CSS variables</div>

Bilder im Dark Mode

Reduzieren Sie im Dark Mode die Helligkeit von Bildern, um blendende Bilder zu vermeiden:

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120'><rect width='200' height='120' fill='%23ff6347'/></svg>" alt="demo" />

Erkennung in JavaScript

Prüfen Sie die Dark-Mode-Einstellung in JavaScript, um dynamisches Verhalten zu ermöglichen:

<p id="theme-status">Checking...</p>
<script>
  const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  document.getElementById('theme-status').textContent = isDark ? 'System is in DARK mode' : 'System is in LIGHT mode';
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    document.getElementById('theme-status').textContent = e.matches ? 'System is in DARK mode' : 'System is in LIGHT mode';
  });
</script>

Testen in DevTools

Wählen Sie in den Chrome DevTools den Tab „Rendering“ → „Emulate CSS prefers-color-scheme“. Wechseln Sie zwischen Hell- und Dunkelmodus, ohne die Betriebssystemeinstellungen zu ändern. In Firefox: DevTools → Tab „Inspector“ → Menü des Augensymbols.

Farbprinzipien für den Dark Mode

Ein effektiver Dark Mode:

  • Verwendet dunkles Grau (nicht reines Schwarz) für Hintergründe – das reduziert die Belastung der Augen
  • Reduziert Schatten für Erhöhungen – verwenden Sie hellere Hintergrundtöne für höher liegende Flächen
  • Passt Rahmenfarben an und macht sie für bessere Sichtbarkeit heller
  • Prüft die Kontrastverhältnisse von Text – möglicherweise sind andere Verhältnisse erforderlich

Anti-Pattern: Farben invertieren

Invertieren Sie für den Dark Mode niemals einfach alle Farben mit filter: invert(1). Bilder und Symbole erhalten dadurch bizarre Farben. Verwenden Sie stattdessen geeignete Dark-Mode-Tokens mit passenden Farben für jedes Element.

Performance: Aufblitzen vermeiden

Wenn Sie das Theme per JavaScript wechseln, verhindern Sie ein kurzes Aufblitzen eines ungestylten Themes (FOUT), indem Sie die Theme-Klasse synchron auf <html> anwenden – in einem <script>-Tag im <head>, bevor die Seite gerendert wird.

Meta-Theme-Farbe

Aktualisieren Sie die Farbe der Browseroberfläche (mobile Adressleiste, Task-Wechsler), damit sie zum dunklen Theme passt:

<pre class="code-sample">&lt;meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff"&gt;
&lt;meta name="theme-color" media="(prefers-color-scheme: dark)"  content="#1a1a2e"&gt;</pre>

Schnelltest

Welchen Wert der Media Query sollten Sie verwenden, um Dark-Mode-Stile anzuwenden, wenn das Betriebssystem auf den Dark Mode eingestellt ist?

Zusammenfassung

prefers-color-scheme: dark erkennt die Dark-Mode-Einstellung des Betriebssystems. Implementieren Sie einen automatischen Dark Mode mit CSS-Variablen, die ihre Token-Werte innerhalb der Media Query austauschen. Reduzieren Sie im Dark Mode die Helligkeit von Bildern. Testen Sie die Umsetzung in den DevTools. Aktualisieren Sie das Meta-Tag für die Browser-theme-color, um eine vollständige mobile Benutzererfahrung zu ermöglichen.

Häufig gestellte Fragen

Ist die Lektion „prefers-color-scheme-Media-Query“ kostenlos?

Ja — der vollständige Text von „prefers-color-scheme-Media-Query“ 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-Media-Query“?

Erkennen Sie anhand der prefers-color-scheme-Media-Query, ob das System der Nutzerin oder des Nutzers den hellen oder dunklen Modus bevorzugt. 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 1 von 4.

Wie lange dauert die Lektion „prefers-color-scheme-Media-Query“?

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

  1. prefers-color-scheme-Media-Query
  2. CSS-Variablen für Themes
  3. color-scheme-Eigenschaft
  4. Automatischer und manueller Dark-Mode-Umschalter
← Zurück zu CSS Academy