bevorzugt-Farbschema: Hallo Dunkelheit, mein alter Freund

Überbewertet oder notwendig? Hier erfahren Sie alles über den dunklen Modus und wie Sie ihn für Ihre Nutzer unterstützen können.

Einführung

Dunkler Modus vor Dunkler Modus

Mit dem dunklen Modus haben wir einen Kreis geschlossen. In den Anfängen des Personal Computing war der dunkle Modus keine Option, sondern eine Tatsache: Monochromer CRT-Computermonitore funktionierten, indem Elektronenstrahlen auf einen phosphoreszenzfähigen Bildschirm geschossen wurden. Der in frühen CRTs verwendete Phosphor war grün. Da der Text grün und der Rest des Bildschirms schwarz war, wurden diese Modelle oft als Greenscreens bezeichnet.

Die später eingeführten Farb-CRTs konnten durch die Verwendung von rot, grün und blau leuchtenden Phosphoren mehrere Farben anzeigen. Sie erzeugten Weiß, indem sie alle drei Phosphore gleichzeitig aktivierten. Mit der Einführung ausgefeilterer WYSIWYG-Desktop-Publishing-Programme wurde die Idee populär, das virtuelle Dokument einem physischen Blatt Papier ähneln zu lassen.

Hier begann der Designtrend Dunkel auf Weiß, der sich auch auf das frühe dokumentbasierte Web auswirkte. Der erste Browser, WorldWideWeb (CSS wurde noch nicht erfunden), zeigte Webseiten auf diese Weise an. Fun Fact: Der zweite Browser überhaupt, der Line Mode Browser, ein terminalbasierter Browser, war grün auf dunkel. Heutzutage sind Webseiten und Webanwendungen in der Regel mit dunklem Text auf hellem Hintergrund gestaltet. Diese Grundannahme ist auch in den Stylesheets von User-Agents hartcodiert, einschließlich Chrome.

Die Zeit der Kathodenstrahlröhren ist längst vorbei. Der Konsum und die Erstellung von Inhalten haben sich auf Mobilgeräte mit hintergrundbeleuchteten LCD- oder energieeffizienten AMOLED-Displays verlagert. Kleinere und tragbarere Computer, Tablets und Smartphones führten zu neuen Nutzungsmustern. Freizeitaktivitäten wie Surfen im Internet, Programmieren zum Spaß und High-End-Gaming finden häufig nach Feierabend in gedimmten Umgebungen statt. Viele Nutzer nutzen ihre Geräte sogar nachts im Bett. Je mehr Nutzer ihre Geräte im Dunkeln verwenden, desto beliebter wird die Idee, zu den Wurzeln des hell-auf-dunkel-Konzepts zurückzukehren.

Vorteile des dunklen Modus

Dunkler Modus aus ästhetischen Gründen

Wenn Nutzer gefragt werden, warum sie den dunklen Modus mögen oder möchten, ist die häufigste Antwort „Er ist schonender für die Augen“, gefolgt von „Er ist elegant und schön“. In der Entwicklerleitfaden zum dunklen Modus von Apple heißt es ausdrücklich: „Die Entscheidung, ob ein heller oder dunkler Modus aktiviert werden soll, ist für die meisten Nutzer eine ästhetische Entscheidung und hat möglicherweise nichts mit den Umgebungslichtverhältnissen zu tun.“

Dunkler Modus als Bedienungshilfe

Es gibt auch Nutzer, die den dunklen Modus tatsächlich brauchen und ihn als weiteres Bedienungshilfen-Tool verwenden, z. B. sehbehinderte Nutzer. Das früheste Vorkommen eines solchen Bedienungshilfentools, das ich finden konnte, ist die CloseView-Funktion von System 7, die eine Umschaltoption für Schwarz auf Weiß und Weiß auf Schwarz hatte. Obwohl System 7 Farben unterstützte, war die Standardbenutzeroberfläche weiterhin schwarz-weiß.

Diese inversionsbasierten Implementierungen zeigten ihre Schwächen, als die Farbe eingeführt wurde. Eine Nutzerstudie von Szpiro et al. zum Zugriff von Menschen mit eingeschränktem Sehvermögen auf Computer zeigte, dass alle befragten Nutzer invertierte Bilder nicht mochten, viele aber hellen Text auf dunklem Hintergrund bevorzugten. Apple bietet mit der Funktion Smarte Farbumkehr eine Lösung für diese Nutzerpräferenz. Dabei werden die Farben auf dem Display umgekehrt, mit Ausnahme von Bildern, Medien und einigen Apps, die dunkle Farbstile verwenden.

Eine besondere Form der Sehschwäche ist das Computer Vision Syndrome, auch als Digital Eye Strain bezeichnet. Es wird definiert als „die Kombination von Augen- und Sehproblemen, die mit der Verwendung von Computern (einschließlich Desktop-Computern, Laptops und Tablets) und anderen elektronischen Displays (z. B. Smartphones und elektronische Lesegeräte) verbunden sind“. Es wurde vorgeschlagen, dass die Nutzung elektronischer Geräte durch Jugendliche, insbesondere nachts, zu einem erhöhten Risiko für eine kürzere Schlafdauer, eine längere Latenz bis zum Einschlafen und einem erhöhten Schlafmangel führt. Außerdem wird die Einwirkung von blauem Licht weithin als beteiligt an der Regulierung des zirkadianen Rhythmus und des Schlafzyklus angesehen. Unregelmäßige Lichtverhältnisse können laut Forschungen von Rosenfield zu Schlafmangel führen, was sich möglicherweise auf die Stimmung und die Arbeitsleistung auswirkt. Um diese negativen Auswirkungen zu begrenzen, können Sie die Blaulichtstrahlung reduzieren, indem Sie die Farbtemperatur des Displays über Funktionen wie Night Shift unter iOS oder Nachtlicht unter Android anpassen. Außerdem sollten Sie grelles Licht oder unregelmäßiges Licht im Allgemeinen durch dunkle Themen oder dunkle Modi vermeiden.

Energieeinsparung durch den dunklen Modus auf AMOLED-Displays

Außerdem verbraucht der dunkle Modus auf AMOLED-Displays deutlich weniger Energie. Android-Fallstudien, die sich auf beliebte Google-Apps wie YouTube konzentrierten, haben gezeigt, dass die Energieeinsparungen bis zu 60 % betragen können. Im Video unten finden Sie weitere Informationen zu diesen Fallstudien und den Energieeinsparungen pro App.

Dunklen Modus im Betriebssystem aktivieren

Nachdem ich nun erläutert habe, warum der dunkle Modus für viele Nutzer so wichtig ist, sehen wir uns an, wie Sie ihn unterstützen können.

Betriebssysteme, die einen dunklen Modus oder ein dunkles Design unterstützen, haben in der Regel eine Option, mit der er in den Einstellungen aktiviert werden kann. Unter macOS X befindet sich diese Option in den Systemeinstellungen im Bereich Allgemein und heißt Darstellung (Screenshot). Unter Windows 10 befindet sie sich im Bereich Farben und heißt Farbe auswählen (Screenshot). Unter Android Q finden Sie die Option unter Display als Schalter für das Dunkle Design (Screenshot). Unter iOS 13 können Sie die Darstellung im Bereich Display und Helligkeit der Einstellungen ändern (Screenshot).

Die prefers-color-scheme-Medienabfrage

Noch ein letztes bisschen Theorie, bevor ich loslege. Mit Mediaabfragen können Autoren Werte oder Funktionen des User-Agents oder des Anzeigegeräts unabhängig vom gerenderten Dokument testen und abfragen. Sie werden in der CSS-Regel @media verwendet, um Stile bedingt auf ein Dokument anzuwenden, und in verschiedenen anderen Kontexten und Sprachen wie HTML und JavaScript. Media Queries Level 5 führt sogenannte Medienfunktionen für Nutzereinstellungen ein. Das bedeutet, dass Websites die bevorzugte Darstellungsart von Inhalten für den Nutzer erkennen können.

Mit der Medienfunktion prefers-color-scheme wird ermittelt, ob der Nutzer für die Seite ein helles oder dunkles Farbschema angefordert hat. Es funktioniert mit den folgenden Werten:

• light: Gibt an, dass der Nutzer dem System mitgeteilt hat, dass er eine Seite mit hellem Design bevorzugt (dunkler Text auf hellem Hintergrund).
• dark: Gibt an, dass der Nutzer dem System mitgeteilt hat, dass er eine Seite mit dunklem Design bevorzugt (heller Text auf dunklem Hintergrund).

Unterstützung für dunklen Modus

Herausfinden, ob der dunkle Modus vom Browser unterstützt wird

Da der dunkle Modus über eine Mediaabfrage gemeldet wird, können Sie ganz einfach prüfen, ob der aktuelle Browser den dunklen Modus unterstützt, indem Sie prüfen, ob die Mediaabfrage prefers-color-scheme überhaupt übereinstimmt. Beachten Sie, dass ich keinen Wert angeben, sondern nur prüfe, ob die Mediaabfrage allein übereinstimmt.

if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
  console.log('🎉 Dark mode is supported');
}

Zum Zeitpunkt der Erstellung dieses Artikels wird prefers-color-scheme sowohl auf Computern als auch auf Mobilgeräten (sofern verfügbar) von Chrome und Edge ab Version 76, von Firefox ab Version 67 und von Safari ab Version 12.1 auf macOS und ab Version 13 auf iOS unterstützt. Für alle anderen Browser finden Sie Informationen unter Kann ich Supporttabellen verwenden?.

Informationen zu den Einstellungen eines Nutzers zum Zeitpunkt der Anfrage

Mit dem Client-Hinweisheader Sec-CH-Prefers-Color-Scheme können Websites die Farbschema-Einstellungen des Nutzers optional bei der Anfrage abrufen. So können Server das richtige CSS einfügen und ein vorübergehendes Aufblinken des falschen Farbschemas vermeiden.

Dunkler Modus in der Praxis

Sehen wir uns nun an, wie die Unterstützung des dunklen Modus in der Praxis aussieht. Ähnlich wie beim Highlander kann es beim dunklen Modus nur einen geben: dunkel oder hell, aber nie beides! Warum erwähne ich das? Denn diese Tatsache sollte sich auf die Ladestrategie auswirken. Zwinge Nutzer nicht, CSS im kritischen Renderingpfad für einen Modus herunterzuladen, den sie derzeit nicht verwenden. Um die Ladegeschwindigkeit zu optimieren, habe ich das CSS für die Beispiel-App, in der die folgenden Empfehlungen in der Praxis gezeigt werden, in drei Teile aufgeteilt, um nicht kritisches CSS zu verzögern:

• style.css, die allgemeine Regeln enthält, die auf der gesamten Website verwendet werden.
• dark.css, die nur die für den dunklen Modus erforderlichen Regeln enthält.
• light.css, die nur die für den hellen Modus erforderlichen Regeln enthält.

Lademethode

Die beiden letzteren, light.css und dark.css, werden bedingt mit einer <link media>-Abfrage geladen. Anfangs wird prefers-color-scheme nicht von allen Browsern unterstützt (erkennbar am Muster oben). Ich gehe damit dynamisch um, indem ich die Standardlight.css-Datei über ein bedingt eingefügtes <link rel="stylesheet">-Element in einem winzigen Inline-Script lade. „Light“ ist eine beliebige Auswahl, ich hätte auch „dark“ als Standard-Fallback-Option festlegen können. Um zu vermeiden, dass unformatierte Inhalte kurz eingeblendet werden, blende ich den Inhalt der Seite aus, bis light.css geladen wurde.

<script>
  // If `prefers-color-scheme` is not supported, fall back to light mode.
  // In this case, light.css will be downloaded with `highest` priority.
  if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
    document.documentElement.style.display = 'none';
    document.head.insertAdjacentHTML(
      'beforeend',
      '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">',
    );
  }
</script>
<!--
  Conditionally either load the light or the dark stylesheet. The matching file
  will be downloaded with `highest`, the non-matching file with `lowest`
  priority. If the browser doesn't support `prefers-color-scheme`, the media
  query is unknown and the files are downloaded with `lowest` priority (but
  above I already force `highest` priority for my default light experience).
-->
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
<link
  rel="stylesheet"
  href="/light.css"
  media="(prefers-color-scheme: light)"
/>
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css" />

Stylesheet-Architektur

Ich nutze CSS-Variablen so weit wie möglich. So kann meine allgemeine style.css-Datei wirklich allgemein gehalten werden und alle Anpassungen für den hellen oder dunklen Modus finden in den beiden anderen Dateien dark.css und light.css statt. Unten sehen Sie einen Auszug aus den tatsächlichen Stilen. Er sollte jedoch ausreichen, um die allgemeine Idee zu vermitteln. Ich deklariere zwei Variablen, -⁠-⁠color und -⁠-⁠background-color, die im Wesentlichen ein dunkel-auf-hell- und ein hell-auf-dunkel-Grundlagenthema erstellen.

/* light.css: 👉 dark-on-light */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
}

/* dark.css: 👉 light-on-dark */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
}

In meiner style.css verwende ich diese Variablen dann in der body { … }-Regel. Da sie für die CSS-Pseudoklasse :root definiert sind, einem Selektor, der in HTML das Element <html> darstellt und mit dem Selektor html identisch ist, mit der Ausnahme, dass seine Spezifität höher ist, werden sie kaskadiert, was mir bei der Deklaration globaler CSS-Variablen hilft.

/* style.css */
:root {
  color-scheme: light dark;
}

body {
  color: var(--color);
  background-color: var(--background-color);
}

Im obigen Codebeispiel haben Sie wahrscheinlich die Property color-scheme mit dem zeilenweise getrennten Wert light dark bemerkt.

So wird dem Browser mitgeteilt, welche Farbthemen meine App unterstützt, und er kann spezielle Varianten des User-Agent-Stylesheets aktivieren. Das ist beispielsweise nützlich, um dem Browser zu ermöglichen, Formularfelder mit einem dunklen Hintergrund und hellem Text zu rendern, die Bildlaufleisten anzupassen oder eine thematisch passende Hervorhebungsfarbe zu aktivieren. Die genauen Details zu color-scheme sind im CSS-Modul für die Farbanpassung – Level 1 angegeben.

Alles andere besteht dann nur noch darin, CSS-Variablen für die wichtigen Elemente auf meiner Website zu definieren. Die semantische Organisation von Stilen ist beim Arbeiten im Dunkelmodus sehr hilfreich. Anstatt -⁠-⁠highlight-yellow könnten Sie beispielsweise die Variable -⁠-⁠accent-color aufrufen, da „gelb“ im Dunkelmodus möglicherweise nicht gelb ist oder umgekehrt. Unten finden Sie einige weitere Variablen, die ich in meinem Beispiel verwende.

/* dark.css */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
  --link-color: rgb(0, 188, 212);
  --main-headline-color: rgb(233, 30, 99);
  --accent-background-color: rgb(0, 188, 212);
  --accent-color: rgb(5, 5, 5);
}

/* light.css */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
  --link-color: rgb(0, 0, 238);
  --main-headline-color: rgb(0, 0, 192);
  --accent-background-color: rgb(0, 0, 238);
  --accent-color: rgb(250, 250, 250);
}

Vollständiges Beispiel

Im folgenden Glitch-Embed sehen Sie das vollständige Beispiel, in dem die oben genannten Konzepte in die Praxis umgesetzt werden. Aktivieren oder deaktivieren Sie den dunklen Modus in den Einstellungen Ihres Betriebssystems und sehen Sie, wie die Seite reagiert.

Auswirkungen des Ladens

Wenn Sie mit diesem Beispiel experimentieren, sehen Sie, warum ich meine dark.css und light.css über Medienabfragen lade. Aktivieren Sie den dunklen Modus und aktualisieren Sie die Seite: Die derzeit nicht übereinstimmenden Stylesheets werden zwar geladen, aber mit der niedrigsten Priorität, damit sie nicht mit Ressourcen konkurrieren, die derzeit von der Website benötigt werden.

Auf Änderungen am dunklen Modus reagieren

Wie bei jeder anderen Änderung an einer Medienabfrage können Änderungen am dunklen Modus über JavaScript abonniert werden. So können Sie beispielsweise das Favicon einer Seite dynamisch ändern oder die <meta name="theme-color">, die die Farbe der URL-Leiste in Chrome bestimmt. Im vollständigen Beispiel oben wird dies veranschaulicht. Wenn Sie die Änderungen an der Designfarbe und dem Favicon sehen möchten, öffnen Sie die Demo in einem separaten Tab.

const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addEventListener('change', (e) => {
  const darkModeOn = e.matches;
  console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
});

Ab Chromium 93 und Safari 15 können Sie die Farbe basierend auf einer Medienabfrage mit dem media-Attribut des meta-Elements für das Designfarbelement anpassen. Die erste Übereinstimmung wird ausgewählt. Sie können beispielsweise eine Farbe für den hellen Modus und eine andere für den dunklen Modus verwenden. Zum Zeitpunkt der Erstellung dieses Artikels können Sie diese nicht in Ihrem Manifest definieren. Siehe GitHub-Problem w3c/manifest#975.

<meta
  name="theme-color"
  media="(prefers-color-scheme: light)"
  content="white"
/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

Dunklen Modus debuggen und testen

prefers-color-scheme in den Entwicklertools emulieren

Das Wechseln des gesamten Farbschemas des Betriebssystems kann schnell lästig werden. Mit den Chrome DevTools können Sie jetzt das bevorzugte Farbschema des Nutzers so emulieren, dass es sich nur auf den aktuell sichtbaren Tab auswirkt. Öffne das Befehlsmenü, gib Rendering ein, führe den Befehl Show Rendering aus und ändere dann die Option CSS-Medienfunktion „prefers-color-scheme“ emulieren.

Screenshots von prefers-color-scheme mit Puppeteer erstellen

Puppeteer ist eine Node.js-Bibliothek, die eine API auf übergeordneter Ebene zur Steuerung von Chrome oder Chromium über das DevTools-Protokoll bietet. Mit dark-mode-screenshot stellen wir ein Puppeteer-Script bereit, mit dem Sie Screenshots Ihrer Seiten sowohl im dunklen als auch im hellen Modus erstellen können. Sie können dieses Script einmalig ausführen oder es in Ihre CI-Testsuite (Continuous Integration) aufnehmen.

npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750

Best Practices für den dunklen Modus

Vermeiden Sie reines Weiß.

Ein kleines Detail, das Ihnen vielleicht aufgefallen ist, ist, dass ich kein reines Weiß verwende. Stattdessen wähle ich ein etwas dunkleres Weiß aus, um ein Leuchten und Auslaufen vor dem dunklen Hintergrund zu vermeiden. Etwas wie rgb(250, 250, 250) funktioniert gut.

Fotos neu einfärben und dunkler machen

Wenn Sie die beiden Screenshots unten vergleichen, sehen Sie, dass sich nicht nur das Hauptthema von dunkel auf hell zu hell auf dunkel geändert hat, sondern auch das Hero-Image sieht etwas anders aus. Meine Nutzerstudien haben gezeigt, dass die Mehrheit der Befragten etwas weniger kräftige und brillante Bilder bevorzugt, wenn der dunkle Modus aktiv ist. Ich bezeichne das als Neufärbung.

Die Bilder können mit einem CSS-Filter neu eingefärbt werden. Ich verwende einen CSS-Selektor, der mit allen Bildern übereinstimmt, deren URL keine .svg enthält. So kann ich Vektorgrafiken (Symbole) anders neu kolorieren als meine Bilder (Fotos). Weitere Informationen dazu finden Sie im nächsten Abschnitt. Beachten Sie, dass ich wieder eine CSS-Variable verwende, damit ich den Filter später flexibel ändern kann.

Da eine Neufarbgebung nur im Dunkelmodus erforderlich ist, also wenn dark.css aktiv ist, gibt es keine entsprechenden Regeln in light.css.

/* dark.css */
--image-filter: grayscale(50%);

img:not([src*='.svg']) {
  filter: var(--image-filter);
}

Intensität der Neufärbung im dunklen Modus mit JavaScript anpassen

Nicht alle Menschen sind gleich und haben unterschiedliche Anforderungen an den dunklen Modus. Wenn ich die oben beschriebene Methode zur Umwandlung in Graustufen verwende, kann ich die Graustufenintensität ganz einfach zu einer Nutzereinstellung machen, die ich über JavaScript ändern kann. Wenn ich den Wert auf 0% setze, kann ich die Umwandlung in Graustufen auch vollständig deaktivieren. Beachten Sie, dass document.documentElement auf das Stammelement des Dokuments verweist, also auf dasselbe Element, auf das ich mit der :root-CSS-Pseudoklasse verweisen kann.

const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);

Vektorgrafiken und Symbole invertieren

Für Vektorgrafiken, die in meinem Fall als Symbole verwendet werden, auf die ich über <img>-Elemente verweise, verwende ich eine andere Methode zum Neufärben. Forschungen haben gezeigt, dass Nutzer die Inversion von Fotos nicht mögen, sie funktioniert jedoch sehr gut für die meisten Symbole. Auch hier verwende ich CSS-Variablen, um den Inversionsgrad im Normal- und im :hover-Status zu bestimmen.

Beachten Sie, dass ich auch hier nur die Symbole in dark.css, aber nicht in light.css invertiere. Außerdem wird :hover in den beiden Fällen unterschiedlich invertiert, damit das Symbol je nach ausgewähltem Modus etwas dunkler oder heller erscheint.

/* dark.css */
--icon-filter: invert(100%);
--icon-filter_hover: invert(40%);

img[src*='.svg'] {
  filter: var(--icon-filter);
}

/* light.css */
--icon-filter_hover: invert(60%);

/* style.css */
img[src*='.svg']:hover {
  filter: var(--icon-filter_hover);
}

currentColor für Inline-SVGs verwenden

Bei Inline-SVG-Bildern können Sie anstelle von Invertierungsfiltern das CSS-Schlüsselwort currentColor verwenden, das den Wert der color-Eigenschaft eines Elements darstellt. So können Sie den Wert color für Properties verwenden, die ihn standardmäßig nicht erhalten. Wenn currentColor als Wert der SVG-Attribute fill oder stroke verwendet wird, wird stattdessen der Wert aus dem übernommenen Wert der Property „color“ übernommen. Noch besser: Das funktioniert auch für <svg><use href="…"></svg>. Sie können also separate Ressourcen haben und currentColor wird trotzdem im Kontext angewendet. Hinweis: Dies funktioniert nur für Inline- oder <use href="…">-SVGs, nicht für SVGs, die als src eines Bildes oder auf andere Weise über CSS referenziert werden. In der Demo unten sehen Sie, wie das funktioniert.

<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
    stroke="currentColor"
>
  […]
</svg>

Nahtlose Übergänge zwischen den Modi

Der Wechsel vom dunklen zum hellen Modus oder umgekehrt kann dank der Tatsache, dass sowohl color als auch background-color animierbare CSS-Properties sind, reibungslos erfolgen. Zum Erstellen der Animation müssen Sie lediglich zwei transition-Elemente für die beiden Properties deklarieren. Das folgende Beispiel veranschaulicht die Grundidee. Sie können sie in der Demo live erleben.

body {
  --duration: 0.5s;
  --timing: ease;

  color: var(--color);
  background-color: var(--background-color);

  transition: color var(--duration) var(--timing), background-color var(
        --duration
      ) var(--timing);
}

Art-Direction im dunklen Modus

Aus Gründen der Ladeleistung empfehle ich generell, ausschließlich prefers-color-scheme im Attribut media von <link>-Elementen zu verwenden (und nicht inline in Stylesheets). Es gibt jedoch Situationen, in denen Sie prefers-color-scheme direkt inline in Ihrem HTML-Code verwenden sollten. Die Art Direction ist eine solche Situation. Im Web befasst sich die Art Direction mit dem visuellen Erscheinungsbild einer Seite und damit, wie sie visuell kommuniziert, Stimmungen stimuliert, Funktionen kontrastiert und psychologisch auf eine Zielgruppe einwirkt.

Im dunklen Modus liegt es im Ermessen des Designers, welches Bild in einem bestimmten Modus am besten geeignet ist und ob die Neufärbung von Bildern nicht gut genug ist. Wenn es mit dem Element <picture> verwendet wird, kann der <source> des angezeigten Bilds vom Attribut media abhängig gemacht werden. Im folgenden Beispiel ist die westliche Hemisphäre für den dunklen Modus und die östliche Hemisphäre für den hellen Modus zu sehen. Wenn keine Präferenz angegeben ist, wird in allen anderen Fällen standardmäßig die östliche Hemisphäre verwendet. Dies dient natürlich nur der Veranschaulichung. Aktivieren Sie den dunklen Modus auf Ihrem Gerät, um den Unterschied zu sehen.

<picture>
  <source srcset="western.webp" media="(prefers-color-scheme: dark)" />
  <source srcset="eastern.webp" media="(prefers-color-scheme: light)" />
  <img src="eastern.webp" />
</picture>

Dunkler Modus, aber mit Deaktivierungsoption

Wie bereits im Abschnitt Vorteile des dunklen Modus erwähnt, ist der dunkle Modus für die meisten Nutzer eine ästhetische Option. Daher bevorzugen einige Nutzer möglicherweise eine dunkle Benutzeroberfläche für ihr Betriebssystem, möchten aber ihre Webseiten lieber so sehen, wie sie sie gewohnt sind. Ein gutes Muster ist es, sich zuerst an das Signal zu halten, das der Browser über prefers-color-scheme sendet, aber den Nutzern dann optional zu erlauben, ihre Einstellung auf Systemebene zu überschreiben.

Das benutzerdefinierte Element <dark-mode-toggle>

Sie können den Code dafür natürlich selbst erstellen, aber Sie können auch ein fertiges benutzerdefiniertes Element (Webkomponente) verwenden, das ich speziell für diesen Zweck erstellt habe. Es heißt <dark-mode-toggle> und fügt Ihrer Seite einen Schalter (dunkler Modus: an/aus) oder einen Design-Schalter (Design: hell/dunkel) hinzu, den Sie vollständig anpassen können. In der Demo unten sehen Sie das Element in Aktion. 🤫 Außerdem habe ich es in alle anderen Beispiele oben heimlich eingefügt.

<dark-mode-toggle
  legend="Theme Switcher"
  appearance="switch"
  dark="Dark"
  light="Light"
  remember="Remember this"
></dark-mode-toggle>

Klicken oder tippen Sie in der Demo unten rechts auf die Einstellungen für den dunklen Modus. Wenn Sie das Kästchen im dritten und vierten Steuerelement anklicken, wird die Modusauswahl auch bei einem Neuladen der Seite gespeichert. So können Ihre Besucher ihr Betriebssystem im dunklen Modus lassen, Ihre Website aber im hellen Modus nutzen oder umgekehrt.

Schlussfolgerungen

Der dunkle Modus macht Spaß und eröffnet neue Designmöglichkeiten. Für einige Ihrer Besucher kann das den Unterschied zwischen einer nicht funktionierenden Website und einer zufriedenstellenden Website ausmachen. Es gibt einige Fallstricke und sorgfältige Tests sind unbedingt erforderlich. Der dunkle Modus ist jedoch eine gute Gelegenheit, um zu zeigen, dass Sie sich um alle Ihre Nutzer kümmern. Mit den in diesem Beitrag erwähnten Best Practices und Hilfsmitteln wie dem benutzerdefinierten Element <dark-mode-toggle> sollten Sie in der Lage sein, einen ansprechenden dunklen Modus zu erstellen. Lasst es mich auf Twitter wissen, was ihr erstellt und ob dieser Beitrag hilfreich war. Ihr könnt mir auch Verbesserungsvorschläge machen. Vielen Dank, dass Sie sich die Zeit zum Lesen dieser E-Mail genommen haben. 🌒

Weitere Informationen

Ressourcen für die Medienabfrage prefers-color-scheme:

• Seite „Status der Chrome-Plattform“
• Chromium-Fehler
• Spezifikation für Media Queries Level 5

Ressourcen zum Meta-Tag color-scheme und zur CSS-Eigenschaft:

• Die CSS-Property und das Meta-Tag color-scheme
• Seite „Status der Chrome-Plattform“
• Chromium-Fehler
• Spezifikation für das CSS-Modul „Farbkorrektur“ – Level 1
• GitHub-Problem der CSS-Arbeitsgruppe für das Meta-Tag und die CSS-Property
• HTML WHATWG-GitHub-Problem für das Meta-Tag

Allgemeine Links zum dunklen Modus:

• Material Design – dunkles Design
• Dunkler Modus im Web-Inspektor
• Unterstützung des dunklen Modus in WebKit
• Apple Human Interface Guidelines – Dark Mode

Artikel zur Hintergrundrecherche für diesen Beitrag:

• Was bewirkt die Einstellung „supported-color-schemes“ im dunklen Modus? 🤔
• Es werde Dunkelheit! 🌚 Vielleicht…
• Neuer Farbton für den dunklen Modus

Danksagungen

Die Medienfunktion prefers-color-scheme, die CSS-Property color-scheme und das zugehörige Meta-Tag wurden von 👏 Rune Lillesveen implementiert. Rune ist auch Mitbearbeiter der CSS-Spezifikation für das Farbkorrekturmodul – Level 1. Ich möchte Lukasz Zbylut, Rowan Merewood, Chirag Desai und Rob Dodson für ihre gründliche Überprüfung dieses Artikels 🙏 danken. Die Ladestrategie ist ein Konzept von Jake Archibald. Emilio Cobos Álvarez hat mich auf die richtige prefers-color-scheme-Erkennungsmethode hingewiesen. Der Tipp zu referenzierten SVGs und currentColor stammt von Timothy Hatcher. Abschließend möchte ich mich bei den vielen anonymen Teilnehmern der verschiedenen Nutzerstudien bedanken, die zu den Empfehlungen in diesem Artikel beigetragen haben. Hero-Image von Nathan Anderson.