Dark Mode

Aus SELFHTML-Wiki
(Weitergeleitet von Farbe/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.

Umfragen zufolge nutzen inzwischen die meisten Benutzer internetfähiger Geräte diese im Dark Mode.

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?

Eine Möglichkeit ist es, den Dark mode als zweites, austauschbares Theme anzulegen. Der Aufwand dafür ist aber eigentlich zu hoch. CSS bietet mittlerweile Möglichkeiten, in einem Stylesheet zwei Farbpaletten vorzusehen. Die Voraussetzung ist natürlich, dass du deine Farbangaben konsequent darauf ausrichten.

Eine reine Farbumkehr schwarz-weiß auf weiß-schwarz ist dabei nicht hinreichend. Das Farbschema einer Webseite hat zumeist mehr als 2 Farben. Empfehlenswert ist es, mit Hilfe von custom properties eine Farbpalette festzulegen.

Die vermeintliche Lösung: ein toggle

Setze auf deine Webseite ein Widget mit einem Button, mit dem die Nutzer zwischen hellem und dunklem Modus wählen können. Beispielsweise könnte dieses Widget mit classList.toggle bestimmte Klassen umschalten, die dann im Stylesheet die Farbgebung für das body-Element und seine Kinder beeinflussen. In einem weiteren Schritt kannst du die gewählten Einstellungen mit localStorage oder mit einem Cookie speichern.

Beachte: Genau wie Schriftvergrößerungs-Buttons nichts auf Webseiten zu suchen haben, sollte auch die Umschaltung zwischen dunkel auf hell und hell auf dunkel dem vom Browser oder Betriebssystem überlassen werden, damit Nutzer einheitliche Bedienmöglichkeiten vorfinden. Alle modernen Betriebssysteme bieten diese Option, und Browser haben zumeist die Möglichkeit, für die Darstellung zwischen Systemstandard, Hell oder Dunkel auszuwählen.

Einstellung im OS

Alle Browser und Betriebssysteme ermöglichen es, in ihren Benutzereinstellungen Dark Mode auszuwählen:

Apple macOS 26

Wähle das Apple-Menü Apple logo black.svg > "Systemeinstellungen", klicke auf "Erscheinungsbild", und wähle eine der Optionen:

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

Dark-Mode-Apple.png

Microsoft Windows 11

Klickt mit der rechten Maustaste auf einen freien Bereich des Desktop und wählt den Eintrag Anpassen aus. Klickt links auf den Menüpunkt Personalisierung, dann rechts auf Farben. Dort bei "Modus auswählen" auf die Option Dunkel oder Benutzerdefiniert für detailliertere Einstellung.

Dark-Mode-Windows.png

Im Firefox kann man Dark Mode in den Browsereinstellungen wählen, was dann bei Bedarf die OS-Einstellung überschreibt.

Im Netz finden sich Anleitungen, wie man für Webseiten, die die Betriebssystem-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.

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 man die im OS getroffene Auswahl abfragen und dein CSS entsprechend anpassen kann.

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 */
}
Beachte: 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. Beachte 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

Moderne Websites orientieren sich zunächst an den Systemeinstellungen (prefers-color-scheme). Zusätzlich bieten viele Seiten einen Toggle-Schalter, mit dem Nutzerinnen und Nutzer das Farbschema selbst wählen können.

Das fertige Beispiel „Ihr Anwalt“ enthält einen solchen Schalter.[3]

Siehe auch:

Quick-Fix: Farbumkehr

Ein Tauschen der Farbangaben für Text und Hintergrund ist eine Fleißarbeit, einfacher geht es mit einem rudimentären Filter, der unsere Farben invertiert.

Für ein sehr einfaches Projekt mit simpler Struktur kann diese schnelle Lösung bereits genügen.

Rudimentärer Dark Mode ansehen …
/* sehr einfache Variante: alles umdrehen, darin Bilder wieder zurück drehen */
@media screen and (prefers-color-scheme: dark) {
  html { filter: invert() hue-rotate(180deg); }
  img,
  video { filter: invert() hue-rotate(180deg); }
}

Der invert-Filter ändert nicht nur dunkel zu hell und umgekehrt, sondern verschiebt die Farben in Richtung ihrer Komplementärfarben. Das kann grob rückgängig gemacht werden mit dem Filter hue-rotate(180deg).

"Rastergrafik mit Blüte, die durch den Invertierungsfilter falsche Farbtöne enthält." Leider ist das Ergebnis nicht farbtreu, hier auffällig bei der gelben Blüte, Details dazu im SELF-Forum. Da die Bilder so nicht farbgetreu sind, ist das eher ein Hack als eine Lösung!

color-scheme

Browserunterstützung
caniuse.com

Bisher haben wir uns nur um die Farben unserer eigenen Inhalte gekümmert. Der Browser selbst – also z. B. Formularfelder, Scrollbars oder Eingabefelder – bleibt dabei oft im hellen Standardstil. Das kann zu unschönen Mischungen führen.

Mit der CSS-Eigenschaft color-scheme teilen wir dem Browser mit, welche Farbschemata unsere Seite unterstützt:

color-scheme mit zwei Farbschemata ansehen …
:root {
  color-scheme: light dark;
}

Damit erlauben wir sowohl ein helles als auch ein dunkles Erscheinungsbild. Der Browser kann nun automatisch passende Varianten für eingebaute Elemente verwenden – etwa dunkle Formularfelder im Dark Mode.

Man kann den Browser auf ein Farbschema ohne Umschaltung festlegen:

dauerhaft helles Erscheinungsbild 
:root {
  color-scheme: light;
}

Wenn du color-scheme nicht setzt, ist der Defaultwert normal. Das bedeutet, dass das Dokument nicht darauf vorbereitet ist, zwischen Light- und Darkmode umzuschalten und der Browser sein Standardfarbschema verwenden soll (das dem Lightmode entsprechen sollte).

color-scheme im meta-Tag

Browserunterstützung
caniuse.com

Damit der Browser schon vor dem Laden des CSS weiß, dass unsere Seite den Dark Mode unterstützt, können wir zusätzlich ein entsprechendes <meta>-Tag im <head> setzen.

dunkler Hintergrund vor dem Laden 
<meta name="color-scheme" content="light dark">

In den meisten Fällen genügt es nicht, lediglich ein Farbschema festzulegen, damit ein Dokument korrekt im Darkmode dargestellt wird. Die color-scheme Einstellung wirkt nur auf einige Oberflächenelemente automatisch:

  • Die Oberfläche des <canvas>-Elements
  • Die Standardfarben von Scrollbars und anderem Interaktions-UI
  • Die Standardfarben von Form-Elementen (input, button, select, textarea)
  • Die Standardfarben anderer Oberflächenelemente, die der Browser erzeugt, wie z.B. die Unterstreichungen der Rechtschreibprüfung

Farbwechsel mit light-dark()

Damit eigene HTML-Elemente auf die color-scheme-Einstellung reagieren, muss man für alle Farbangaben, die vom Farbschema abhängig sein sollen, die light-dark()-Funktion verwenden. Mit dieser Funktion gibst du zwei Farben an, die erste gilt für das light-Schema, die zweite gilt für das dark-Schema.

light-dark() ohne media queries ansehen …
:root {
  color-scheme: light dark;
}
.scroll-demo {
  height: 33em;
  overflow: auto;
}
	
body { 
	background: light-dark(white, #111);
}

.blau { color: steelblue; }

.gruen { color: light-dark(darkgreen, #59E44F); }

.rot { color: light-dark(darkred, #FF93A9); }

Im Beispiel werden für Hintergrundfarben und einige Text-Farben die Farbangaben mit der light-dark()-Funktion festgelegt.

Wenn wie bei der h1.blau der Kontrast für beide Hintergründe ausreichend ist, reicht eine normale Farbangabe.

Beachte: Wenn du für dein Dokument beispielsweise color-scheme:light; festlegst, der Browser aber auf Darkmode eingestellt ist, dann werden die genannten automatischen Farbgebungen und die mit light-dark() gesetzten Farben den Lightmode verwenden. Die @media-Abfrage prefers-color-scheme:dark wird aber weiterhin zutreffen, weil sie den Browser-Modus abfragt und nicht die color-scheme Vorgabe.

Beispiel

Lass uns alles kombinieren und ein Anwendungsbeispiel 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 kannst du nun beliebig viele Werte definieren und wieder aufrufen. Dies wird von allen modernen Browsern verstanden. Trotzdem sollte man auch 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, kannst du 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.

Verwende 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 musst du auch bei Text den Kontrast ausbalancieren. Wenn du eine zu große Schrift verwendest, wirkt heller Text zu grell und man versucht sich intuitiv vom Bildschirm zu entfernen. Wenn du eine zu helle Schrift verwendest, überanstrengst du deine Augen, während du dich auf den Bildschirm zubewegst, um ihn genauer zu betrachten.

Balanciere 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.

Siehe auch

Unter den fertigen Layouts finden sich Beispiele für Webseiten im Dark Mode:

OnePager

Vorschau-01.png
9.2/10

Ein eleganter OnePager mit Scroll Snap

Perfekt geeignet für eine Web-Visitenkarte oder eine Einladung für ein Event!

Ihr Anwalt

Design-02-Vorschau.png
10/10

Aus dem Dark Mode-Tutorial

Eine farblich ansprechende Seite für eine kleine Firma, Kanzlei oder Privatperson mit Light und Dark Mode

Vom Entwurf zum Layout

Design03-Vorschau.png
10/10

Aus dem Einstieg in CSS-Tutorial

Aus einer einfachen „Mobile first!“-Seite wird auf großen Viewports ein attraktives Grid mit Zier-Elementen.

SportVerein

Design04-Vorschau.png
10/10

Diese grafisch ansprechende Seite eines Sportvereins ist die Ausgangslage für weitere Projekte.


Weblinks



Dark Mode im Design

  1. ↑ support.apple.com Dunkelmodus auf dem Mac verwenden
  2. ↑ CSSWG: Preferred Color Schemes
  3. ↑
    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);
    }
}

Abgerufen am 2.05.2026
von "http://wiki.selfhtml.org/wiki/Dark_Mode"