How to rock the Darkmode (DE) 🌚

Ein Exkurs zur Einführung des Darkmodes auf deiner Webseite

Einleitung

Mit dem Dunkelmodus kannst du dich besser auf deine Arbeit konzentrieren, da deine Inhalte hervorgehoben werden, während Steuerelemente und Fenster in den Hintergrund treten.

Can I use prefers-color-scheme on https://caniuse.com/?search=prefers-color-scheme
Can I use prefers-color-scheme auf https://caniuse.com
Dunkelmodus aktivieren auf support.apple.com

Farbwechsel oder Einstellung

Switches

Hier ein Beispiel von Michael Richins von Codepen.

Automatisch

Beispiel App

Bild von Zach Lucero von Unsplash

Beispiel Navi

Ambient Light Sensor auf Caniuse

Statisch

Farbanpassung

body {   color: #222;   background: #fff;   font: 100% system-ui}a {   color: #0033cc}
@media (prefers-color-scheme: dark) {   body {      color: #eee;
background: #121212
} body a { color: #809fff }}
CodePen Prefers Color Scheme: Demo Use Case (Fork)

Farben

Ausschnitt der Farben von TailwindCSS
How to Design a Dark Theme Using Material (Google I/O’19)

Bilder

Inhaltsbilder

Dark Mode Colors

Kreation

Beispiel Content

Foto von The Free Birds auf Unsplash
<picture>
<source srcset="restaurant-night.jpg" media="(prefers-color-scheme: dark)">
<img src="restaurant-day.jpg" alt="Restaurant (...)">
</picture>

Zwischenstand

Favicons

Beispiel unbearbeitetes Logo in E-Mail-Signatar (Outlook)

Signatur in Emails

Beispiel unbearbeitetes Logo in E-Mail-Signatar (Outlook)

Lösungsansätze

Schriften

Bild von Daltonmaag
h1 {   font-weight: 400}@media (prefers-color-scheme: dark) {   h1 {      font-weight: 350   }}
Pen von Robin Rendle auf Css-Trics

Inhalt

Glossar

--

--

Runs on Mate, Coffee & Coding 🍵☕ 💻 / Developer 👨‍💻 / Dad 👨‍👦 “My interests include family, tech stuff, nerdish things…”

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jolution

Runs on Mate, Coffee & Coding 🍵☕ 💻 / Developer 👨‍💻 / Dad 👨‍👦 “My interests include family, tech stuff, nerdish things…”