DarkMode mit CSS

Browserunterstützung

Die Information, ob der Nutzer ein helles oder dunkles Theme bevorzugt, wird dem Browser vom Betriebssystem übermittelt. Alle aktuellen, weit verbreiteten Betriebssysteme von Apple, Google und Microsoft sowie die großen Linux-GUIs unterstützen dies. Alternativ kann man im Browser einen Modus fest wählen (WebDevTools), was zum selben Ergebnis führt.

@media

@media (prefers-color-scheme: dark) {...}
Mithilfe des Selectors „prefers-color-scheme” kann man für einen Block festlegen, dass seine Definitionen nur im Dark Mode berücksichtigt werden. Damit können die Definitionen von Logos o. Ä. überschrieben werden. Für Farben gibt es folgende bessere Alternative:

color-scheme

:root { color-scheme: light dark; }
So kann man definieren, dass im Geltungsbereich der CSS-Datei eine Hell/Dunkel-Umschaltung geplant ist. Dann kann man zur Farbdefinitionen die folgende Funktion nehmen:

light-dark( )

color: light-dark( black, white );
Die einfachste Umschaltung: Der erste Parameter wird automatisch bei hellem, der zweite beim dunklen Theme gewählt.

Tipps

An Stelle der Farben kann natürlich jeweils eine Farbdefinition stehen:
hsl( 188, 50%, 60%).
Statt Zahlenwerten kann eine Variable verwendet werden:
hsl(var(--mein-hue), 50%, 50%).
Diese Varialble wird sinnvollerweise festgelegt in :root:
:root { --mein-hue: 188; }

Zusammen z.B.:

:root {
  color-scheme: light dark;
  --mein-hue: 180;
}
body {
  font-weight: 350;
  color: 
    light-dark( hsl(var(--mein-hue),50%, 35%), 
                hsl(var(--mein-hue),100%, 70%) );
  background-color:  
    light-dark( #E8F0E8,
                #283828);
}
@media (prefers-color-scheme: dark) {
  body {  font-weight: 400; }
}

Aufgabe: Helles und dunkles Theme festlegen

Was muss dazu angepasst werden?

Textfarben

• Hintergrundfarben
• Schriftfarben

Abbildungen, Logos

Manche Abbildungen eignen sich für beide Themes, von anderen muss man zwei Varianten erstellen. Zwischen diesen schaltet man mit obigem @media-Selektor um.

Beispiel für ein Icon

Ich verwende mehrfach ein Symbol für PDF-Dateien.

Definition

In einer CSS-Datei oder einem <style>-Tag steht eine Klassendefinition mit data-URL.
Die Base64-Kodierung machen Onlinetools (wie https://base64.guru) wenn man die Datei hochlädt.
Kleinere Dateien erhält man online mit z.B. https://tinypng.com.

img.pdficon {
  content: url('data:imagepng;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAoBAMAAAB6JXVjAAAALVBMVEUAAAD9+/zsHSQAAAAVAgL1tLbwaWvxhoj5ysyHh4fNzc3uKC7uUFTYFyCkDxbzJ7FCAAAAAXRSTlMAQObYZgAAAQBJREFUKM+l0TFuwjAUxnGrN3gDwWWib0AdOlgyNygXSKV0rweydKpUPJSFoVNP0LFHgJWpDHAKrsAZ+Iwe8AIWA/wHK/rJ8ktiY4w/5owEVSn9I+neu6z6vLqs+ry6jKK8OlE66CDlZe812vlN7fTuGarrd6F8poytGe0a5s1n1WjDDD3rktZxtOAelvQYR6ITIruYYglcYtrsoPQDpaKhrZqKKUVAaWPkvfKk/UDhn0LZYiT6RAX0kV5KW72yOleUqK007PRDq/3+YuhbOnc+P05jaEV2JtOUpvfNqA1a6zGWXhzio1bjy/9svRzq3tdQuWOVh92kHdH+oJHoSdAtoHCKFrNsOy4AAAAASUVORK5CYII=');
  height: 20px;
}
@media (prefers-color-scheme: dark) {
  img.pdficon {
    content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAoCAMAAAC/1ZhiAAAAM1BMVEUAAAD8+/vsHCQAAAD1tLbwaGvyiIr4ysuFhYXNzc3tKC7tVVjxfoDYGSCkERbuPkKurq7k69/eAAAAAXRSTlMAQObYZgAAANxJREFUOMvF08uuwjAMRVF8ru1AQnv5/6+lPlTlEVISJuxBZSVLlQftIZJGhzrptKSnv6ojbT+VASoDVAaoDFAZoNJL2S/o5bh1pyDdSQSr7KGg7KOgxDy77jXPCIvuxqn5kv1zXCeOzJ5oEpYK8jrFvcqtXNEQOSizNlXzAEHdCYImX8Ir5dMRHoVPjdOoorwnvR3wrapqeL/rM2VeU6I79SZNST1jpbbtmpfqXSNSVe5CCtakzNBJk6FB7Xwu2EazzLHw9Nsva5qK7VSmiTT6/MOQ/YyeHumHhukVI3QP3yBKzkkAAAAASUVORK5CY\II=');
  }
}

Im HTML-Quelltext wird es so verwendet:

<img class="pdficon">

Schlussbemerkung

Zum Testen reicht mir das Umschalten über die Web-Entwickler-Tools. Ansonsten schaltet das Theme zuverlässig mit der Betriebssystemeinstellung um, auch bei einem alten iPad.

Manche Webentwickler bieten eine Umschaltung per Button und JavaScript an. Das halte ich nicht für nötig, da das Betriebssystem ja so eingestellt wird, wie die Webseite gesehen werden soll. Daher: Nicht bei mir.

Christian Bienmüller