bevorzugt-Farbschema: Hallo Dunkelheit, mein alter Freund

Zu viel Hype oder Notwendigkeit? Hier erfahren Sie alles über den dunklen Modus und darüber, wie Sie ihn zum Vorteil Ihrer Nutzer unterstützen.

Einleitung

Dunkler Modus vor Dunkler Modus

Wir haben uns mit dem dunklen Modus geschlossen. In der Zeit des Personal Computings war der dunkle Modus keine Entscheidung, aber eine Frage: Bei monochromen CRT-Computermonitoren wurden Elektronenstrahlen auf einen phosphoreszierenden Bildschirm gesendet und der in den ersten CRTs verwendete Phosphor war grün. Da Text in Grün und der Rest des Bildschirms schwarz war, wurden diese Modelle oft als Greenscreens bezeichnet.

Die anschließend eingeführten Farb-CRTs zeigten mehrere Farben durch die Verwendung von roten, grünen und blauen Phosphoren. Dabei wurden alle drei Phosphoren gleichzeitig aktiviert, um Weiß zu erzeugen. Mit der Einführung der ausgefeilteren WYSIWYG-Desktop-Veröffentlichung wurde die Idee verbreitet, das virtuelle Dokument wie ein physisches Blatt Papier zu gestalten.

Hier begann der Designtrend Dunkel-auf-Weiß, der sich auch in das frühe dokumentenbasierte Web übertragen hat. Der allererste Browser, WorldWideWeb (CSS wurde noch nicht erfunden), zeigte Webseiten auf diese Weise. Übrigens: Der zweitgrößte Browser, Line Mode Browser (ein Terminal-basierter Browser), war dunkel und grün. Heutzutage werden Webseiten und Webanwendungen in der Regel mit dunklem Text auf hellem Hintergrund entworfen. Diese Grundannahme ist auch in User-Agent-Stylesheets, einschließlich Chrome, hartcodiert.

Die Zeiten der CRTs sind lange vorbei. Die Nutzung und Erstellung von Inhalten hat sich auf Mobilgeräte verlagert, die LCD mit Hintergrundbeleuchtung oder energiesparende AMOLED-Bildschirme verwenden. Kleinere und leichter zu handhabende Computer, Tablets und Smartphones führten zu neuen Nutzungsmustern. Freizeitaktivitäten wie Surfen im Web, Programmieren zum Spaß und High-End-Gaming finden häufig nach Feierabend in dunklen Umgebungen statt. Die Menschen nutzen ihre Geräte sogar nachts im Bett. Je mehr Menschen ihre Geräte im Dunkeln verwenden, desto beliebter wird die Idee, zu den Wurzeln von Hell auf Dunkel zurückzukehren.

Was spricht für den dunklen Modus?

Dunkler Modus aus ästhetischen Gründen

Wenn Nutzer gefragt werden, warum sie den dunklen Modus mögen oder wünschen, lautet die beliebteste Antwort, dass es für die Augen angenehmer ist, gefolgt von „sie ist elegant und schön“. Apple schreibt in der Entwicklerdokumentation zum dunklen Modus ausdrücklich: „Die Entscheidung, ob ein helles oder ein dunkles Erscheinungsbild aktiviert werden soll, ist für die meisten Nutzer eine ästhetische Frage und hängt möglicherweise nicht von den Umgebungslichtbedingungen ab.“

Dunkler Modus als Bedienungshilfe

Es gibt aber auch Personen, die den dunklen Modus tatsächlich brauchen und ihn als weitere Bedienungshilfe verwenden, z. B. Nutzer mit eingeschränktem Sehvermögen. Das erste Beispiel eines solchen Bedienungshilfetools, das ich finden konnte, war die CloseView-Funktion von System 7 mit einer Ein/Aus-Schaltfläche für Black auf White und White on Black. Zwar unterstützte System 7 Farben, die Standardbenutzeroberfläche war aber immer noch schwarz-weiß.

Diese inversionsbasierten Implementierungen haben ihre Schwächen nach der Farbeinführung gezeigt. Nutzerstudien von Szpiro et al. zum Thema Computergeräte mit eingeschränktem Sehvermögen zeigen, dass alle befragten Nutzer umgekehrte Bilder nicht mögen, aber dass viele von ihnen hellen Text auf einem dunklen Hintergrund bevorzugen. Apple berücksichtigt diese Nutzerpräferenz mit der Funktion Smart Invert, mit der die Farben auf dem Bildschirm umgekehrt werden. Hiervon ausgenommen sind Bilder, Medien und einige Apps, die dunkle Farbstile verwenden.

Eine spezielle Form des Sehvermögens ist das Computer-Vision-Syndrom, auch als digitale Augenbelastung bezeichnet. definiert als „Kombination von Augen- und Sehbehinderungen, die bei der Nutzung von Computern (einschließlich Computern, Laptops und Tablets) und anderen elektronischen Bildschirmen (z. B. Smartphones und elektronische Lesegeräte) auftreten. Es wurde vorgeschlagen, dass die Nutzung elektronischer Geräte durch Jugendliche, insbesondere in der Nacht, zu einem erhöhten Risiko für eine kürzere Schlafdauer, eine längere Latenz beim Schlafen und einen erhöhten Schlafmangel führt. Darüber hinaus wird weit verbreitet, dass blaues Licht an der Regulierung des zirkadianen Rhythmus und des Schlafzyklus beteiligt ist. Unregelmäßige Lichtverhältnisse können zu Schlafmangel führen, was sich laut Studien von Rosenfield möglicherweise auf die Stimmung und die Aufgabenleistung auswirkt. Um diese negativen Auswirkungen zu begrenzen, kann das Blaulicht reduziert werden, indem die Farbtemperatur des Displays über Funktionen wie Night Shift von iOS oder das Nachtlicht von Android angepasst wird. Außerdem können Sie helles Licht oder unregelmäßige Lichter im Allgemeinen durch dunkle Designs oder dunkle Modi vermeiden.

Energieeinsparungen im dunklen Modus auf AMOLED-Displays

Außerdem spart der dunkle Modus auf AMOLED-Displays viel Energie. Android-Fallstudien, die sich auf beliebte Google-Apps wie YouTube konzentrieren, haben ergeben, dass die Energieeinsparung bis zu 60 % betragen kann. Das folgende Video enthält weitere Details zu diesen Fallstudien und den Energieeinsparungen pro App.

Dunkler Modus im Betriebssystem wird aktiviert

Sie wissen jetzt, warum der dunklen Modus für viele Nutzer so wichtig ist. Sehen wir uns an, wie wir ihn unterstützen können.

Bei Betriebssystemen, die einen dunklen Modus oder ein dunkles Design unterstützen, kann dieser in der Regel irgendwo in den Einstellungen aktiviert werden. Unter macOS X befindet es sich in den Systemeinstellungen im Abschnitt General (Allgemein) und heißt Appearance (Darstellung) (Screenshot). Unter Windows 10 befindet es sich im Abschnitt Colors (Farben) und heißt Wähle deine Farbe (Screenshot). In Android Q findest du es unter Display als Ein/Aus-Schaltfläche für Dunkles Design (Screenshot). Bei iOS 13 kannst du die Darstellung in den Einstellungen im Abschnitt Anzeige & Helligkeit ändern (Screenshot).

Die prefers-color-scheme-Medienabfrage

Noch eine letzte Theorie, bevor ich losgehe. Mit Medienabfragen 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 auf ein Dokument und in verschiedenen anderen Kontexten und Sprachen wie HTML und JavaScript bedingt anzuwenden. Mit Medienabfragen Stufe 5 werden sogenannte Medienfunktionen für Nutzerpräferenzen eingeführt, mit denen Websites erkennen können, wie der Nutzer Inhalte bevorzugt anzeigt.

Mit der Medienfunktion prefers-color-scheme lässt sich feststellen, ob der Nutzer ein helles oder dunkles Farbdesign für die Seite angefordert hat. Die Funktion kann mit den folgenden Werten verwendet werden:

• light: Zeigt an, dass der Nutzer das System darüber informiert hat, dass er eine Seite mit einem hellen Design (dunkler Text auf hellem Hintergrund) bevorzugen würde.
• dark: Gibt an, dass der Nutzer das System darüber informiert hat, dass er eine Seite mit einem dunklen Design (heller Text auf dunklem Hintergrund) bevorzugen würde.

Dunkler Modus wird unterstützt

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

Da der dunkle Modus über eine Medienabfrage gemeldet wird, können Sie ganz einfach prüfen, ob der aktuelle Browser den dunklen Modus unterstützt. Prüfen Sie dazu, ob die Medienabfrage prefers-color-scheme überhaupt übereinstimmt. Beachten Sie, dass ich keinen Wert einfüge, sondern nur prüfen kann, ob es Übereinstimmungen mit der Medienabfrage gibt.

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

Zum Zeitpunkt der Erstellung dieses Dokuments wurde prefers-color-scheme sowohl auf Computern als auch auf Mobilgeräten (sofern verfügbar) von Chrome und Edge mit Version 76, Firefox ab Version 67 sowie Safari ab Version 12.1 unter macOS und ab Version 13 unter iOS unterstützt. Bei allen anderen Browsern finden Sie weitere Informationen im Hilfeartikel Kann ich Supporttabellen verwenden.

Informationen zu den Einstellungen eines Nutzers zum Zeitpunkt der Anfrage

Mit dem Clienthinweis-Header Sec-CH-Prefers-Color-Scheme können Websites optional zur Anfragezeit die Farbschemaeinstellungen des Nutzers abrufen. So können Server den richtigen CSS-Code inline einfügen und so ein Aufleuchten eines falschen Farbdesigns vermeiden.

Dunkler Modus in der Praxis

Sehen wir uns nun an, wie die Unterstützung des dunklen Modus in der Praxis aussieht. Wie beim Highlander kann es auch beim dunklen Modus nur einen geben: dunkel oder hell, aber nie beides. Warum erwähne ich das? Weil sich dies auf die Ladestrategie auswirken sollte. Zwinge Nutzer nicht dazu, CSS über den kritischen Rendering-Pfad herunterzuladen, der für einen Modus vorgesehen ist, den sie derzeit nicht verwenden. Zur Optimierung der Ladegeschwindigkeit habe ich daher mein CSS für die Beispiel-App, die die folgenden Empfehlungen in der Praxis zeigt, in drei Teile aufgeteilt, um nicht kritisches CSS zu verschieben:

• style.css mit allgemeinen Regeln, die universell auf der Website verwendet werden.
• dark.css, die nur die Regeln enthält, die für den dunklen Modus erforderlich sind.
• light.css, die nur die Regeln enthält, die für den hellen Modus erforderlich sind.

Ladestrategie

Die beiden letzteren, light.css und dark.css, werden bedingt mit einer <link media>-Abfrage geladen. Anfangs unterstützen nicht alle Browser prefers-color-scheme (wird mit dem obigen Muster erkannt). Um das zu umgehen, lade ich die light.css-Standarddatei dynamisch über ein bedingt eingefügtes <link rel="stylesheet">-Element in ein winziges Inline-Skript. Das helle Design ist eine willkürliche Wahl. Ich hätte auch die Standard-Fallback-Version als Standard-Fallback festlegen können. Um zu vermeiden, dass unformatierte Inhalte unformatiert auffallen, blende ich den Inhalt der Seite aus, bis light.css geladen ist.

<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 maximal CSS-Variablen. Dadurch kann mein generisches style.css generisch sein und die Anpassung des hellen oder dunklen Modus erfolgt in den beiden anderen Dateien dark.css und light.css. Unten sehen Sie einen Auszug der tatsächlichen Stile, aber es sollte ausreichen, um die Grundidee zu vermitteln. Ich deklariere zwei Variablen, -⁠-⁠color und -⁠-⁠background-color, die im Grunde ein Dunkel-bei-Licht- und ein Hell-auf-Dunkel-Basisdesign 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 meinem style.css verwende ich diese Variablen dann in der body { … }-Regel. Da sie in der CSS-Pseudoklasse :root definiert sind – ein Selektor, der in HTML das Element <html> darstellt und mit der Spezifität des Selektors html identisch ist, werden sie kaskadiert, sodass ich globale CSS-Variablen deklarieren kann

/* 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 weiß der Browser, welche Farbthemen meine App unterstützt, und ermöglicht es ihm, spezielle Varianten des User-Agent-Stylesheets zu aktivieren. Damit kann der Browser z. B. Formularfelder mit dunklem Hintergrund und hellem Text rendern, die Bildlaufleisten anpassen oder eine themenbezogene Hervorhebungsfarbe aktivieren. Die genauen Details von color-scheme finden Sie in Modul zur CSS-Farbanpassung – Stufe 1.

Alles andere muss dann nur noch CSS-Variablen für Dinge definiert werden, die auf meiner Website wichtig sind. Die semantische Anordnung der Stile ist beim Arbeiten mit dem dunklen Modus sehr hilfreich. Beispielsweise sollten Sie statt -⁠-⁠highlight-yellow die Variable -⁠-⁠accent-color aufrufen, da „Gelb“ im dunklen Modus vielleicht nicht gelb ist oder umgekehrt. Nachfolgend finden Sie ein Beispiel für 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

In der folgenden Einbettung von Glitch siehst du das vollständige Beispiel, in dem die oben genannten Konzepte in die Praxis umgesetzt werden. Wechseln Sie in den Einstellungen Ihres Betriebssystems zum dunklen Modus, um zu sehen, wie die Seite reagiert.

Auswirkung wird geladen

Wenn Sie mit diesem Beispiel spielen, sehen Sie, warum ich dark.css und light.css über Medienabfragen lade. Versuchen Sie, zwischen dem dunklen Modus zu wechseln und die Seite neu zu laden: Die jeweiligen derzeit nicht übereinstimmenden Stylesheets werden weiterhin geladen, jedoch mit der niedrigsten Priorität, sodass sie nie mit Ressourcen konkurrieren, die derzeit von der Website benötigt werden.

Auf Änderungen des dunklen Modus reagieren

Wie alle anderen Änderungen bei Medienabfragen können Änderungen im dunklen Modus über JavaScript abonniert werden. Damit können Sie beispielsweise das Favicon einer Seite dynamisch ändern oder das <meta name="theme-color">-Element ändern, das die Farbe der URL-Leiste in Chrome bestimmt. Das vollständige Beispiel oben zeigt dies in Aktion. Wenn Sie die Änderungen an Designfarbe und 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 Attribut media des Farbelements des Designs meta anpassen. Die erste Übereinstimmung wird ausgewählt. Sie könnten z. B. eine Farbe für den hellen und eine für den dunklen Modus verwenden. Zum Zeitpunkt der Erstellung dieses Dokuments können Sie diese nicht in Ihrem Manifest definieren. Weitere Informationen finden Sie unter w3c/manifest#975 GitHub-Problem.

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

Fehler im dunklen Modus beheben und testen

prefers-color-scheme in den Entwicklertools emulieren

Das Ändern des Farbschemas des Betriebssystems kann sehr schnell lästig werden. Deshalb können Sie mit den Chrome-Entwicklertools jetzt das bevorzugte Farbschema des Nutzers so emulieren, dass es sich nur auf den aktuell sichtbaren Tab auswirkt. Öffnen Sie das Befehlsmenü, geben Sie Rendering ein, führen Sie den Befehl Show Rendering aus und ändern Sie dann die Option CSS-Medienfunktion „prefers-color-scheme emulieren“.

Screenshot 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 Skript einmalig ausführen oder es in Ihre Testsuite für Continuous Integration (CI) 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 du vielleicht bemerkt hast, ist, dass ich kein reines Weiß verwende. Um ein Leuchten und eine Blutung im umgebenden dunklen Inhalt zu vermeiden, wähle ich stattdessen ein etwas dunkleres Weiß. Etwas wie rgb(250, 250, 250) funktioniert gut.

Fotos neu einfärben und abdunkeln

Wenn Sie die beiden Screenshots unten vergleichen, werden Sie feststellen, dass sich nicht nur das Kerndesign von Dunkel auf Licht zu Hell auf Dunkel geändert hat, sondern auch das Hero-Image etwas anders aussieht. Meine Nutzerstudien haben gezeigt, dass die Mehrheit der befragten Personen im dunklen Modus etwas weniger leuchtende und brillante Bilder bevorzugt. Das bezeichne ich als Neueinfärbung.

Das Einfärben kann über einen CSS-Filter für meine Bilder erfolgen. Ich verwende einen CSS-Selektor, der mit allen Bildern übereinstimmt, deren URL nicht .svg enthält. Der Gedanke ist, dass ich Vektorgrafiken (Symbolen) eine andere Einfärbung als meine Bilder (Fotos) geben kann. Mehr dazu im nächsten Absatz. Wie Sie sehen, verwende ich wieder eine CSS-Variable, damit ich den Filter später flexibel ändern kann.

Da die Neueinfärbung nur im dunklen Modus erforderlich ist, das heißt, 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 Farbanpassung im dunklen Modus mit JavaScript anpassen

Nicht jeder ist gleich und die Nutzer haben unterschiedliche Anforderungen an den dunklen Modus. Wenn ich mich an die oben beschriebene Methode halte, kann ich die Graustufenintensität einfach zu einer Nutzerpräferenz machen, die ich über JavaScript ändern kann. Wenn ich den Wert 0% festlege, kann ich die Neufärbung auch vollständig deaktivieren. Beachten Sie, dass document.documentElement einen Verweis auf das Stammelement des Dokuments enthält, d. h. dasselbe Element, auf das ich mit der CSS-Pseudoklasse :root 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 zur Neufärbung. Studien haben zwar gezeigt, dass Nutzer die Inversion von Fotos nicht mögen, bei den meisten Symbolen funktioniert sie jedoch sehr gut. Auch hier verwende ich CSS-Variablen, um die Inversionsmenge sowohl im regulären Zustand als auch im Status :hover zu bestimmen.

Wie Sie sehen, kehre ich nur Symbole in dark.css, aber nicht in light.css um und wie :hover in den beiden Fällen eine andere Inversionsintensität erhält, damit das Symbol je nach ausgewähltem Modus etwas dunkler oder etwas heller erscheinen kann.

/* 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 statt Inversionsfiltern das CSS-Keyword currentColor verwenden, das den Wert der Eigenschaft 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 für das SVG-Attribut fill oder stroke verwendet wird, wird der Wert praktisch aus dem übernommenen Wert des Farbattributs übernommen. Noch besser: Dies 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, nicht aber für SVGs, die als src eines Bildes oder irgendwie über CSS referenziert werden. Wie das funktioniert, wird in der Demo unten gezeigt.

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

Flüssige Übergänge zwischen Modi

Der Wechsel vom dunklen Modus zum hellen Modus oder umgekehrt kann geglättet werden, da sowohl color als auch background-color animierbare CSS-Eigenschaften sind. Das Erstellen der Animation ist so einfach wie das Deklarieren von zwei transitions für die beiden Eigenschaften. Das folgende Beispiel veranschaulicht die Grundidee. Sie können sie sich live in der Demo ansehen.

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 mit dunklem Modus

Aus Gründen der Ladeleistung im Allgemeinen empfehle ich, ausschließlich mit prefers-color-scheme im media-Attribut von <link>-Elementen zu arbeiten (und nicht direkt in Stylesheets). Es gibt aber Situationen, in denen Sie prefers-color-scheme direkt inline in Ihrem HTML-Code verwenden können. Art Direction ist eine solche Situation. Im Web geht es bei Art Direction (Art Direction) um das visuelle Erscheinungsbild einer Seite insgesamt und darum, wie sie visuell kommuniziert, Stimmungen stimuliert, Funktionen kontrastiert und die Zielgruppe psychologisch anspricht.

Beim dunklen Modus liegt es im Ermessen des Designers, welches Bild für einen bestimmten Modus am besten geeignet ist und ob die Einfärbung der Bilder vielleicht 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 für den dunklen Modus und die östliche Hemisphäre für den hellen Modus. 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. Schalte den dunklen Modus auf deinem Gerät ein, 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 Opt-out-Funktion

Wie bereits im Abschnitt Warum der dunkle Modus oben erwähnt wurde, ist der dunkle Modus für die meisten Nutzer eine Ästhetik. Einige Nutzer mögen es, wenn ihre Betriebssystem-UI im Dunkeln dargestellt wird, aber sie bevorzugen es trotzdem, ihre Webseiten so zu sehen, wie sie es gewohnt sind. Ein gutes Muster ist, zuerst das Signal zu berücksichtigen, das der Browser über prefers-color-scheme sendet, Nutzern dann aber optional erlaubt, 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 einfach ein vorgefertigtes benutzerdefiniertes Element (Webkomponente) verwenden, das ich zu diesem Zweck erstellt habe. Es heißt <dark-mode-toggle> und fügt Ihrer Seite eine Ein/Aus-Schaltfläche (dunkler Modus: ein/aus) oder einen Designwechsel (Design: hell/dunkel) hinzu, die Sie vollständig anpassen können. Die folgende Demo zeigt das Element in Aktion (oh, und ich habe es auch in allen weiteren Beispielen oben eingeblendet 🤫).

<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 Sie das Kästchen im dritten und vierten Steuerelement anklicken, sehen Sie, wie die Modusauswahl gespeichert wird, auch wenn Sie die Seite neu laden. Auf diese Weise können Besucher ihr Betriebssystem im dunklen Modus belassen, die Website aber im hellen Modus betrachten oder umgekehrt.

Ergebnisse

Die Arbeit mit dem dunklen Modus macht Spaß und eröffnet neue Designmöglichkeiten. Für manche Besucher ist das oft der entscheidende Faktor dafür, dass sie mit der Website nicht zufrieden sind und sie zufrieden sind. Es gibt einige Stolpersteine und sorgfältige Tests sind notwendig, aber der dunkle Modus ist definitiv eine gute Gelegenheit, zu zeigen, dass dir alle deine Nutzer wichtig sind. Mit den Best Practices, die in diesem Beitrag erwähnt werden, und Hilfsprogrammen wie dem benutzerdefinierten Element <dark-mode-toggle> kannst du dir sicher sein, dass du den dunklen Modus wirklich verbessern kannst. Teilen Sie mir auf Twitter mit, was Sie erstellt haben und ob dieser Beitrag nützlich war oder ob Sie Verbesserungsvorschläge haben. Vielen Dank, dass Sie sich die Zeit zum Lesen dieser E-Mail genommen haben. 🌒

Weitere Informationen

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

• Statusseite der Chrome-Plattform
• Chromium-Programmfehler
• Medienabfragen – Spezifikation für Stufe 5

Ressourcen für das color-scheme-Meta-Tag und die CSS-Eigenschaft:

• Die CSS-Property und das Meta-Tag color-scheme
• Statusseite der Chrome-Plattform
• Chromium-Programmfehler
• Spezifikation des CSS-Farbanpassungsmoduls – Stufe 1
• GitHub-Problem der CSS-WG für das Meta-Tag und die CSS-Eigenschaft
• HTML WHATWG GitHub-Problem für das Meta-Tag

Allgemeine Links zum dunklen Modus:

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

Hintergrundforschungsartikel für diesen Post:

• Was bewirkt der dunkle Modus tatsächlich? 🤔
• Lass es Dunkelheit kommen! 🌚 Vielleicht...
• Neu einfärben für den dunklen Modus

Danksagungen

Die Medienfunktion prefers-color-scheme, die CSS-Eigenschaft color-scheme und das zugehörige Meta-Tag sind die Implementierungsarbeit von 👏 Rune Lillesveen. Rune ist außerdem Miteditor der Spezifikation CSS Color Anpassung Modul Stufe 1. Dank 🙏 vielen Dank an Lukasz Zbylut, Rowan Merewood, Chirag Desai und Rob Dodson für die gründlichen Rezensionen dieses Artikels. Die Ladestrategie ist das Gehirn von Jake Archibald. Emilio Cobos Álvarez hat mich auf die richtige prefers-color-scheme-Erkennungsmethode hingewiesen. Der Tipp mit referenzierten SVGs und currentColor stammt von Timothy Hatcher. Ich bin auch den vielen anonymen Teilnehmern der verschiedenen Nutzerstudien dankbar, die zur Gestaltung der Empfehlungen in diesem Artikel beigetragen haben. Hero-Image von Nathan Anderson