Damals *(tr)* waren media queries **der** Weg, um responsive Webseiten zu bauen. Eigentlich ganz einfach: ~~~css body { color: navy; } @media screen and (prefers-color-scheme: dark) { body { background: navy; color: snow; } } ~~~ Mit `prefers-color-scheme` kann [abgefragt werden, ob in den System- oder Browsereinstellungen eine Auswahl getroffen wurde](https://wiki.selfhtml.org/wiki/Dark_Mode#Abfrage_der_Systemeinstellungen_mit_CSS). Falls dies zutrifft, werden Hintergrund- und Textfarbe entsprechend geändert. Idealerweise wurden im `:root`-Selektor Farbangaben – wenn möglich sogar eine ganze Farbpalette definiert: ~~~css :root { --color-background: white; --color-accent: red; --color-text: navy; --color-link: steelblue; } @media screen and (prefers-color-scheme: dark) { :root { --color-background: navy; --color-accent: pink; --color-text: white; --color-link: skyblue; } } ~~~ Diese Farbpalette wurde über `custom properties` notiert, die dann im weiteren Verlauf des CSS aufgerufen wurden. Schwierigkeiten traten auf, wenn man es vergaß, zu jeder Festlegung eines Hintergrunds auch die jeweilige Textfarbe so anzupassen, dass der Kontrast ausreichend groß ist. # CSS-Funktionen, die jeder braucht! ## [**light-dark()**](https://wiki.selfhtml.org/wiki/Dark_Mode#Farbwechsel_mit_light-dark.28.29 ) Einfacher geht das mit einer gar nicht mehr so neuen CSS-Funktion, die es ermöglicht, zwei Farben für ein HTML-Element festzulegen: ~~~css :root { color-scheme: light dark; } body { background: light-dark(white, navy); color: light-dark(navy, white); } a { color: light-dark(blue, skyblue); } ~~~ Mit der `color-scheme`-Eigenschaft werden die beiden Farbschemata „freigeschaltet“. Die Farbangaben sind jetzt übersichtlich nebeneinander platziert – die Gefahr eine Textfarbe zu vergessen sinkt. Keine Angst, dies wird von allen modernen Browsern unterstützt! ## [**contrast-color()**](https://wiki.selfhtml.org/wiki/Dark_Mode#kontrastreicher_Text_mit_contrast-color.28.29) Noch einfacher wird es mit einer weiteren CSS-Funktion, die den Browsern die kontrastreichste Farbe selbst ermitteln lässt: ~~~css body { background: var(--background-color); color: contrast-color(var(--background-color)); } h1 { --header-color: var(--accent-color-1); background: var(--header-color); color: contrast-color(var(--header-color)); } @media (prefers-color-scheme: dark) { body { --background-color: var(--base-color-3); } h1 { --header-color: var(--accent-color-3); } } ~~~ Die Farbangaben für den Hintergrund werden in `custom properties` notiert. Diese `custom property` wird sowohl als Farbangabe sowohl für den Hintergund, als auch als Grundlage für die Textfarbe verwendet. Die Textfarbe wird mit [contrast-color()](https://wiki.selfhtml.org/wiki/CSS/Funktionen/contrast-color()) vom Browser selbst ermittelt. Auch wenn diese Funktion noch relativ neu ist, wird sie von den aktuellen Versionen der Browser bereits unterstützt ([caniuse](https://caniuse.com/mdn-css_types_color_contrast-color). # [**Siehe auch**](https://wiki.selfhtml.org/wiki/Dark_Mode#Siehe_auch) Das ursprüngliche Tutorial las sich im Nachhinein relativ umständlich: Erst wurde erklärt, was ***Dark Mode*** den überhaupt sei, dann wurde gezeigt, wie man das im OS einstellen konnte und dann wurde an einem Beispiel gezeigt, wie das aussehen könnte. Durch den Toggle, der es ermöglichte, auch entgegen der Systemeinstellungen umzuschalten, kam sogar (nicht nur) ein bisschen JavaScript ins Spiel. Mittlerweile ist dieses **fertige Beispiel** nur eins von [mehreren, die am Ende des Artikels verlinkt sind](https://wiki.selfhtml.org/wiki/Dark_Mode#Siehe_auch). **Dark Mode** gehört heute zu jeder modernen Webseite! Der überarbeitete Artikel hilft Ineressierten hoffentlich ihre Ideen umsetzen zu können.

Damals *(tr)* waren media queries **der** Weg, um responsive Webseiten zu bauen. Eigentlich ganz einfach: ~~~css body { color: navy; } @media screen and (prefers-color-scheme: dark) { body { background: navy; color: snow; } } ~~~ Mit `prefers-color-scheme` kann [abgefragt werden, ob in den System- oder Browsereinstellungen eine Auswahl getroffen wurde](https://wiki.selfhtml.org/wiki/Dark_Mode#Abfrage_der_Systemeinstellungen_mit_CSS). Falls dies zutrifft, werden Hintergrund- und Textfarbe entsprechend geändert. Idealerweise wurden im `:root`-Selektor Farbangaben – wenn möglich sogar eine ganze Farbpalette definiert: ~~~css :root { --color-background: white; --color-accent: red; --color-text: navy; --color-link: steelblue; } @media screen and (prefers-color-scheme: dark) { :root { --color-background: navy; --color-accent: pink; --color-text: white; --color-link: skyblue; } } ~~~ Diese Farbpalette wurde über `custom properties` notiert, die dann im weiteren Verlauf des CSS aufgerufen wurden. Schwierigkeiten traten auf, wenn man es vergaß, zu jeder Festlegung eines Hintergrunds auch die jeweilige Textfarbe so anzupassen, dass der Kontrast ausreichend groß ist. # CSS-Funktionen, die jeder braucht! ## [light-dark()](https://wiki.selfhtml.org/wiki/Dark_Mode#Farbwechsel_mit_light-dark.28.29 ) Einfacher geht das mit einer gar nicht mehr so neuen CSS-Funktion, die es ermöglicht, zwei Farben für ein HTML-Element festzulegen: ~~~css :root { color-scheme: light dark; } body { background: light-dark(white, navy); color: light-dark(navy, white); } a { color: light-dark(blue, skyblue); } ~~~ Mit der `color-scheme`-Eigenschaft werden die beiden Farbschemata „freigeschaltet“. Die Farbangaben sind jetzt übersichtlich nebeneinander platziert – die Gefahr eine Textfarbe zu vergessen sinkt. Keine Angst, dies wird von allen modernen Browsern unterstützt! ## [contrast-color()](https://wiki.selfhtml.org/wiki/Dark_Mode#kontrastreicher_Text_mit_contrast-color.28.29) Noch einfacher wird es mit einer weiteren CSS-Funktion, die den Browsern die kontrastreichste Farbe selbst ermitteln lässt: ~~~css body { background: var(--background-color); color: contrast-color(var(--background-color)); } h1 { --header-color: var(--accent-color-1); background: var(--header-color); color: contrast-color(var(--header-color)); } @media (prefers-color-scheme: dark) { body { --background-color: var(--base-color-3); } h1 { --header-color: var(--accent-color-3); } } ~~~ Die Farbangaben für den Hintergrund werden in `custom properties` notiert. Diese `custom property` wird sowohl als Farbangabe sowohl für den Hintergund, als auch als Grundlage für die Textfarbe verwendet. Die Textfarbe wird mit [contrast-color()](https://wiki.selfhtml.org/wiki/CSS/Funktionen/contrast-color()) vom Browser selbst ermittelt. Auch wenn diese Funktion noch relativ neu ist, wird sie von den aktuellen Versionen der Browser bereits unterstützt ([caniuse](https://caniuse.com/mdn-css_types_color_contrast-color). # [Siehe auch](https://wiki.selfhtml.org/wiki/Dark_Mode#Siehe_auch) Das ursprüngliche Tutorial las sich im Nachhinein relativ umständlich: Erst wurde erklärt, was ***Dark Mode*** den überhaupt sei, dann wurde gezeigt, wie man das im OS einstellen konnte und dann wurde an einem Beispiel gezeigt, wie das aussehen könnte. Durch den Toggle, der es ermöglichte, auch entgegen der Systemeinstellungen umzuschalten, kam sogar (nicht nur) ein bisschen JavaScript ins Spiel. Mittlerweile ist dieses **fertige Beispiel** nur eins von mehreren, die am Ende des Artikels verlinkt sind. **Dark Mode** gehört heute zu jeder modernen Webseite!

Damals *(tr)* waren media queries **der** Weg, um responsive Webseiten zu bauen. Eigentlich ganz einfach: ~~~css body { color: navy; } @media screen and (prefers-color-scheme: dark) { body { background: navy; color: snow; } } ~~~ Mit `prefers-color-scheme` kann [abgefragt werden, ob in den System- oder Browsereinstellungen eine Auswahl getroffen wurde](https://wiki.selfhtml.org/wiki/Dark_Mode#Abfrage_der_Systemeinstellungen_mit_CSS). Falls dies zutrifft, werden Hintergrund- und Textfarbe entsprechend geändert. Idealerweise wurden im `:root`-Selektor Farbangaben – wenn möglich sogar eine ganze Farbpalette definiert: ~~~css :root { --color-background: white; --color-accent: red; --color-text: navy; --color-link: steelblue; } @media screen and (prefers-color-scheme: dark) { :root { --color-background: navy; --color-accent: pink; --color-text: white; --color-link: skyblue; } } ~~~ Diese Farbpalette wurde über `custom properties` notiert, die dann im weiteren Verlauf des CSS aufgerufen wurden. Schwierigkeiten traten auf, wenn man es vergaß, zu jeder Festlegung eines Hintergrunds auch die jeweilige Textfarbe so anzupassen, dass der Kontrast ausreichend groß ist. # CSS-Funktionen, die jeder braucht! ## [light-dark()](https://wiki.selfhtml.org/wiki/Dark_Mode#Farbwechsel_mit_light-dark.28.29 ) Einfacher geht das mit einer gar nicht mehr so neuen CSS-Funktion, die es ermöglicht, zwei Farben für ein HTML-Element festzulegen: ~~~css :root { color-scheme: light dark; } body { background: light-dark(white, navy); color: light-dark(navy, white); } a { color: light-dark(blue, skyblue); } ~~~ Mit der `color-scheme`-Eigenschaft werden die beiden Farbschemata „freigeschaltet“. Die Farbangaben sind jetzt übersichtlich nebeneinander platziert – die Gefahr eine Textfarbe zu vergessen sinkt. Keine Angst, dies wird von allen modernen Browsern unterstützt! ## [contrast-color()](https://wiki.selfhtml.org/wiki/Dark_Mode#kontrastreicher_Text_mit_contrast-color.28.29) Noch einfacher wird es mit einer weiteren CSS-Funktion, die den Browsern die kontrastreichste Farbe selbst ermitteln lässt: ~~~css body { background: var(--background-color); color: contrast-color(var(--background-color)); } h1 { --header-color: var(--accent-color-1); background: var(--header-color); color: contrast-color(var(--header-color)); } @media (prefers-color-scheme: dark) { body { --background-color: var(--base-color-3); } h1 { --header-color: var(--accent-color-3); } } ~~~ Die Farbangaben für den Hintergrund werden in `custom properties` notiert. Diese `custom property` wird sowohl als Farbangabe sowohl für den Hintergund, als auch als Grundlage für die Textfarbe verwendet. Die Textfarbe wird mit [contrast-color()](https://wiki.selfhtml.org/wiki/CSS/Funktionen/contrast-color()) vom Browser selbst ermittelt. Auch wenn diese Funktion noch relativ neu ist, wird sie von den aktuellen Versionen der Browser bereits unterstützt ([caniuse](https://caniuse.com/mdn-css_types_color_contrast-color). # [Siehe auch](https://wiki.selfhtml.org/wiki/Dark_Mode#Siehe_auch) Das ursprüngliche Tutorial las sich im Nachhinein relativ umständlich: Erst wurde erklärt, was ***Dark Mode*** den überhaupt sei, dann wurde gezeigt, wie man das im OS einstellen konnte und dann wurde an einem Beispiel gezeigt, wie das aussehen könnte. Durch den Toggle, der es ermöglichte, auch entgegen der Systemeinstellungen umzuschalten, kam sogar (nicht nur) ein bisschen JavaScript ins Spiel. Mittlerweile ist dieses **fertige Beispiel** nur eins von mehreren, die am Ende des Artikels verlinkt sind. **Dark Mode** gehört heute zu jeder modernen Webseite!

Damals *(tr)* waren media queries **der** Weg, um responsive Webseiten zu bauen. Eigentlich ganz einfach: ~~~css body { color: navy; } @media screen and (prefers-color-scheme: dark) { body { background: navy; color: snow; } } ~~~ Mit `prefers-color-scheme` kann [abgefragt werden, ob in den System- oder Browsereinstellungen eine Auswahl getroffen wurde](https://wiki.selfhtml.org/wiki/Dark_Mode#Abfrage_der_Systemeinstellungen_mit_CSS). Falls dies zutrifft, werden Hintergrund- und Textfarbe entsprechend geändert. Idealerweise wurden im `:root`-Selektor Farbangaben – wenn möglich sogar eine ganze Farbpalette definiert: ~~~css :root { --color-background: white; --color-accent: red; --color-text: navy; --color-link: steelblue; } @media screen and (prefers-color-scheme: dark) { :root { --color-background: navy; --color-accent: pink; --color-text: white; --color-link: skyblue; } } ~~~ Diese Farbpalette wurde über `custom properties` notiert, die dann im weiteren Verlauf des CSS aufgerufen wurden. Schwierigkeiten traten auf, wenn man es vergaß, zu jeder Festelgung eines Hintergrunds auch die jeweilige Textfarbe so anzupassen, dass der Kontrast ausreichend groß ist. # CSS-Funktionen, die jeder braucht! ## [light-dark()](https://wiki.selfhtml.org/wiki/Dark_Mode#Farbwechsel_mit_light-dark.28.29 ) Einfacher geht das mit einer gar nicht mehr so neuen CSS-Funktion, die es ermöglicht, zwei Farben für ein HTML-Element festzulegen: ~~~css :root { color-scheme: light dark; } body { background: light-dark(white, navy); color: light-dark(navy, white); } a { color: light-dark(blue, skyblue); } ~~~ Mit der `color-scheme`-Eigenschaft werden die beiden Farbschemata „freigeschaltet“. Die Farbangaben sind jetzt übersichtlich nebeneinander platziert – die Gefahr eine Textfarbe zu vergessen sinkt. Keine Angst, dies wird von allen modernen Browsern unterstützt! ## [contrast-color()](https://wiki.selfhtml.org/wiki/Dark_Mode#kontrastreicher_Text_mit_contrast-color.28.29) Noch einfacher wird es mit einer weiteren CSS-Funktion, die den Browsern die kontrastreichste Farbe selbst ermitteln lässt: ~~~css body { background: var(--background-color); color: contrast-color(var(--background-color)); } h1 { --header-color: var(--accent-color-1); background: var(--header-color); color: contrast-color(var(--header-color)); } @media (prefers-color-scheme: dark) { body { --background-color: var(--base-color-3); } h1 { --header-color: var(--accent-color-3); } } ~~~ Die Farbangaben für den Hintergrund werden in `custom properties` notiert. Diese `custom property` wird sowohl als Farbangabe sowohl für den Hintergund, als auch als Grundlage für die Textfarbe verwendet. Die Textfarbe wird mit [contrast-color()](https://wiki.selfhtml.org/wiki/CSS/Funktionen/contrast-color()) vom Browser selbst ermittelt. Auch wenn diese Funktion noch relativ neu ist, wird von den aktellen Versionen der Browser unterstützt ([caniuse](https://caniuse.com/mdn-css_types_color_contrast-color).

Servus! Herzliche Grüße Matthias Scharwies -- [bildung.social/@selfhtml](https://bildung.social/@selfhtml)