Grafik/Farbkonzept/Dark Mode

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
mittel
Schwierigkeitsgrad
30min
Vorausgesetztes Wissen
CSS
Media Queries


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?[Bearbeiten]

Meist wird ein Dark mode als zweites, austauschbares Theme angelegt. Dafür benötigt man kein zweites Stylesheet, sondern legt zwei Klassen mit Farbformatierungen fest, die dann das body-Element und seine Kinder stylen.

Die vermeintliche Lösung: ein toggle[Bearbeiten]

Setzen Sie auf Ihre Webseite ein Widget mit einem Button, mit dem die Nutzer mit classList.toggle zwischen den verschiedenen Klassen umschalten können. 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.

Trotzdem muss man an den IE denken, der kennt nämlich keine custom properties und würde damit jede Farbangabe ignorieren.

Der schwierige Weg[Bearbeiten]

Schritt 1: Einstellung im OS[Bearbeiten]

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

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

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[Bearbeiten]

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[Bearbeiten]

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

  • CSS 3.0
  • Chrome
  • Edge
  • Firefox
  • Leer
  • Opera
  • Safari

Details: 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[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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

  • Chrome
  • Edge
  • Leer
  • Opera
  • Safari

Details: 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[Bearbeiten]

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?[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

Ä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[Bearbeiten]

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[Bearbeiten]



Dark Mode im Design

  1. support.apple.com Dunkelmodus auf dem Mac verwenden
  2. CSSWG: Preferred Color Schemes
  3. MDN: color-scheme