Farbe/Dark Mode

Aus SELFHTML-Wiki
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 Firefox kann man Dark Mode in den Browsereinstellungen wählenn, was dann bei Bedarf die OS-Einstellung überschreibt.

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

Browserunterstützung
caniuse.com

Im <head> unserer Webseite können wir in einem meta-Element mit name="color-scheme" angeben, welche Farbschemata für diese Seite unterstützt werden sollen. Im content-Attribut dieses Metaelements werden die gewünschten Farbschemata aufgelistet (durch ein Leerzeichen getrennt). Die Reihenfolge ist unerheblich. Seit Januar 2022 funktioniert dieser Meta-Eintrag in allen modernen Browsern.

Angabe im head 
<meta name="color-scheme" content="dark light">

Die im Browser bekannten Farbschemanamen sind light und dark. Sie können auch andere Namen hinschreiben (das ist in der Spezifikation als Zukunftsoption zugelassen), der Browser fängt damit aber nichts an.

Die HTML Spezifikation besagt, dass diese Angabe dem Browser dabei helfen soll, für diese Seite einen passenden Hintergrund bereitzustellen, bevor alle Stylesheets geladen sind. Tatsächlich ist es so, dass der Browser die Systemfarben an den gewünschten Modus anpasst, wodurch HTML-Elemente ohne explizite Farbangabe, Formularelemente und Scrollbars gemäß den Systemeinstellungen hell oder dunkel dargestellt werden.

Wenn Sie im Meta-Tag nur ein Farbschema angeben, verwendet der Browser auch nur dieses Farbschema, ganz gleich, wie die Systemeinstellungen sind.

Beachten Sie: Die Angabe von <meta name="color-scheme" content="dark"> bedeutet nicht, dass der Browser dann automatisch die prefers-color-scheme:dark-Medienabfrage als erfüllt ansieht. Die Meta-Angabe betrifft ausschließlich die Systemfarbpalette.

color-scheme-Eigenschaft

Browserunterstützung
caniuse.com

Die color-scheme-Angabe im <meta>-Element gilt für die komplette Seite. Wenn Sie die Systemfarben für ein bestimmtes Element auf ein Farbschema festlegen möchten, dann können Sie für dieses Element die CSS-Eigenschaft color-scheme setzen.[3].

Auch hier gilt: Die color-scheme-Angabe betrifft nur die Systemfarben und hat keinen Einfluss auf die prefers-color-scheme Medienabfrage.

Außer den Werten dark und light können Sie hier auch noch normal angeben, womit Sie das Farbschema auf das Farbschema der Seite festlegen. Und Sie können ein bestimmtes Farbschema durch das Schlüsselwort only ergänzen, womit Sie dem Browser verbieten, die Farben dieses Elements zu verändern. Dadurch lässt sich beispielsweise der „Auto-Darkmode“ Modus von Chrome blockieren.

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 Toggle-Schalter zum Umschalten gebaut wird, können Sie auf Formulare/Auswahllisten#Toggle-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=100123“