Überbewertet oder notwendig? Hier erfährst du alles über den dunklen Modus und wie du ihn zum Vorteil deiner Nutzer unterstützen kannst.
Einführung
Dunkler Modus vor Dunkler Modus
Der dunkle Modus ist jetzt vollständig verfügbar. In den Anfängen des Personal Computing war der dunkle Modus keine Option, sondern eine Tatsache: Monochrome CRT-Computermonitore funktionierten, indem Elektronenstrahlen auf einen phosphoreszierenden Bildschirm abgefeuert wurden. Der in frühen CRTs verwendete Phosphor war grün. Da der Text in Grün und der Rest des Bildschirms in Schwarz angezeigt wurde, wurden diese Modelle oft als Green Screens bezeichnet.
Die später eingeführten Farb-CRTs stellten mehrere Farben durch die Verwendung von roten, grünen und blauen Leuchtstoffen dar. Weiß wurde erzeugt, indem alle drei Leuchtstoffe gleichzeitig aktiviert wurden. Mit der Einführung von komplexerem WYSIWYG-Desktop-Publishing wurde die Idee, das virtuelle Dokument einem physischen Blatt Papier ähneln zu lassen, immer beliebter.
Hier begann der Designtrend Dunkel auf Weiß, der sich auch im frühen dokumentenbasierten Web fortsetzte. Der allererste Browser, WorldWideWeb (CSS war noch nicht erfunden), zeigte Webseiten so an. Fun Fact: Der zweite Browser überhaupt, der Line Mode Browser, ein terminalbasierter Browser, war grün auf dunkel. Heutzutage werden Webseiten und Web-Apps in der Regel mit dunklem Text auf hellem Hintergrund gestaltet. Diese grundlegende Annahme ist auch in User-Agent-Stylesheets hartcodiert, einschließlich der von Chrome.
Die Zeiten von Röhrenmonitoren sind längst vorbei. Der Konsum und die Erstellung von Inhalten haben sich auf Mobilgeräte mit hintergrundbeleuchteten LCD oder energiesparenden AMOLED verlagert. Kleinere und besser transportierbare 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. Viele 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.
Warum der dunkle Modus?
Dunkler Modus aus ästhetischen Gründen
Wenn Nutzer gefragt werden, warum sie den dunklen Modus mögen oder verwenden möchten, ist die häufigste Antwort, dass er „angenehmer für die Augen“ ist, gefolgt von „er ist elegant und schön“. Apple schreibt in der Entwicklerdokumentation zum dunklen Modus ausdrücklich: „Die Entscheidung, ob ein helles oder dunkles Design aktiviert werden soll, ist für die meisten Nutzer eine ästhetische Entscheidung und hat möglicherweise nichts mit den Umgebungslichtbedingungen zu tun.“
Dunkler Modus als Bedienungshilfe
Es gibt auch Menschen, die den dunklen Modus tatsächlich benötigen und ihn als weitere Bedienungshilfe verwenden, z. B. Nutzer mit eingeschränktem Sehvermögen. Das früheste Vorkommen einer solchen Bedienungshilfe, das ich finden konnte, ist die Funktion CloseView von System 7, die eine Option für Schwarz auf Weiß und Weiß auf Schwarz hatte. System 7 unterstützte zwar Farben, die Standardbenutzeroberfläche war jedoch weiterhin schwarz-weiß.
Diese auf Inversion basierenden Implementierungen zeigten ihre Schwächen, sobald Farbe eingeführt wurde. Nutzerstudien von Szpiro et al. dazu, wie Menschen mit eingeschränktem Sehvermögen auf Computergeräte zugreifen, haben gezeigt, dass alle befragten Nutzer invertierte Bilder nicht mochten, viele jedoch hellen Text auf dunklem Hintergrund bevorzugten. Apple bietet für diese Nutzerpräferenz eine Funktion namens Intelligente Farbumkehr an, die die Farben auf dem Display umkehrt, mit Ausnahme von Bildern, Medien und einigen Apps, die dunkle Farbstile verwenden.
Eine besondere Form des eingeschränkten Sehvermögens ist das Computer Vision Syndrome, auch bekannt als Digital Eye Strain, das definiert wird als „die Kombination von Augen- und Sehproblemen im Zusammenhang mit der Nutzung von Computern (einschließlich Desktop, Laptop und Tablets) und anderen elektronischen Displays (z.B. Smartphones und elektronische Lesegeräte)“. 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 Einschlaflatenz und einen erhöhten Schlafmangel führt. Darüber hinaus wird in vielen Berichten erwähnt, 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 Forschungsergebnissen von Rosenfield auf die Stimmung und die Leistungsfähigkeit auswirken kann. Um diese negativen Auswirkungen zu begrenzen, kann es helfen, das blaue Licht zu reduzieren, indem die Farbtemperatur des Displays über Funktionen wie Night Shift von iOS oder Nachtlicht von Android angepasst wird. Außerdem sollten helle oder unregelmäßige Lichter im Allgemeinen durch dunkle Designs oder dunkle Modi vermieden werden.
Energieeinsparungen im dunklen Modus auf AMOLED-Displays
Außerdem ist bekannt, dass der dunkle Modus auf AMOLED-Bildschirmen viel Energie spart. 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.
Aktivieren des dunklen Modus im Betriebssystem
Nachdem wir nun die Hintergründe besprochen haben, 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, um diesen in den Einstellungen zu aktivieren. Unter macOS X befindet sich die Einstellung in den Systemeinstellungen im Bereich Allgemein und heißt Erscheinungsbild (Screenshot). Unter Windows 10 befindet sie sich im Bereich Farben und heißt Farbe auswählen (Screenshot). In Android Q findest du die Option unter Display als Ein-/Aus-Schalter für das Dunkle Design (Screenshot). In iOS 13 kannst du die Darstellung in den Einstellungen im Bereich Anzeige & Helligkeit ändern (Screenshot).
Die Medienabfrage prefers-color-scheme
Ein letzter theoretischer Punkt, 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, sowie in verschiedenen anderen Kontexten und Sprachen wie HTML und JavaScript.
Mit Medienabfragen Level 5 werden sogenannte Medienfunktionen für Nutzereinstellungen eingeführt. Damit können Websites die bevorzugte Art der Darstellung von Inhalten erkennen.
Mit dem Medienfeature prefers-color-scheme wird erkannt, 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 einem hellen Design (dunkler Text auf hellem Hintergrund) bevorzugt.dark: Gibt an, dass der Nutzer dem System mitgeteilt hat, dass er eine Seite mit einem dunklen Design (heller Text auf dunklem Hintergrund) bevorzugt.
Unterstützung für den dunklen Modus
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, indem Sie prüfen, ob die Medienabfrage prefers-color-scheme überhaupt übereinstimmt.
Beachten Sie, dass ich keinen Wert angebe, sondern nur prüfe, ob die Medienabfrage 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, Firefox ab Version 67 und Safari ab Version 12.1 unter macOS und ab Version 13 unter iOS unterstützt.
Informationen zu allen anderen Browsern finden Sie im Dokument Can I use support tables.
Präferenzen eines Nutzers zum Zeitpunkt der Anfrage erfahren
Mit dem Client-Hinweis-Header Sec-CH-Prefers-Color-Scheme können Websites die Farbschema-Einstellungen des Nutzers optional zum Zeitpunkt der Anfrage abrufen. So können Server das richtige CSS inline einfügen und ein kurzes Aufblitzen 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. Wie beim Highlander gilt auch für den dunklen Modus: Es kann 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 Rendering-Pfad für einen Modus herunterzuladen, den sie derzeit nicht verwenden. Um die Ladegeschwindigkeit zu optimieren, habe ich das CSS für die Beispiel-App, die die folgenden Empfehlungen in der Praxis zeigt, in drei Teile aufgeteilt, um nicht kritisches CSS zurückzustellen:
style.cssmit allgemeinen Regeln, die auf der gesamten Website gelten.dark.css, das nur die Regeln für den dunklen Modus enthält.light.css, das nur die für den hellen Modus erforderlichen Regeln enthält.
Ladestrategie
Die beiden letztgenannten, light.css und dark.css, werden bedingt mit einer <link media>-Abfrage geladen.
Anfangs werden nicht alle Browser prefers-color-scheme unterstützen (erkennbar am Muster oben). Ich gehe damit dynamisch um, indem ich die Standarddatei light.css über ein bedingt eingefügtes <link rel="stylesheet">-Element in einem winzigen Inline-Script lade (Hell ist eine willkürliche Wahl, ich hätte auch Dunkel als Standard-Fallback-Erfahrung festlegen können).
Um zu verhindern, dass unformatierte Inhalte kurzzeitig zu sehen sind, 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 verwende CSS-Variablen so oft wie möglich. Dadurch kann meine generische style.css-Datei generisch bleiben und alle Anpassungen für den hellen oder dunklen Modus erfolgen in den beiden anderen Dateien dark.css und light.css.
Unten sehen Sie einen Auszug der tatsächlichen Stile, der jedoch ausreichen sollte, um die allgemeine Idee zu vermitteln.
Ich deklariere zwei Variablen, --color und --background-color, die im Wesentlichen ein Baseline-Design mit dunklen Elementen auf hellem Hintergrund und ein Baseline-Design mit hellen Elementen auf dunklem Hintergrund 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 in der CSS-Pseudoklasse :root definiert sind, einem Selektor, der in HTML das <html>-Element darstellt und mit dem Selektor html identisch ist, außer dass seine Spezifität höher ist, werden sie kaskadiert, was mir zum Deklarieren globaler CSS-Variablen dient.
/* style.css */
:root {
color-scheme: light dark;
}
body {
color: var(--color);
background-color: var(--background-color);
}
Im obigen Codebeispiel ist Ihnen wahrscheinlich das Attribut color-scheme mit dem durch Leerzeichen getrennten Wert light dark aufgefallen.
Dadurch erfährt der Browser, welche Farbschemas meine App unterstützt, und kann spezielle Varianten des User-Agent-Stylesheets aktivieren. Das ist nützlich, um den Browser beispielsweise Formularfelder mit dunklem Hintergrund und hellem Text rendern zu lassen, die Bildlaufleisten anzupassen oder eine designabhängige Hervorhebungsfarbe zu aktivieren.
Die genauen Details zu color-scheme sind im CSS Color Adjustment Module Level 1 angegeben.
Alles andere ist dann nur noch eine Frage der Definition von CSS-Variablen für Dinge, die auf meiner Website wichtig sind.
Die semantische Organisation von Stilen ist bei der Arbeit mit dem dunklen Modus sehr hilfreich.
Anstatt beispielsweise --highlight-yellow zu verwenden, sollten Sie die Variable --accent-color nennen, da „yellow“ im dunklen Modus möglicherweise nicht gelb ist oder umgekehrt.
Im Folgenden finden Sie ein Beispiel für 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 eingebetteten Demo sehen Sie das vollständige Beispiel, in dem die oben genannten Konzepte in die Praxis umgesetzt werden. Versuchen Sie, den dunklen Modus in den Einstellungen Ihres Betriebssystems zu aktivieren, und sehen Sie sich an, wie die Seite reagiert.
Auswirkungen werden geladen
Wenn Sie dieses Beispiel ausprobieren, werden Sie sehen, warum ich dark.css und light.css über Medienabfragen lade.
Versuchen Sie, den dunklen Modus zu aktivieren und die Seite neu zu laden: Die derzeit nicht übereinstimmenden Stylesheets werden weiterhin geladen, aber mit der niedrigsten Priorität, sodass sie nie mit Ressourcen konkurrieren, die die Website gerade benötigt.
prefers-color-scheme nicht unterstützt, lädt das CSS für den dunklen Modus mit der niedrigsten Priorität.Auf Änderungen im dunklen Modus reagieren
Wie bei jeder anderen Änderung von Medienabfragen können Änderungen im dunklen Modus über JavaScript abonniert werden.
Damit kannst du beispielsweise das Favicon einer Seite dynamisch ändern oder das <meta name="theme-color">, das die Farbe der URL-Leiste in Chrome bestimmt.
Das vollständige Beispiel oben zeigt dies in Aktion. 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'}.`);
});
Seit Chromium 93 und Safari 15 können Sie die Farbe basierend auf einer Medienabfrage mit dem Attribut media des Designfarbelements meta anpassen. Die erste Übereinstimmung wird ausgewählt. Sie könnten 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. Weitere Informationen finden Sie im 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 Farbschema des gesamten Betriebssystems zu ändern, kann schnell lästig werden. Deshalb können Sie in den Chrome-Entwicklertools jetzt das bevorzugte Farbschema des Nutzers so emulieren, dass nur der aktuell sichtbare Tab betroffen ist.
Ö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.
Screenshots von prefers-color-scheme mit Puppeteer erstellen
Puppeteer ist eine Node.js-Bibliothek, die eine High-Level-API zur Steuerung von Chrome oder Chromium über das DevTools-Protokoll bereitstellt.
Mit dark-mode-screenshot stellen wir ein Puppeteer-Script bereit, mit dem du Screenshots deiner Seiten sowohl im dunklen als auch im hellen Modus erstellen kannst.
Sie können dieses Skript einmalig ausführen oder es in Ihre CI-Testsuite (Continuous Integration) einbinden.
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 Ihnen vielleicht aufgefallen ist, ist, dass ich kein reines Weiß verwende.
Stattdessen wähle ich ein etwas dunkleres Weiß, um ein Leuchten und Ausbluten vor dem umgebenden dunklen Inhalt zu verhindern. Etwas wie rgb(250, 250, 250) funktioniert gut.
Fotografische Bilder neu einfärben und abdunkeln
Wenn Sie die beiden Screenshots unten vergleichen, werden Sie feststellen, dass sich nicht nur das Kerndesign von Dunkel auf Hell zu Hell auf Dunkel geändert hat, sondern dass auch das Hero-Image etwas anders aussieht. Meine Nutzerstudien haben ergeben, dass die meisten Befragten im dunklen Modus etwas weniger lebendige und brillante Bilder bevorzugen. Ich nenne das Neukolorierung.
Die Neufärbung kann über einen CSS-Filter für meine Bilder erreicht werden.
Ich verwende einen CSS-Selektor, der mit allen Bildern übereinstimmt, die nicht .svg in ihrer URL haben. Die Idee dahinter ist, dass ich Vektorgrafiken (Symbole) anders umfärben kann als meine Bilder (Fotos). Mehr dazu im nächsten Absatz.
Beachten Sie, dass ich wieder eine CSS-Variable verwende, damit ich meinen Filter später flexibel ändern kann.
Da die Neufärbung nur im dunklen Modus 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 Nutzer sind gleich und haben dieselben Anforderungen an den dunklen Modus.
Wenn ich die oben beschriebene Methode zur Neufärbung verwende, kann ich die Graustufenintensität ganz einfach als Nutzereinstellung festlegen, 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 bereitstellt, also auf 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 gezeigt, dass Nutzer die Invertierung von Fotos nicht mögen, aber bei den meisten Symbolen funktioniert sie sehr gut.
Auch hier verwende ich CSS-Variablen, um den Invertierungsbetrag im regulären und im :hover-Zustand zu bestimmen.
Beachten Sie, dass ich Symbole nur in dark.css, aber nicht in light.css invertiere und dass :hover in den beiden Fällen eine andere Invertierungsintensität erhält, damit das Symbol je nach ausgewähltem Modus etwas dunkler oder etwas 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 SVG-Inline-Bilder 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 Properties verwenden, die ihn standardmäßig nicht erhalten.
Wenn currentColor als Wert der SVG-Attribute fill oder stroke verwendet wird, wird stattdessen der Wert der geerbten Farbeigenschaft verwendet.
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, nicht aber für SVGs, die als src eines Bildes oder ü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>
Flüssige Übergänge zwischen den Modi
Der Wechsel vom dunklen Modus zum hellen Modus oder umgekehrt kann flüssiger gestaltet werden, da sowohl color als auch background-color animierbare CSS-Eigenschaften sind.
Die Animation lässt sich ganz einfach erstellen, indem Sie zwei transitions für die beiden Properties deklarieren.
Das folgende Beispiel veranschaulicht die allgemeine Idee. 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 mit dunklem Modus
Aus Gründen der Ladeleistung empfehle ich im Allgemeinen, ausschließlich mit prefers-color-scheme im media-Attribut von <link>-Elementen zu arbeiten (anstatt inline in Stylesheets). Es gibt jedoch Situationen, in denen Sie möglicherweise direkt inline in Ihrem 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 eine Zielgruppe psychologisch anspricht.
Im dunklen Modus muss der Designer entscheiden, welches Bild für einen bestimmten Modus am besten geeignet ist und ob die Neufärbung von Bildern möglicherweise nicht ausreicht.
Bei Verwendung mit dem <picture>-Element kann die <source> des anzuzeigenden Bildes vom Attribut media abhängig gemacht werden.
Im folgenden Beispiel wird die westliche Hemisphäre für den dunklen Modus und die östliche Hemisphäre für den hellen Modus angezeigt. Wenn keine Einstellung festgelegt ist, wird standardmäßig die östliche Hemisphäre verwendet.
Dies dient natürlich nur zur 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, aber mit Deaktivierungsoption
Wie im Abschnitt Warum der dunkle Modus? oben erwähnt, ist der dunkle Modus für die meisten Nutzer eine ästhetische Entscheidung.
Daher möchten einige Nutzer die Benutzeroberfläche ihres Betriebssystems möglicherweise im dunklen Design, bevorzugen aber die gewohnte Darstellung von Webseiten.
Ein gutes Muster ist, sich zuerst an das Signal zu halten, das der Browser über prefers-color-scheme sendet, aber dann optional Nutzern 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 einfach ein vorgefertigtes benutzerdefiniertes Element (Webkomponente) verwenden, das ich genau für diesen Zweck erstellt habe.
Sie heißt <dark-mode-toggle> und fügt Ihrer Seite einen Schalter (Dunkler Modus: Ein/Aus) oder einen Design-Wechsler (Design: Hell/Dunkel) hinzu, den Sie vollständig anpassen können.
In der Demo unten sehen Sie das Element in Aktion. (Übrigens habe ich es auch 🤫 still und heimlich in alle anderen Beispiele oben eingebaut.)
<dark-mode-toggle
legend="Theme Switcher"
appearance="switch"
dark="Dark"
light="Light"
remember="Remember this"
></dark-mode-toggle>
<dark-mode-toggle> im hellen Modus.
<dark-mode-toggle> im dunklen Modus.
Klicken oder tippen Sie in der folgenden Demo auf die Steuerelemente für den dunklen Modus oben rechts. Wenn Sie das Kästchen im dritten und vierten Steuerelement anklicken, wird Ihre Modusauswahl auch dann beibehalten, wenn Sie die Seite neu laden. So können Ihre Besucher ihr Betriebssystem im dunklen Modus belassen, Ihre Website aber im hellen Modus nutzen oder umgekehrt.
Zusammenfassung
Die Arbeit mit dem dunklen Modus und die Unterstützung dafür machen Spaß und eröffnen neue Designmöglichkeiten.
Für einige Besucher kann dies den Unterschied zwischen einer unbrauchbaren Website und einem zufriedenen Nutzer ausmachen.
Es gibt einige Fallstricke und sorgfältige Tests sind auf jeden Fall erforderlich, aber der dunkle Modus ist definitiv eine gute Möglichkeit, zu zeigen, dass Ihnen alle Ihre Nutzer wichtig sind.
Die in diesem Beitrag erwähnten Best Practices und Hilfsmittel wie das benutzerdefinierte Element <dark-mode-toggle> sollten Ihnen die nötige Sicherheit geben, um einen hervorragenden dunklen Modus zu erstellen.
Teilen Sie mir auf Twitter mit, was Sie erstellen und ob dieser Beitrag nützlich war. Ich freue mich auch über Verbesserungsvorschläge.
Vielen Dank, dass Sie sich die Zeit zum Lesen dieser E-Mail genommen haben. 🌒
Weitere Informationen
Ressourcen für die Medienabfrage prefers-color-scheme:
Ressourcen für das Meta-Tag color-scheme und die CSS-Property:
- Die CSS-Eigenschaft und das Meta-Tag
color-scheme - Seite „Chrome Platform Status“
- Chromium-Fehler
- CSS Color Adjustment Module Level 1-Spezifikation
- CSS WG GitHub-Problem 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 Inspector
- Unterstützung des dunklen Modus in WebKit
- Apple Human Interface Guidelines – Dunkler Modus
Artikel zur Hintergrundrecherche für diesen Beitrag:
- What Does Dark Mode's "supported-color-schemes" Actually Do? 🤔
- Es werde dunkel! 🌚 Vielleicht…
- Neue Farbgebung 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 außerdem Mitherausgeber der Spezifikation CSS Color Adjustment Module Level 1.
Ich möchte mich bei Lukasz Zbylut, Rowan Merewood, Chirag Desai und Rob Dodson für die sorgfältige Überprüfung dieses Artikels bedanken.
Die Ladestrategie wurde von Jake Archibald entwickelt.
Emilio Cobos Álvarez hat mich auf die richtige Methode zur Erkennung von prefers-color-scheme hingewiesen.
Der Tipp mit referenzierten SVGs und currentColor stammt von Timothy Hatcher.
Schließlich danke ich den vielen anonymen Teilnehmern der verschiedenen Nutzerstudien, die dazu beigetragen haben, die Empfehlungen in diesem Artikel zu formulieren.