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.

Thomas Steiner

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 Frage der Wahl, aber umso wichtiger: Monochrome CRT-Computermonitore feuerten Elektronenstrahlen auf einen phosphoreszierenden Bildschirm ab und 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. Weiß wurde durch gleichzeitige Aktivierung aller drei Phosphore erzeugt. 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 werden Webseiten und Webanwendungen in der Regel mit dunklem Text auf hellem Hintergrund gestaltet. Dies ist eine Grundannahme, die auch in User-Agent-Stylesheets hartcodiert ist. Dies gilt auch für Chrome.

Die Zeiten von CRTs sind lange vorbei. Der Konsum und die Erstellung von Inhalten haben sich auf Mobilgeräte mit hintergrundbeleuchteten LCD- oder energieeffizienten AMOLED-Displays verlagert. Kleinere und besser transportierbare 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 wollen, lautet die häufigste Antwort: „Es ist angenehmer für die Augen“, gefolgt von „er ist elegant und schön“. In der Entwicklerdokumentation zum dunklen Modus schreibt Apple explizit: „Die Entscheidung, ob ein helles oder ein dunkles Erscheinungsbild aktiviert werden soll, ist für die meisten Nutzer ästhetisch und hat möglicherweise keinen Bezug zu den Lichtverhältnissen in der Umgebung.“

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 Auftreten eines solchen Bedienungshilfen-Tools, das ich finden konnte, war die Funktion CloseView von System 7 mit den Ein-/Aus-Schaltflächen Schwarz auf Weiß und Weiß auf Schwarz. Obwohl System 7 Farben unterstützte, war die Standardbenutzeroberfläche weiterhin schwarz-weiß.

Diese inversionsbasierten Implementierungen zeigten ihre Schwächen, als 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 beim Einschlafen und einen erhöhten Schlafmangel führt. Darüber hinaus ist eine Belastung mit blauem Licht allgemein bekannt, dass sie an der Regulierung des zirkadischen Rhythmus und des Schlafzyklus beteiligt ist. Unregelmäßiges Licht kann zu Schlafmangel führen, was sich laut Forschung von Rosenfield möglicherweise auf die Stimmung und die Aufgabenleistung 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

Der dunkle Modus spart auf AMOLED außerdem eine Menge Energie ein. 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 wir uns angesehen haben, warum der dunkle Modus für viele Nutzer so wichtig ist, sehen wir uns nun an, wie er unterstützt werden kann.

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 sie sich in den Systemeinstellungen im Bereich Allgemein unter Darstellung (Screenshot) und unter Windows 10 im Bereich Farben unter 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 Medienabfrage prefers-color-scheme

Noch ein letztes bisschen Theorie, bevor ich loslege. Mit Medienabfragen können Autoren Werte oder Funktionen des User-Agents oder 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 Darstellungsweise von Inhalten für den Nutzer erkennen können.

Mit der Medienfunktion prefers-color-scheme wird ermittelt, ob der Nutzer ein helles oder dunkles Farbdesign für die Seite 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 können Sie den Hilfeartikel Kann ich Supporttabellen verwenden? lesen.

Informationen zu den Einstellungen eines Nutzers zum Zeitpunkt der Anfrage

Mit dem Client-Hinweisheader Sec-CH-Prefers-Color-Scheme können Websites die Farbschemaeinstellungen 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.

Der dunkle 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? Weil sich dieser Umstand auf die Ladestrategie auswirken sollte. Zwingen Sie Nutzer nicht dazu, CSS im kritischen Rendering-Pfad herunterzuladen, das für einen Modus vorgesehen ist, 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 mit allgemeinen Regeln, die auf der Website universell gelten.
• 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 die CSS-Variablen maximal. Dadurch kann mein generisches style.css allgemein gehalten werden und die gesamte Anpassung des hellen oder dunklen Modus erfolgt in den beiden anderen Dateien dark.css und light.css. 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 Basisthema dark-on-light und light-on-dark 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 Codebeispiel oben ist Ihnen wahrscheinlich das Attribut color-scheme mit dem durch Leerzeichen getrennten Wert light dark aufgefallen.

Dadurch wird dem Browser mitgeteilt, welche Farbdesigns von meiner App unterstützt werden. Außerdem kann er spezielle Varianten des User-Agent-Stylesheets aktivieren. Dies ist beispielsweise nützlich, wenn der Browser Formularfelder mit dunklem Hintergrund und hellem Text rendern, die Bildlaufleisten anpassen oder eine designbasierte Hervorhebungsfarbe aktivieren kann. Die genauen Details zu color-scheme finden Sie im CSS-Modul zur Farbanpassung – Level 1.

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'}.`);
});

In Chromium 93 und Safari 15 können Sie die Farbe basierend auf einer Medienabfrage mit dem Attribut media des Design-Farbelements meta anpassen. Die erste Übereinstimmung wird ausgewählt. Zum Beispiel könnten Sie 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

Der Wechsel des Farbschemas des gesamten Betriebssystems kann sehr schnell lästig sein. Daher können Sie in den Chrome-Entwicklertools jetzt das bevorzugte Farbschema des Nutzers so emulieren, dass sich nur der aktuell sichtbare 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

Reines Weiß vermeiden

Ein kleines Detail, das Sie vielleicht bemerkt haben, 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 abdunkeln

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 ohne .svg in der URL übereinstimmt. Ich kann Vektorgrafiken (Symbolen) anders als meinen Bildern (Fotos) die Farben neu einfärben lassen. Mehr dazu im nächsten Abschnitt. Wie ich noch einmal eine CSS-Variable verwende, kann ich den Filter später flexibel ändern.

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

/* 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 jeder ist gleich und jeder hat 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 beiden Fällen mit einer unterschiedlichen Inversionsintensität versehen, 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

Für Inline-SVG-Bilder können Sie anstelle von Inversionsfiltern das CSS-Schlüsselwort currentColor verwenden, das den Wert des Attributs color eines Elements darstellt. So können Sie den Wert color für Attribute verwenden, die ihn nicht standardmäßig 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. Dies funktioniert nur für Inline- oder <use href="…">-SVGs, aber nicht für SVGs, die als src eines Bildes oder irgendwie ü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 in den hellen Modus oder umgekehrt kann geglättet werden, da sowohl color als auch background-color animierbare CSS-Eigenschaften sind. 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 im Allgemeinen, ausschließlich mit prefers-color-scheme im Attribut media von <link>-Elementen zu arbeiten und nicht inline in Stylesheets. Es kann jedoch Situationen geben, in denen Sie direkt inline im HTML-Code mit prefers-color-scheme arbeiten möchten. 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 erzeugt, 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. Bei Verwendung mit dem <picture>-Element kann der <source> des anzuzeigenden Bildes vom media-Attribut abhängig gemacht werden. Im folgenden Beispiel zeige ich die westliche Hemisphäre im dunklen Modus und die östliche Hemisphäre im hellen Modus oder wenn keine Präferenz angegeben wird. In allen anderen Fällen wird die östliche Hemisphäre standardmäßig verwendet. Dies dient natürlich nur der Veranschaulichung. Aktiviere den dunklen Modus auf deinem 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 – mit Opt-out-Option

Wie bereits im Abschnitt Warum der dunkle Modus erwähnt, ist der dunkle Modus für die meisten Nutzer die richtige Wahl. Dies kann dazu führen, dass einige Nutzer die Benutzeroberfläche ihres Betriebssystems lieber im Dunkeln sehen möchten, aber es vorziehen, ihre Webseiten so zu sehen, wie sie es 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 oben auf die Steuerelemente für den dunklen Modus. Wenn du das Kästchen im dritten und vierten Steuerelement anklickst, kannst du prüfen, wie deine Modusauswahl gespeichert wird, auch wenn du die Seite neu lädst. So können Ihre Besucher ihr Betriebssystem im dunklen Modus lassen, Ihre Website aber im hellen Modus nutzen oder umgekehrt.

Schlussfolgerungen

Die Arbeit mit dem dunklen 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. Teilt mir auf Twitter mit, was ihr erstellt habt und ob dieser Beitrag hilfreich war. Ihr könnt mir auch Verbesserungsvorschläge schicken. 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 für das Meta-Tag color-scheme und die CSS-Eigenschaft:

• Die CSS-Eigenschaft 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 im dunklen Modus:

• Material Design – dunkles Design
• Dunkler Modus in Web Inspector
• Unterstützung des dunklen Modus in WebKit
• Apple Human Interface Guidelines – dunkler Modus

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-Eigenschaft color-scheme und das zugehörige Meta-Tag sind Bestandteil der Implementierung von 👏 Rune Lillesveen. 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.