Moderne Webseiten können sich automatisch an die vom Betriebssystem oder Browser eingestellte Farbpalette anpassen – hell oder dunkel. Dieses Verhalten steuern Sie mit dem CSS‑Media‑Feature prefers-color-scheme. Damit Sie sicherstellen können, dass Ihr Layout in beiden Modi korrekt funktioniert, zeigen wir Ihnen, wie Sie das Feature gezielt im Chromium‑Browser (Google Chrome, Microsoft Edge, Brave usw.) testen können.
Schritt‑für‑Schritt‑Anleitung
1. Öffnen Sie die Entwicklerwerkzeuge
- Laden Sie Ihre Seite im Chromium‑Browser.
- Drücken Sie F12 oder Strg + Shift + I (Mac: ⌥ + ⌘ + I) – damit öffnen sich die DevTools.
2. Wechseln Sie zum Reiter „Rendering“
- Klicken Sie in den DevTools auf das Symbol mit den drei Punkten (⋮) rechts oben.
- Wählen Sie „More tools“ → „Rendering“. Falls der Reiter nicht sofort sichtbar ist, können Sie über das Zahnrad‑Icon → „Experiments“ → „Enable rendering pane“ aktivieren.
3. Simulieren Sie das gewünschte Farbschema
Im Rendering‑Panel finden Sie die Option „Emulate CSS media feature prefers‑color‑scheme“.
| Einstellung | Wirkung |
|---|---|
| Light | Der Browser gibt an, dass das System den Light‑Modus verwendet. |
| Dark | Der Browser gibt an, dass das System den Dark‑Modus verwendet. |
| No preference | Keine Vorgabe – das Ergebnis entspricht dem Standardverhalten Ihres Stylesheets. |
Wählen Sie „Dark“, um zu prüfen, ob Ihre dunklen Farben korrekt geladen werden, und anschließend „Light“, um den hellen Modus zu testen.
4. Beobachten Sie die Änderungen live
Sobald Sie die Simulation aktiviert haben, wird das Dokument sofort neu gerendert. Prüfen Sie:
- Hintergrund‑ und Textfarben
- Bild‑Assets, die ggf. unterschiedliche Varianten für Hell/Dunkel besitzen
- UI‑Komponenten (Buttons, Formulare, Modals) Falls etwas nicht wie erwartet aussieht, passen Sie Ihr CSS an und wiederholen Sie den Test – alles in Echtzeit, ohne die Seite neu laden zu müssen.
5. Optional: Testen Sie weitere Media‑Features
Im selben Rendering‑Panel können Sie weitere Media‑Features simulieren, z. B.:
prefers-reduced-motion– für Nutzer, die Animationen reduzieren möchtenprefers-contrast– für erhöhte Kontrasteinstellungen
Damit erhalten Sie einen umfassenden Überblick darüber, wie Ihre Seite unter verschiedenen Barrierefreiheits‑Einstellungen reagiert.
6. Persistente Tests mit dem Device Toolbar (optional)
- Aktivieren Sie das Device‑Toolbar‑Symbol (📱) in den DevTools.
- Unter „Responsive“ können Sie neben der Auflösung auch das Farbschema auswählen („Dark mode“, „Light mode“).
Diese Methode ist besonders praktisch, wenn Sie gleichzeitig responsive Layouts und Farbmodi prüfen wollen.
Fazit
Mit den integrierten Simulations‑Tools des Chromium‑Entwicklermoduls lässt sich das CSS‑Media‑Feature prefers-color-scheme schnell und zuverlässig testen. Sie benötigen dafür keine zusätzlichen Plugins – nur ein paar Klicks in den DevTools. So stellen Sie sicher, dass Ihre Webseite sowohl im hellen als auch im dunklen Modus optimal dargestellt wird und allen Nutzern ein konsistentes, barrierefreies Erlebnis bietet.
Viel Erfolg beim Testen und Optimieren Ihrer Seite!