bevorzugt-Farbschema: Hallo Dunkelheit, mein alter Freund

Über Hype oder Notwendigkeit? Hier erfährst du alles über den dunklen Modus und wie du ihn zum Vorteil deiner Nutzer unterstützen kannst.

Thomas Steiner

Einführung

Dunkler Modus vor Dunkler Modus

</ph>

Wir haben den dunklen Modus geschlossen. In den Anfängen des Personal Computing war der dunkle Modus keine Frage der Wahl. aber eine Tatsache: Monochrome CRT-Computermonitore, die durch das Abfeuern von Elektronenstrahlen funktionieren und der in frühen CRTs verwendete Leuchtstoff war grün. Da Text in Grün angezeigt wurde und der Rest des Bildschirms schwarz war, wurden diese Modelle häufig als Greenscreen

</ph>

Die anschließend eingeführten Farb-CRTs zeigten mehrere Farben mit roten, grünen und blauen Leuchtstoffen. Durch die gleichzeitige Aktivierung aller drei Phosphore wurden alle drei Leuchtmittel gleichzeitig aktiviert. Mit dem Aufkommen eines ausgefeilteren WYSIWYG Desktop-Publishing, dass das virtuelle Dokument einem physischen Blatt Papier ähneln sollte.

</ph>

Hier begann dark-on-white als Designtrend, Dieser Trend wurde in den Early dokumentenbasiertes Web. Der erste Browser, WorldWideWeb (Denken Sie daran, CSS wurde noch nicht erfunden), Webseiten auf diese Weise angezeigt. Übrigens: der zweite Browser aller Zeiten, Der Zeilenmodus-Browser – ein Terminal-basierter Browser – war grün auf Dunkelheit. Heutzutage werden Webseiten und Web-Apps in der Regel mit dunklem Text gestaltet. auf hellem Hintergrund. Dies ist eine Grundannahme, die auch in User-Agent-Stylesheets hartcodiert ist, darunter: Chrome.

</ph>

Die Zeiten von CRTs sind lange vorbei. Inhalte werden immer mehr auf Mobilgeräten konsumiert und erstellt. mit hintergrundbeleuchtetem LCD oder energiesparenden AMOLED-Bildschirmen verwenden. Kleinere und besser transportierbare Computer, Tablets und Smartphones führten zu neuen Nutzungsmustern. Freizeitaktivitäten wie Surfen im Web, Programmieren für Spaß und High-End-Gaming kommt häufig außerhalb der Geschäftszeiten in gedämpften Umgebungen vor. Die Menschen haben sogar nachts Freude mit ihren Geräten im Bett. Je mehr Menschen ihr Gerät im Dunkeln verwenden, desto beliebter wird die Idee, zu den Wurzeln des Licht-im-Dunkel zurückzugehen.

Warum der dunkle Modus?

Dunkler Modus aus ästhetischen Gründen

Wenn Personen gefragt werden warum sie den dunklen Modus mögen oder wollen, ist die häufigste Antwort, „es ist angenehmer für die Augen“ gefolgt von „sie ist elegant und schön“ Apple in ihrer Entwicklerdokumentation zum dunklen Modus schreibt explizit: „Die Wahl, ob ein helles oder ein dunkles Erscheinungsbild ist für die meisten Nutzer ästhetisch und passt möglicherweise nicht zu den Lichtverhältnissen der Umgebung.“

</ph>

Dunkler Modus als Bedienungshilfe

Es gibt auch Nutzer, die den dunklen Modus tatsächlich benötigen und ihn als weitere Bedienungshilfe nutzen. z. B. Nutzende mit eingeschränktem Sehvermögen. Das früheste Vorhandensein eines solchen Bedienungshilfe-Tools, das ich finden konnte, Die Funktion CloseView von System 7 mit Ein/Aus-Schaltfläche für Schwarz auf Weiß und Weiß auf Schwarz. System 7 unterstützte zwar Farben, die Standardbenutzeroberfläche war jedoch weiterhin Schwarz-Weiß.

Diese inversionsbasierten Implementierungen zeigten ihre Schwächen, nachdem die Farbe eingeführt wurde. Nutzerstudien von Szpiro et al. zum Thema wie Menschen mit eingeschränktem Sehvermögen auf Geräte zugreifen zeigten, dass alle befragten Nutzer umgekehrte Bilder nicht mochten, aber dass viele helle Texte auf dunklem Hintergrund bevorzugen. Apple berücksichtigt diese Einstellung mit einer Funktion namens Smart Invertieren das die Farben auf dem Display vertauscht, außer für Bilder, Medien, und einige Apps verwenden dunkle Farbstile.

Eine spezielle Form von eingeschränktem Sehvermögen ist das Computer Vision-Syndrom, das auch als digitale Augenbelastung bekannt ist. definiert als „Kombination von Augen- und Sehproblemen, die mit der Nutzung von Computern verbunden sind. (z. B. Desktop-Computer, Laptops und Tablets) und andere elektronische Displays (z. B. Smartphones und elektronische Lesegeräte).“ Es wurde vorgeschlagen dass die Nutzung elektronischer Geräte durch Jugendliche, insbesondere nachts, erhöht das Risiko von kürzerer Schlafdauer, längere Latenz beim Einschlafen und eine erhöhte Schlafmangel. Außerdem ist die Belastung durch blaues Licht weit verbreitet. gemeldet an der Regulierung der Zirkadianer Rhythmus und den Schlafzyklus, und unregelmäßigen Lichtverhältnissen zu Schlafmangel führen, möglicherweise die Stimmung und die Leistung einer Aufgabe beeinflussen, Studie von Rosenfield. Sie können diese negativen Auswirkungen begrenzen, indem Sie die Farbtemperatur des Displays anpassen, um blaues Licht zu reduzieren durch Funktionen wie iOS Night Shift oder die Das Nachtlicht kann Ihnen dabei helfen, und vermeide helles oder unregelmäßiges Licht durch dunkle Designs oder den dunklen Modus.

Energieeinsparungen im dunklen Modus bei AMOLED-Displays

Der dunkle Modus spart ja bereits enorm Strom AMOLED-Displays. Android-Fallstudien mit Schwerpunkt auf beliebten Google-Apps wie YouTube, können Sie bis zu 60 % Energie sparen. Im folgenden Video finden Sie weitere Informationen zu diesen Fallstudien und den Energieeinsparungen pro App.

Dunklen Modus im Betriebssystem aktivieren

Jetzt wissen Sie, warum der dunkle Modus für viele Nutzer so wichtig ist. sehen wir uns an, wie Sie das unterstützen können.

</ph>

Betriebssysteme, die den dunklen Modus oder das dunkle Design unterstützen in der Regel irgendwo in den Einstellungen. Unter macOS X befindet sie sich in den Systemeinstellungen im Abschnitt Allgemein unter Darstellung (Screenshot). und unter Windows 10 im Bereich Colors (Farben) unter Select your color (Farbe auswählen) (Screenshot). Für Android Q finden Sie es unter Display über die Ein/Aus-Schaltfläche für das dunkle Design (Screenshot). und unter iOS 13 können Sie die Darstellung im Menü Display- und Helligkeit der Einstellungen (Screenshot).

Die Medienabfrage prefers-color-scheme

Eine letzte Theorie, bevor ich losgehe. Medienabfragen Autoren das Testen und Abfragen von Werten oder Funktionen des User-Agents oder Anzeigegeräts ermöglichen, unabhängig vom gerenderten Dokument. Sie werden in der CSS-Regel @media verwendet, um Stile bedingt auf ein Dokument anzuwenden. und in verschiedenen Kontexten und Sprachen wie HTML und JavaScript. Medienabfragen – Stufe 5 werden sogenannte Medienfunktionen mit Nutzerpräferenzen eingeführt, d. h. eine Möglichkeit, mit der Websites die bevorzugte Art der Anzeige von Inhalten eines Nutzers erkennen können.

Die prefers-color-scheme Medienfunktion wird verwendet, Der Nutzer hat für die Seite ein helles oder dunkles Farbdesign angefordert. Funktioniert mit den folgenden Werten:

• light: Gibt an, dass der Nutzer das System darüber informiert hat, dass er eine Seite mit hellem Design vorzieht (dunkler Text auf hellem Hintergrund)
• dark: Gibt an, dass der Nutzer das System darüber informiert hat, dass er eine Seite mit dunklem Design bevorzugt (heller Text auf dunklem Hintergrund).

Unterstützung des 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 unterstützt den dunklen Modus, indem geprüft wird, ob die Medienabfrage „prefers-color-scheme“ übereinstimmt. Ich gebe zwar keine Werte ein, prüfe aber nur, ob nur die Medienabfrage übereinstimmt.

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

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

Informationen zu den Einstellungen eines Nutzers zum Zeitpunkt der Anfrage erhalten

Header des Sec-CH-Prefers-Color-Scheme-Client-Hinweises können Websites die Farbschema-Einstellungen des Nutzers optional zum Zeitpunkt der Anfrage abrufen, ermöglicht es Servern, den richtigen CSS-Code einzufügen und so das Flashen eines falschen Farbdesigns zu vermeiden.

Der dunkle Modus in der Praxis

Sehen wir uns nun an, wie der dunkle Modus in der Praxis aussieht. Genau wie beim Highlander Im dunklen Modus kann es nur eine 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 zum Herunterladen von CSS im kritischen Rendering-Pfad. für einen Modus, den sie derzeit nicht nutzen. Um die Ladegeschwindigkeit zu optimieren, habe ich mein CSS für die Beispiel-App daher aufgeteilt. mit folgenden Empfehlungen aus der Praxis in drei Teile aufzuteilen, um nicht kritisches CSS aufzuschieben:

• style.css, die generische Regeln enthält, 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.

Ladestrategie

Die beiden letzten, light.css und dark.css, werden bedingt mit einer <link media>-Abfrage geladen. Zu Beginn nicht alle Browser unterstützen prefers-color-scheme (mit dem Muster oben erkennbar) die ich dynamisch handhabe, indem ich die light.css-Standarddatei über ein bedingt eingefügtes <link rel="stylesheet">-Element in einem kleinen Inline-Skript (Helligkeit ist eine willkürliche Wahl, ich hätte auch dunkel als Standard-Fallback-Option festlegen können.) Um zu vermeiden, dass Inhalte ohne Stil auftauchen, gehen Sie so vor: Ich blende 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 maximal So kann mein generisches style.css 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. Dieser sollte jedoch ausreichen, um die Gesamtidee zu vermitteln. Ich deklariere die beiden Variablen -⁠-⁠color und -⁠-⁠background-color die im Grunde ein dunkles Licht und ein Hell-auf-Dunkel-Basisdesign erzeugen.

/* 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. Wie sie in den CSS-Pseudoklasse :root: eine Selektor, der in HTML das <html>-Element darstellt und mit dem Selektor html identisch ist, außer dass seine Spezifität werden kaskadiert. Das dient mir zum Deklarieren globaler CSS-Variablen.

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

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

Im Codebeispiel oben ist Ihnen wahrscheinlich eine Property aufgefallen, color-scheme durch den durch Leerzeichen getrennten Wert light dark.

Dadurch wird dem Browser mitgeteilt, welche Farbdesigns von meiner App unterstützt werden und ermöglicht es, spezielle Varianten des User-Agent-Stylesheets zu aktivieren, Dies ist beispielsweise nützlich, damit der Browser Formularfelder rendern kann, mit dunklem Hintergrund und hellem Text passen Sie die Bildlaufleisten oder eine Markierungsfarbe, die auf Designs unterstützt wird, aktivieren. Die genauen Details von color-scheme sind angegeben in Modul zur CSS-Farbanpassung – Stufe 1.

Alles andere müssen Sie nur noch mit CSS-Variablen definieren. für wichtige Dinge auf meiner Website. Die semantische Anordnung von Stilen ist im dunklen Modus sehr hilfreich. Sie sollten beispielsweise statt -⁠-⁠highlight-yellow die Variable aufrufen, -⁠-⁠accent-color, als "gelb" wird im dunklen Modus möglicherweise nicht gelb dargestellt und umgekehrt. Unten sehen 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 Einbettung von Glitch sehen Sie das vollständige Beispiel, in dem die oben genannten Konzepte in die Praxis umgesetzt werden. Versuche, in den Einstellungen deines Betriebssystems den dunklen Modus zu wechseln. um zu sehen, wie die Seite reagiert.

Auswirkung wird geladen

Wenn Sie mit diesem Beispiel spielen, warum ich meine dark.css und light.css über Medienabfragen lade. Wechseln Sie in den dunklen Modus und aktualisieren Sie die Seite: werden die derzeit nicht übereinstimmenden Stylesheets zwar geladen, damit sie nie mit Ressourcen konkurrieren, die die Website zum jetzigen Zeitpunkt benötigt.

</ph>

</ph>

</ph>

Auf Änderungen im dunklen Modus reagieren

Wie bei allen Änderungen an Medienabfragen können auch Änderungen im dunklen Modus über JavaScript abonniert werden. Damit lässt sich beispielsweise der Wert Favicon einer Seite ändern oder die <meta name="theme-color"> mit dem die Farbe der URL-Leiste in Chrome festgelegt wird. Das vollständige Beispiel oben zeigt das in der Praxis. Um die Änderungen an Designfarbe und Favicon zu sehen, öffnen Sie das 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 kannst du die Farbe basierend auf Medienabfrage mit dem Attribut media des Designfarbelements meta Die das erste übereinstimmende Element ausgewählt. Sie können beispielsweise eine Farbe für den hellen und einen für den dunklen Modus. Beim Verfassen dieses Artikels diese in deinem Manifest zu definieren. Siehe w3c/manifest#975 GitHub .

<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 Entwicklertools emulieren

Das Farbschema des gesamten Betriebssystems zu wechseln, kann sehr schnell lästig sein. Mit den Chrome-Entwicklertools können Sie nun das bevorzugte Farbschema des Nutzers emulieren und zwar nur auf den aktuell sichtbaren Tab. Ö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 High-Level-API zur Steuerung von Chrome oder Chromium über die DevTools-Protokoll Mit dark-mode-screenshot bieten wir ein Puppeteer-Skript, 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 Ihr Testsuite für Continuous Integration (CI).

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. Um ein Leuchten und Bluten im dunklem Inhalt zu vermeiden, wähle ich ein etwas dunkleres Weiß. Ein Gerät 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 Kernthema geändert hat. dunkel zu dunkel sein, aber auch das Hero-Image sieht etwas anders aus. Meine Nutzerstudien hat gezeigt, dass die Mehrheit der Befragten werden im dunklen Modus etwas weniger lebendige und brillante Bilder bevorzugt. Ich bezeichne dies als Neufärbung.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Die Neufärbung meiner Bilder kann über einen CSS-Filter erfolgen. Ich verwende einen CSS-Selektor, der mit allen Bildern übereinstimmt, deren URL .svg nicht enthält. Ich kann Vektorgrafiken (Symbolen) eine andere Farbbehandlung geben. als meine Bilder (Fotos). Mehr dazu im nächsten Absatz. Wie Sie sehen, verwende ich wieder eine CSS-Variable, sodass ich den Filter später flexibel ändern kann.

Da die Neufärbung nur im dunklen Modus erforderlich ist, also wenn dark.css aktiv ist, Es gibt keine entsprechenden Regeln in light.css.

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

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

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

Nicht jeder ist gleich und jeder hat unterschiedliche Anforderungen an den dunklen Modus. Wenn Sie sich an die oben beschriebene Methode zur Neufärbung halten, Ich kann die Intensität in Graustufen ganz einfach zu einer Nutzervorliebe machen, über JavaScript ändern, und durch Festlegen des Werts 0% kann ich die Neufärbung auch vollständig deaktivieren. Hinweis: document.documentElement verweist auf das Stammelement des Dokuments, also dasselbe Element, das ich mit der :root CSS-Pseudoklasse.

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

Vektorgrafiken und Symbole umkehren

Für Vektorgrafiken, die in meinem Fall als Symbole verwendet werden, auf die ich über <img>-Elemente verweise, eine andere Methode zur Neufärbung. Die Forschung hat zwar gezeigt, dass die Umkehrfunktion von Fotos bei den meisten Symbolen sehr gut funktioniert. Auch hier verwende ich CSS-Variablen, um den Inversionsbetrag zu bestimmen. hat den Status „Reguläre“ und den Status :hover.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Wie Sie sehen, umkehre ich wieder nur Symbole in dark.css, aber nicht in light.css, und wie :hover eine unterschiedliche Inversionsintensität, sodass das Symbol Je nach ausgewähltem Modus etwas dunkler oder etwas heller.

/* 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 Inversions-SVG-Bilder statt Inversionsfiltern: können Sie die currentColor CSS-Keyword, 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. Das ist praktisch, wenn currentColor als Wert für die SVG-Datei verwendet wird. Attribute fill oder stroke verwendet er seinen Wert vom vererbten Wert der color-Eigenschaft. Und das Beste: Das funktioniert auch <svg><use href="…"></svg>, sodass Sie separate Ressourcen und „currentColor“ wird weiterhin im Kontext angewendet. Beachten Sie, dass dies nur für Inline- oder <use href="…">-SVGs funktioniert. nicht jedoch SVGs, die als src eines Bildes oder irgendwie über CSS referenziert werden. In der Demo unten sehen Sie, wie dies angewendet wird.

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

Reibungslose Übergänge zwischen Modi

Der Wechsel vom dunklen in den hellen Modus oder umgekehrt wird geglättet, dass sowohl color als auch background-color animierbare CSS-Properties. Zum Erstellen der Animation müssen Sie nur zwei transitions für die beiden Properties deklarieren. Das Beispiel unten veranschaulicht die Grundidee. Sie können sie 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 dunklen Funktionen

Aus Gründen der Ladeleistung empfehle ich grundsätzlich, nur mit prefers-color-scheme zu arbeiten. im Attribut media von <link>-Elementen (anstatt Inline-Elemente in Stylesheets) zu verwenden, Es gibt Situationen, in denen Sie direkt inline im HTML-Code mit prefers-color-scheme arbeiten möchten. Art Direction ist so eine Situation. Im Web befasst sich Art Direction mit dem visuellen Erscheinungsbild einer Seite und der visuellen Kommunikation. stimuliert Stimmungen, stellt Funktionen gegenüber Funktionen dar und spricht die Zielgruppe psychologisch an.

Beim dunklen Modus müssen die Designschaffenden entscheiden, welches das beste Bild in einem bestimmten Modus ist. und ob die Neueinfärbung von Bildern 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. oder wenn keine Präferenz vorliegt, in allen anderen Fällen standardmäßig die östliche Hemisphäre verwendet wird. 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 einer Opt-out-Funktion

Wie im Abschnitt Gründe für den dunklen Modus oben erwähnt, ist der dunkle Modus für die meisten Nutzenden eine ästhetische Wahl. Daher kann es sein, dass einige Nutzende die Benutzeroberfläche ihres Betriebssystems im Dunkeln, aber möchten ihre Webseiten so sehen, wie sie es gewohnt sind. Ein gutes Muster ist, dass Sie sich anfangs an das Signal halten, das der Browser sendet, prefers-color-scheme, um Nutzern dann 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, Sie können aber auch einfach ein vorgefertigtes benutzerdefiniertes Element (Webkomponente), das ich für diesen Zweck erstellt habe. Es heißt <dark-mode-toggle> und eine Ein/Aus-Schaltfläche für den dunklen Modus einen Designwechsler (Design: hell/dunkel) zu Ihrer Seite hinzu, den Sie vollständig anpassen können. In der folgenden Demo ist das Element in Aktion zu sehen. Sonstiges Beispiele oben) angezeigt.

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

</ph>

</ph> <ph type="x-smartling-placeholder">

Klicken oder tippen Sie in der Demo unten rechts oben auf die Steuerelemente für den dunklen Modus. Wenn Sie das Kontrollkästchen im dritten und vierten Steuerelement aktivieren, auch beim Aktualisieren der Seite gespeichert. So können Besucher ihr Betriebssystem im dunklen Modus belassen, aber im hellen Modus oder umgekehrt.

Ergebnisse

Die Arbeit mit dem dunklen Modus macht Spaß und eröffnet neue Designmöglichkeiten. Für einige Besucher kann es den Unterschied machen, dass sie ihre Website nicht verarbeiten können. und zufriedene Nutzende zu sein. Es gibt einige Stolperfallen und sorgfältige Tests sind unbedingt erforderlich. aber der dunkle Modus ist auf jeden Fall eine gute Gelegenheit, um zu zeigen, dass Ihnen alle Ihre Nutzer wichtig sind. Die in diesem Beitrag erwähnten Best Practices und Hilfskräfte Benutzerdefiniertes Element <dark-mode-toggle> sollten Sie darauf vertrauen können, einen faszinierenden dunklen Modus zu erstellen. Teilen Sie mir auf Twitter mit, was Sie erstellt haben und ob dieser Beitrag hilfreich war oder 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:

• Seite „Status der Chrome-Plattform“
• Chromium-Fehler
• Medienabfragen – Spezifikation Stufe 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
• CSS-Farbanpassungsmodul – Stufe 1 – Spezifikation
• CSS-WG-GitHub-Problem für das Meta-Tag und die CSS-Eigenschaft
• 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

Hintergrundforschungsartikel für diesen Beitrag:

• Was macht die „supported-color-schemes“ im dunklen Modus Wirklich? 🤔
• Es soll Dunkelheit sein! 🌚 Vielleicht...
• Neue Kolorierung für den dunklen Modus

Danksagungen

Die Medienfunktion prefers-color-scheme, die CSS-Eigenschaft color-scheme, und das zugehörige Meta-Tag sind die Implementierung von 👏 Rune Lillesveen. Rune ist außerdem Mitbearbeiter der Spezifikation CSS-Farbanpassungsmodul – Stufe 1. Ich danke Lukasz Zbylut 🙏 Rowan Merewood Chirag Desai und Rob Dodson für ihre gründlichen Bewertungen dieses Artikels. Die Ladestrategie ist die Idee von Jake Archibald. Emilio Cobos Álvarez hat mich auf die richtige prefers-color-scheme-Erkennungsmethode verwiesen. Der Tipp mit referenzierten SVGs und currentColor stammt von Timothy Hatcher. Ich bin auch den vielen anonymen Teilnehmenden der verschiedenen Nutzerstudien dankbar. die bei den Empfehlungen in diesem Artikel geholfen haben. Hero-Image von Nathan Anderson.