Farbe/Dark Mode

Aus SELFHTML-Wiki
< Farbe(Weitergeleitet von Grafik/Farbkonzept/Dark Mode)
Wechseln zu: Navigation, Suche

Unter dem Dark Mode (englisch für dunklen Bildschirmmodus) versteht man eine Farbeinstellung mit dunklem Hintergrund und hellem Text, die weniger anstrengend für die Augen sein soll. Gerade nachts ist ein weniger greller Hintergrund lesefreundlicher.

Bei OLED-Displays, die hauptsächlich in höherwertigen Smart Phones verbaut werden, spart dies überdies Strom und steigert damit die Akku-Laufzeit.

Das folgende Tutorial soll einen Weg aufzeichnen, wie Nutzer bereits im Betriebssystem ihre Präferenzen angeben können und dies dann das Erscheinungsbild des Systems, aller Apps und auch der aufgerufenen Webseiten automatisch anpasst. Allerdings ist das Thema "Dark Mode" bei weitem nicht so einfach, wie es in Clickbait-Artikeln oft suggeriert wird.

Dark Mode in Webseiten einrichten?

Meist wird ein Dark mode als zweites, austauschbares Theme angelegt.

Die vermeintliche Lösung: ein toggle

Setzen Sie auf Ihre Webseite ein Widget mit einem Button, mit dem die Nutzer mit classList.toggle zwischen den verschiedenen Klassen umschalten können. Diese Klassen stylen dann das body-Element und seine Kinder. In einem weiteren Schritt könnten Sie die gewählten Einstellungen mit localStorage oder mit einem Cookie speichern.

Beachten Sie: Genau wie Schriftvergrößerungs-Buttons nichts auf Webseiten zu suchen haben, sollte auch die Umschaltung zwischen dunkel auf hell und hell auf dunkel vom Browser oder Betriebssystem angeboten werden, damit Nutzer einheitliche Bedienmöglichkeiten vorfinden. Eine reine Farbumkehr schwarz-weiß auf weiß-schwarz ist nicht zielführend. Das Farbschema einer Webseite hat zumeist mehr als 2 Farben. Empfehlenswert ist es, eine Farbpalette mit custom properties festzulegen.

Der schwierige Weg

Schritt 1: Einstellung im OS

Verschiedene Browser und Betriebssysteme haben den Dark Mode implementiert:

Apple

Wähle das Apple-Menü Apple logo black.svg > "Systemeinstellungen", klicke auf "Allgemein", und wähle oben im Fenster eine der Optionen für "Erscheinungsbild" aus:

  • Hell: Verwende das helle Erscheinungsbild.
  • Dunkel: Verwende das dunkle Erscheinungsbild.
  • Automatisch: Verwende automatisch das helle Erscheinungsbild während des Tages und das dunkle Erscheinungsbild nachts.[1]

Dark-Mode-Apple.png

Windows 10

Klickt mit der rechten Maustaste auf einen freien Bereich des Desktop und wählt den Eintrag Anpassen aus. Klickt links auf den Menüpunkt Farben. Scrollt nach unten und aktiviert unter Standard-App-Modus auswählen die Option Dunkel.

Dark-Mode-Windows.png


Windows 11

Einstellungen > Personalisierung > Farben > Modus auswählen

Im Netz finden sich Anleitungen, wie man dies bei Browsern, die die OS-Einstellungen nicht automatisch übernehmen, individuell einstellen kann.

So gibt es im Chrome Web Store eine Dark Mode Extension, die das CSS der Webseiten automatisch in den Dark Mode versetzt. Seiten, die nicht verändert werden sollen, können in einer whitelist notiert werden.

Schritt 2: Umsetzung im CSS

Diese preferred color schemes (deutsch: Farbschemata) werden im Normalfall von den Browsern für ihre Navigationsleisten und Einstellungsseiten, sowie für die Systemfarben verwendet. Des Weiteren können sie auch im CSS aufgegriffen werden.

Abfrage der Systemeinstellungen mit CSS

CSS kennt eine prefers-color-scheme-Medienabfrage, mit der Sie die im OS getroffene Auswahl abfragen und Ihr CSS entsprechend anpassen können.

Browserunterstützung
caniuse.com
  • no-preference (keine Präferenz)
  • dark (dunkles Farbschema)
  • light (helles Farbschema)


Medienabfrage mit prefers-color-scheme 
@media (prefers-color-scheme: dark) {
  /* dunkles Farbschema für die Nacht */
  body {
    color: white;
    background: black;
  }


  a {
    color: skyblue;
  }
}


@media (prefers-color-scheme: light) {
  /* helles Farbschema für den Tag */
}
Beachten Sie: Die Farbschemata "Hell" und "Dunkel" repräsentieren keine exakte Farbpalette (wie z. B. Schwarz-Weiß), sondern einen Bereich möglicher Paletten. Um bestimmte Farben zu garantieren, müssen die Autoren diese Farben selbst angeben. Beachten Sie auch, dass die Kombination von Standard- oder Systemfarben mit vom Autor angegebenen Farben keinen bestimmten Kontrast garantieren kann; es kann notwendig sein, sowohl Vorder- als auch Hintergrundfarben zusammen einzustellen, um die Lesbarkeit zu gewährleisten.[2]
Nutzerwahl

Aber an dieser Stelle zeigt sich eine signifikante Schwäche der @media-Syntax: Es ist nicht möglich, eine Media-Abfrage mit einer Klassenabfrage zu kombinieren.

CSS Media Level 5 baut da zwar was mit @custom-media und einem JavaScript API, aber ich frage mich, ob man nicht für den Fall "prefers-color-scheme PLUS user-widget" generell auf JavaScript setzen sollte.

Also:

einfacher Fall: reine CSS Steuerung.

Komplizierter Fall: User kann mit eigenem Widget eingreifen.

kombinierte Abfrage von prefers-color-scheme und Nutzerauswahl 
const toggle = document.getElementById('toggle-input');

function updateUI(theme) {
    toggle.checked = theme === 'light';
}

toggle.addEventListener('click', () => {
    const theme = toggle.checked ? 'light' : 'dark';
    setTheme(theme, true);
    updateUI(theme);
});

const osPreference = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
const preferredTheme = localStorage.getItem('preferred-theme') || osPreference;

setTheme(preferredTheme, false);
updateUI(preferredTheme);


function setTheme(theme, persist = false) {
    const on = theme;
    const off = theme === 'light' ? 'dark' : 'light'

    const htmlEl = document.documentElement;
    htmlEl.classList.add(on);
    htmlEl.classList.remove(off);

    if (persist) {
        localStorage.setItem('preferred-theme', theme);
    }
}

Angabe eines Farbschemas im Meta-Tag

In einem meta-Element im head unserer Webseite können wir anzeigen, welche Farbschemata vom CSS unterstützt werden:

Beispiel 
<meta name="color-scheme" content="dark light">

Diese Angaben helfen den Standardeinstellungen der Browser, UI-Elemente wie buttons und Eingabefelder automatisch an Betriebssystemeinstellungen anzupassen und damit einen "DarkMode für Arme" zu bekommen.

Beachten Sie: Dies funktioniert nur Webkit-only, d.h. nicht im Firefox und im IE natürlich überhaupt nicht. Die Spec ist in einem ganz frühen Draft-Stadium und kann sich noch deutlich ändern.
Hinweis:
Man kann mit dem CSS Property auch Schabernack treiben: 
@media (prefers-color-scheme: light) { :root { color-scheme:dark; } }
@media (prefers-color-scheme: dark) { :root { color-scheme:light; } }
color-scheme auf :root (bzw. dem html Element) überschreibt die Einstellung aus der meta-Angabe. Aber eine effiziente Verwaltung von Farbschemata ermöglicht das immer noch nicht; ich sehe keinen Weg, wie man ein vom Benutzer umschaltbares Farbschema ohne Verwendung von JavaScript implementieren kann, ohne die Farben doppelt notieren zu müssen.

color-scheme-Eigenschaft

Mit der color-scheme-Eigenschaft kann jedes Element gekennzeichnet werden, ob es in einem bestimmten Farbschema gerendert werden soll.[3].

Browserunterstützung
caniuse.com
Beachten Sie: Weder die Browserunterstützung noch die Formulierungen in der Spec, die mögliche zukünftige Änderungen nicht ausschließen, lassen einen Einsatz zum heutigen Zeitpunkt zu.

Beispiel

Wie oben bereits erwähnt, besteht ein Darktheme nicht nur aus einer Invertierung der Farben (Probieren Sie einmal * {filter: invert(1);} aus!).

Lassen Sie uns alles kombinieren und ein Anwendungsbespiel erstellen, das:

  • automatisch ein dunkles oder helles Theme basierend auf den Systemeinstellungen lädt
  • dem Benutzer erlaubt, seine Systempräferenz manuell zu überschreiben
  • das bevorzugte Thema des Benutzers beim Neuladen der Seite beibehält

zwei Themes oder sogar drei?

Das folgende Beispiel basiert auf einem der fertigen Layouts aus dem Jahre 2014. Damals wurde jeder Farbwert einzeln festgelegt. Mit currentColor konnte die Textfarbe bei Navigationen für den Hintergrund verwendet werden und sparte so eine Festlegung.

Mit custom properties können Sie nun beiebig viele Werte definieren und wieder aufrufen. Dies wird von allen modernen Browsern verstanden. Trotzdem sollten Sie für den IE9-11 und auch ältere Versionen der Evergreen-Browser eine konventionelle Variante zur Verfügung stellen. Deshalb werden im Stylesheet zuerst HEX-Werte angegeben, die dann durch custom properties überschrieben werden:

Festlegungen für IE9-11, ein light theme und ein dark theme 
/* Farbfestlegungen nur als Fallback für IE9-11
   custom properties für alle anderen!            */
body {
  color: darkRed; /* wird als currentColor für die Akzentfarbe verwendet. */
  color: var(--accent1-color);
  background-color: #fff;
  background-color: var(--background-color);
}

p, ol, ul, dl {
	color: #333;
  color: var(--font-color);
}

:root {
  --background-color: #fff;
  --background2-color: #ccc;	
  --background3-color: #ccc;		
  --accent1-color: darkred;
  --accent2-color: orange;
  --accent3-color: #fede9e;
  --font-color: #333;
  --font2-color: #666;
  --link-color: darkred;		
}

:root.dark {
  --background-color: #666;
  --background2-color: #666;	
  --background3-color: #ccc;		
  --accent1-color: darkred;
  --accent2-color: orange;	
  --accent3-color: #fede9e;	
  --font-color: #fff;
  --font2-color: orange;		
  --link-color: orange;		
}

Screenshot

Wie der Flipflop-Schalter zum Toggeln gebaut wird, können Sie auf HTML/Tutorials/Formulare/Gestaltung_mit_CSS#FlipFlop-Schalter sehen.

Grafiken

Das picture-Element erlaubt es, unterschiedliche Bilder für light und dark mode zu laden:


unterschiedliche Bilder für light und dark mode 
<picture>
  <source srcset="tb-dark.webp" media="(prefers-color-scheme: dark)">
  <img src="tb-light.img" alt="">
<picture>

Dies wird nur in Ausnahmefälllen realisiert werden können. Nichtsdestotrotz mag es sinnvoll sein, die Helligkeit und den Kontrast von Bildern auf dunklen Hintergründen ein wenig zu verringern. Ein sehr helles Bild auf einem dunklen Hintergrund kann störend wirken, und das Dimmen des Bildes reduziert etwas von diesem starken Kontrast.

unterschiedliche Kontraste im dark mode 
/* Apply the filter directly on the body tag */
body.dark-theme img {
  filter: brightness(.8) contrast(1.2);
}


/* Or apply it via media query */
@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(.8) contrast(1.2);
  }
}

Schatten und Tiefe

Dark-Modus-Schatten sind knifflig. Wenn wir einfach einen dunklen Schatten mit hellen Farben invertieren, dann erhalten wir dieses komische Ding mit einem hellen Schatten auf einem dunklen Hintergrund... und das ist kein gutes Aussehen.

Es ist möglich, einen dunklen Schatten im dunklen Modus zu verwenden, aber die Hintergrundfarbe muss "hell" genug sein (z. B. ein dunkles Grau), um genügend Kontrast zu bieten, damit man den Schatten tatsächlich sehen kann.

Verwenden Sie die Deckkraft, um Tiefe zu vermitteln, wobei Bereiche mit hoher Deckkraft eine geringere Tiefe haben. Das heißt, dass Elemente, die eine größere Höhe haben, eine geringere Deckkraft haben sollten als Elemente, die in der Tiefe "näher" am Hintergrund sind. Verschiedene Farbtöne erzeugen unterschiedliche Wahrnehmungen von "Tiefe"

Typografie

Ähnlich wie bei Bildern müssen Sie auch bei Text den Kontrast ausbalancieren. Wenn Sie eine zu große Schrift verwenden, wirkt heller Text zu grell und Sie versuchen sich intuitiv vom Bildschirm zu entfernen. Wenn Sie eine zu helle Schrift verwenden, überanstrengen Sie Ihre Augen, während Sie sich auf den Bildschirm zubewegen, um ihn genauer zu betrachten.

Balancieren Sie Helligkeit und Schriftgröße so aus, dass Text auch im Dark Mode lesbar bleibt. Eine Erleichterung könnten schmalere Schriftschnitte sein:


unterschiedliche Schriftschnitte im dark mode 
body {
  font-weight: 400;
}

@media (prefers-color-scheme: dark) {
  body {
    font-weight: 300;
  }
}

Eine solche Angabe funktioniert aber nur, wenn der Variable Font auch wirklich in diesen Schriftschnitten verfügbar ist.

Fazit

Das komplette Beispiel können Sie unter den fertigen Layouts ausprobieren.


Eine Umsetzung auch für's Wiki und für das Forum mag interessant erscheinen, bietet jedoch noch einige Fallstricke, sodass wir dies eher als Aufgabe für die Zukunft sehen.

Weblinks



Dark Mode im Design

  1. ↑ support.apple.com Dunkelmodus auf dem Mac verwenden
  2. ↑ CSSWG: Preferred Color Schemes
  3. ↑ MDN: color-scheme
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Farbe/Dark_Mode&oldid=95342“