Ratgeber: Dunkle Seiten brauchen auch passende native Formularfelder

Die Seite ist dunkel, das Auswahlfeld bleibt hell

Ein Kontaktformular wirkt im dunklen Seitendesign fast fertig. Erst beim Öffnen eines Auswahlfeldes fällt auf, dass die Browseroberfläche anders aussieht als die selbst gestalteten Karten. MDN beschreibt color-scheme als CSS-Angabe darüber, in welchen Farbschemata ein Element dargestellt werden kann. Browser können damit unter anderem Formularfelder, Scrollleisten und Standardflächen anpassen. Die eigenen Inhaltsfarben brauchen weiterhin eine passende Gestaltung. Es handelt sich um einen Ratgeber zu vorhandener CSS-Technik und nicht um eine neue Browserankündigung.

Eine kleine Prüfseite zusammenstellen

Baue für dein Übungsprojekt eine Seite mit Textfeld, Auswahl, mehrzeiligem Feld und Schaltfläche. Ergänze eine lange Inhaltskarte, damit auch Scrollleisten sichtbar werden. Lege bewusst fest, ob dein Entwurf nur eine helle Ansicht oder beide Ansichten unterstützt. Die Angabe light dark ist kein Ersatz für eine lesbare dunkle Palette. Wenn die eigene Schrift dunkel bleibt, während eine Fläche dunkel wird, ist der Entwurf noch nicht fertig.

Notiere die vorgesehenen Farben für Flächen, Text, Rahmen und Hinweise. Prüfe die Kombinationen gemeinsam, statt jede Farbe einzeln gutzuheißen. Ein schwacher Rahmen kann beispielsweise im hellen Modus funktionieren und im dunklen Hintergrund verschwinden.

Zustände machen den Unterschied

Öffne die Auswahl und bewege den Fokus durch alle Felder. Gib einen ungültigen Testwert ein, um eine Fehlermeldung sichtbar zu machen. Vergleiche außerdem ein deaktiviertes Feld mit einem normalen Feld. Die Zustände sollen unterscheidbar bleiben, ohne dass die Bedienung ausschließlich von einer bestimmten Farbe abhängt. Diese Anforderungen sind Teil unseres redaktionellen Testplans, keine automatisch erfüllte Eigenschaft des CSS-Schlüsselworts.

Das tatsächliche Zielgerät einbeziehen

Teste denselben Entwurf mit heller und dunkler Systemeinstellung in den Browsern, die dein Projekt unterstützen soll. Speichere eine kleine Liste der geprüften Kombinationen. Wenn ein eingebautes Bedienelement anders dargestellt wird, entscheide zuerst, ob es trotzdem verständlich und gut bedienbar ist. Einheitliche Pixel sind weniger wichtig als erkennbare Funktionen. Prüfe zuletzt eine Fehlermeldung auf einem schmalen Bildschirm mit vergrößerter Schrift. Dein Bauauftrag sollte die unterstützten Ansichten und die relevanten Zustände ausdrücklich nennen. Ein pauschaler Wunsch nach „Dark Mode“ lässt diese entscheidenden Details offen.