Dark Mode einfangen

web,css,html,tipps&tricks

Erstellt: 29.06.2021 Lesedauer 5 - 6 Min.

Im abgedunkelten Büro sind helle Fensterhintergründe anstrengend. Das lässt sich mit dem „Dark Mode“ entschärfen. Je nach Browser und Betriebssystem wird diese Systemeinstellung auf Webseiten übetragen.

Wer für seine Webseite sehr detaillierte Format-Einstellungen gemacht hat, wird davon kaum etwas mitbekommen. Wer dagegen lediglich Rahmenbedingungen vorgibt, innerhalb derer die Standardeinstellungen des Browsers angewandt werden, sollte sich seine Webseiten im „Dunkel-Modus“ ansehen: das Resultat könnte überraschen.

Von mir gestaltete Seiten sind üblicherweise „durchdefiniert“. Der verwendete Farbmodus des Betriebssystems hat keinen Einfluss. Das ist durchaus gewollt, es stellt definierte, lesbare Rahmenbedingungen sicher. Meine üblichen „hellen“ Designs haben mich in aktuell tendeziell dunkler Umgebung geblendet. Deshalb habe ich mir die Erfordernisse für Farbeinstellungen abhängig vom Betriebssystem-Modus angesehen.

Alle nachfolgenden Hinweise sind zwar in gewisser Weise „allgemeingültig“, doch sind die dabei behandelten Effekte solche, die in meinen Layouts aufgetreten sind. Das wird mit Sicherheit auf anderen Seiten „anders“ sein, mit den hier gesammelten Beobachtungen wird die Lösungssuche – eventuell – einfacher.

Das Offensichtliche: Farben

Hell → Dunkel. Das scheint auf den ersten Blick trivial. Farben im Style-Sheet raussuchen und Modus-abhängig andere nehmen. Das ist zwar der Weg, doch es gibt Stolpersteine. Wenn das Stylesheet in den Standards auf „Hell“ definiert ist, lässt sich ganz am Ende ein Eintrag machen, der die Farben für das „dunkle“ Farbschema einstellt.

@media ⟨prefers-color-scheme: dark⟩ {
 → hier die Farbdefinitionen für den „dark mode“
 …
 .content img {filter: brightness⟨.8⟩ contrast⟨1.2⟩;}
 …
}

Bei der Farbe ist ein schlichtes „Invertieren“ keine sinnvolle Lösung. Neben zu geringem Kontrast kann es zu hohen geben oder Farben, die keinen Bezug mehr zum ursprünglichen Farbkonzept haben. Von „gesetzten“ Farben, z.B. von einem Logo, ganz abgesehen.

Es ist zweckmäßig, weder „ganz schwarz“ noch „ganz weiß“ im dunklen Modus zu verwenden. Knapp darunter sieht harmonischer aus.

Damit die für ein helles Design erstellten Bilder keine „Scheinwerfer“ im dunklen Layout sind, kann ein Filter für die Helligkeit und den Kontrast zweckmäßig sein (s.o.). Im Beispiel werden lediglich Bilder im Fließtext („.content“) abgedunkelt. Das Kopf-Logo bleibt in den Original-Farben. Ein Filter kann eventuell auf Farben angewandt werden, die zwar heller werden, in der Tönung jedoch gleich bleiben sollen.

Mehrere Filter können zu Wechselwirkungen führen, wenn sie in verschachtelten Strukturen mehrfach wirken.

Die Herausforderung besteht primär darin, dass die Seite sowohl als auch „ähnlich“ aussieht.

Hintergrundbilder

Wird auf der Webseite ein Hintergrundbild verwendet, führen unbehandelte Farbeinstellungen durch die Automatismen der Browser zum „Fiasko“. Ein helles Hintergrundbild mit heller Schrift ist wenig zielführend.

Wurde das Bild via CSS background an den HTML-Tag geknüpft, wird – warum auch immer – background:none von Chrome-basierten Browsern und Firefox ignoriert (Stand: 30.06.2021). Hier kann eine dunkle Variante des Hintergrunds abhelfen. Denn „austauschen“ der Bilder klappt:

@media ⟨prefers-color-scheme: light⟩ {
 html{background-color:#fdfdfd;color:#111;background:url⟨helles-bild.webp⟩ no-repeat center center fixed;background-size:cover;background-repeat:no-repeat;background-size:cover;}
}
@media ⟨prefers-color-scheme: dark⟩ {
 html{background-color:#111;color:#fdfdfd;background:url⟨dunkles-bild.webp⟩ no-repeat center center fixed;background-size:cover;background-repeat:no-repeat;background-size:cover;}
}
Damit es kein „flashen“ gibt, sollte dieser Eintrag frühestmöglich in der CSS-Datei stehen.

Veränderte Proportionen

»Scharz macht dick.« Auf einem schwarzen Hintergrund sehen die Schriften „fetter“ aus. Das kann bei Fließtext oder kleiner Schrift optisch unschön wirken, was oft mit schlechterer Lesbarkeit verbunden ist.

„Variable Fonts“
sind hierfür interessant. Sie haben keine fixen Strichstärken. Damit lassen sich aus einem Font variable Strichstärken generieren, für die sonst jeweils ein Font bereit gestellt werden müsste.
Je nach Font kann mit „variblen“ Fonts ein geringeres Ladevolumen als mit einem Sortiment der erforderlichen Schnitt erreicht werden. Dazu erspart es die entpsrechende Anzahl Dateioperationen.

Variable Fonts nutzen

Das ist „relativ neu“ (seit ca. 2017), daher widersprechen sich einige Angaben, wie es am cleversten funktioniert. Nachfolgend die hier bei BUOA! verwendete Variante.

AufgabeMaßnahme
(1) Font-Laden
                                         
Zum vorhandenen Font den (oder möglichst ähnlichen) variablen Font suchen und (wie die „festen“ Fonts) lokal vorhalten1.
(2) FontauswahlDamit ältere Browser die Seite noch anzeigen können, sollten „normale“ Fonts angeboten werden, die vom Browser – wenn er es kann – durch die variablen Fonts überschrieben werden.
(3) Probleme vermeidenEigentlich soll die Verwendung von bold oder font-weight wie gewohnt funktionieren. Damit es definitiv funktioniert, sollten alle Fonts, die mit Schriftstärkenänderung arbeiten, einen entsprechenden Zusatz font-variation-settings:"wght" 400; erhalten, zusätzlich zu den bisherigen Angaben. Der Eintrag muss (CSS konform) nach den Standard-Einträgen erfolgen.

(1) Font laden

@font-face {font-family: 'Variabel';font-style:normal;text-rendering:optimizeLegibility; src: url⟨Schriftart-variabel.woff2⟩ format⟨'woff2'⟩;font-weight: 200 800;font-display: auto;}
@font-face {font-family: 'Variabel';font-style:italic;text-rendering:optimizeLegibility; src: url⟨Schriftart-variabel-kursiv.woff2⟩ format⟨'woff2'⟩;font-weight: 50 800;font-display: auto;}
@font-face{font-family:'Fest';font-style:normal;font-weight:400;font-display:swap;text-rendering:optimizeLegibility;src:url⟨Schriftart-regular.woff2⟩  format⟨'woff2'⟩,url⟨Schriftart-regular.woff⟩ format⟨'woff'⟩}
@font-face{font-family:'Fest';font-style:bold;font-weight:700;font-display:swap;text-rendering:optimizeLegibility;src:url⟨Schriftart-fett.woff2⟩ format⟨'woff2'⟩,url⟨Schriftart-fett.woff⟩ format⟨'woff'⟩}
@font-face{font-family:'Fest';font-style:italic;font-weight:400;font-display:swap;text-rendering:optimizeLegibility;src:url⟨Schriftart-italic.woff2⟩ format⟨'woff2'⟩,url⟨Schriftart-italic.woff⟩ format⟨'woff'⟩}
@font-face{font-family:'Fest';font-style:italic;font-weight:700;font-display:swap;text-rendering:optimizeLegibility;src:url⟨Schriftart-italic-fett.woff2⟩ format⟨'woff2'⟩,url⟨Schriftart-italic-fett.woff⟩ format⟨'woff'⟩}
@font-face{font-family:'Mono';font-style:normal;font-display:auto;text-rendering:optimizeLegibility;src:url⟨Code-Font.woff2⟩ format⟨'woff2'⟩,url⟨Code-Font.woff⟩ format⟨'woff'⟩}

Theoretisch könnten Variable Fonts sowohl „normal“ als auch „kursiv“ enthalten. Frei verfügbare Fonts mit diesen Fähigkeiten, die „webseitentauglich“ sind (lesbarkeit, etc.), fehlen momentan noch. Daher sind zwei Schriften erforderlich.

Anschließend werden die „festen“ Schriftarten definiert. Der Zugriff wird schlicht über den Familiennamen der Schrift geregelt (s. 2).

(2) Fontauswahl

html {font-family:[Normaler Font], serif|sans-serif;}
@supports ⟨font-variation-settings: normal⟩
{
  html {font-family: Variabel, [serif|sans-serif];
}

Diesen Eintrag frühestmöglich im Style-Sheet platzieren, am besten vor den Farbschema-Wahl, aber nach der Font-Zuordnung. Der Browser nimmt – wenn er kann – die Variablen Schriften, die „festen“ werden ignoriert.

(3) Probleme vermeiden

…
h1,h2,h3,h4,h5,h6{color:#333;font-weight:bold;font-variation-settings:"wght" 700;padding-bottom:0.2em;padding-top:0.5em}
strong{font-weight:bold;font-variation-settings:"wght" 650;}
a{color:#369;text-decoration:none;font-weight:bold;font-variation-settings: "wght" 500;}
…

Zwar kann mit font-weight theoretisch ebenfalls nuanciert gearbeitet werden, doch erfordert das den jeweiligen Font. Was bisher mit bold → „fett“ gemacht wurde, kann ohne Zusatzaufwand feiner abgestuft werden.

Fazit

Das Ausbaldowern, wie es geht, hat – wie immer – am längsten gedauert. Was daran liegt, dass es – wie immer – unterschiedlichste Glaubensbekenntnisse gibt, aus denen die Spreu vom Weizen getrennt werden muss. Das hier Niedergelegte „funktioniert“, wird mit Stand heute (s. Datum oben) noch nachgebessert werden müssen. Was daran liegt, dass das Thema „variable Fonts; sich noch im Fluss befindet.

Bei der Anpassung von BUOA! auf den „Dark Mode“ habe ich mich bewusst dafür entschieden, keinen Schalter vorzusehen, mit dem Besucher sich die Darstellung innerhalb der Webseite umschalten können. Soweit es der Browser unterstützt, erfolgt die Umschaltung mit der Systemeinstellung (in Windows).

­P.S.
Die Angabe von Quellen fehlt aus einem schlichten Grund: Irgendwann habe ich den Überblick verloren, was ich von welcher Seite in welchem Umfang rein- oder wieder rausgenommen habe. Eine erschöpfende Quelle zu den gestreiften Themen ist z.B. hier verfügbar.
Das Bild stammt von Pixabay.

1Wenn ein frei nutzbarer Font verwendet wird, der als TTF-Datei vorliegt, kann er in das erforderliche WOFF2-Format konvertiert werden.