Heute möchte ich über etwas sprechen, das viele von euch wahrscheinlich sehr mögen: Dark-Modes! Oder genauer gesagt, wie man das Farbschema auf den dunklen Modus umstellt, diese Präferenz eingestellt ist. Ich verwende den Dark-Mode für meine IDE und für einige Online-Dienste, aber für viele bin ich immer noch auf der hellen Seite.

Erkennung des Dark-Modes und Anpassung der Styles

Die Aktivierung des Dark-Mode kann durch eine Einstellung im Betriebssystem oder Browser vorgenommen werden oder durch das Klicken auf einen Button passieren. Unabhängig davon, wie zum Dark-Mode gewechselt wird, sollte euer CSS-Code die Media-Query wie folgt verwenden:

button {
	padding: 10px 20px;
	font-size: 2rem;
	background-color: #eee;
	border: 3px solid #333;
	border-radius: 10px;
	color: #333;
}
@media (prefers-color-scheme: dark) {
	button {
		background: #333;
		border-color: #333;
		color: #eee;
	}
}

Dieses CSS geht davon aus, dass ihr standardmäßig ein helles Farbschema verwenden. Wenn nun die Präferenz auf dark gesetzt wird, werden alternative Farben für die Buttons verwendet. So würde ein Button in hellen oder dunklen Farben aussehen:

Durch die Verwendung der gleichen Farbe für Hintergrund und Rahmen haben wir die dunkle Version des Buttons „ausgefüllt“. Ihr müsst aber nicht immer alle Farben invertieren/vertauschen. Einige generische Plugins tun dies jedoch. Wie ich im Beitrag „Präferenzen im Browser simulieren“ erklärt habe, könnt ihr diese Dark-Mode-Styles einfach testen, ohne die Einstellungen in eurem Betriebssystem ändern zu müssen. Chrome verfügt noch über eine Option „Automatischer dunkler Modus“, aber diese würde nur versuchen zu „erraten“, welche Farben verwendet werden könnten. Wir hätten dann ein etwas helleres Grau für den Hintergrund und ein helleres Grau für den Rahmen:

Wie ihr sehen könnt, würden sogar unsere definierten Farben für den Dark-Mode eines Buttons nicht mehr verwendet werden. Stattdessen zeigt Chrome jeden Button in diesem „automatischen dunklen Modus“ an. Ich bin mir aber auch nicht sicher, ob viele Leute das wirklich nutzen.

Verwendung des hellen Dark-Modes als Standard

Viele Leute entwerfen eine Website mit einem hellen Modus als Standard und verwenden dann die Medienabfrage wie oben gezeigt, um die Farben für einen dunklen Modus zu ändern. Wenn ihr allerdings eine Seite mit einem Dark-Mode als Standard gestalten möchtet, wäre das eine Menge CSS in dieser Media-Query. Was ihr hier stattdessen tun könnt: ändern die Farben, wenn jemand ausdrücklich einen hellen Modus bevorzugt. So in etwa macht ihr das:

button {
	padding: 10px 20px;
	font-size: 2rem;
	background-color: #333;
	border: 3px solid #333;
	border-radius: 10px;
	color: #eee;
}
@media (prefers-color-scheme: light) {
	button {
		background: #eee;
		border-color: #eee;
		color: #333;
	}
}

Dieser Code-Schnipsel ist im Grunde genommen wieder der Erste, es sind nur (fast) alle Farben vertauscht und wir haben den bedeutenden Unterschied, dass wir jetzt in der Media-Query prefers-color-scheme nach light abfragen. Der Button sieht nun im Standard-Dark-Mode und im hellen Modus wie folgt aus:

Je nach euren eigenen Vorlieben könnt ihr also entscheiden, welches Farbschema ihr als Standard für eure Website verwenden möchtet. Das Hinzufügen des anderen Farbschemas kann allerdings einen großen Unterschied in Bezug auf Lesbarkeit und Barrierefreiheit machen. Vor allem, wenn ihr einen Dark-Mode als Standardeinstellung haben wollte, sollten ihr unbedingt in Erwägung ziehen, auch ein helles Farbschema anzubieten.

Fazit

Das Hinzufügen eines Dark-Mode zu eurem CSS war noch nie so einfach wie mit dieser Media-Query. Wenn ihr die Möglichkeit zur Auswahl der Modus geben wollt, kann ein „Umschalt-Button“ oder eine Profileinstellung sinnvoll sein. Dafür ist eine weitere Eigenschaft sehr nützlich. Aber das wird das Thema unseres letzten Blogbeitrags im Adventskalender 2024 zu CSS sein.