WordPress, SEO, Security, PageSpeed, CSS, Arbeitsabläufe

Dark Mode CSS
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp
Share on email

Dark Mode mit CSS – ja, es ist so einfach

Themen auf dieser Seite

Überall wo Informationen auf Bildschirmen dargestellt werden, erfreut sich der „Dark Mode“ immer größerer Beliebtheit. In den Geräte-Einstellungen von Smartphones und Laptops, kannst du einstellen, ob du eine helle odere dunkle Benuzteroberfläche (Dark Mode) nutzen willst. Auch Websites können über CSS diese Einstllung abfragen. Zu sehen ist das u.a. auf den Websites von Facebook, FAZ mobile Version. Statt dunklem Text auf weißem Hintergrund, ist der Hintergrund dunkel und der Text hell. Wozu das gut sein soll?

Der Dark Mode bringt zwei große Vorteile:

  1. Es ist angenehmer fürs Auge, wenn man lange auf eine dunkle Fläche guckt, als wenn man lange auf eine hell, leuchtende Fläche guckt.
  2. Es spart Energie: gut für die Umwelt, gut für die Akkulaufzeit von mobilen Geräten.

Da fragt man sich als Webdesigner doch: Wie kann ich das mit CSS umsetzen? Gibt es einen CSS Dark Mode Media Query? Türlich! 🙂

Website Unterschied Dark Mode CSS

CSS media query „prefers-color-scheme: dark“

Kopiere dieses Snippet ganz unten in dein Stylesheet und passe dann die verschiedenen Elemente deinere Website farblich an. Versuche grelle Töne und reines Weiß zu vermeiden. (Ich weiß, da muss ich auf meinem Blog noch etwas fein-justieren.)

@media (prefers-color-scheme: dark) {
 html, body {background: #000}
 h1, h2, h3, h4 {color: #fff}
 img {
    opacity: .75;
    transition: opacity .5s ease-in-out;
  }
 img:hover {
    opacity: 1;
  }
}

iphone dark modeDark Mode Einstellungen an deinem Gerät

Beim iPhone und iPad kannst du den Dark Mode oder Dunkelmodus über die Helligkeits-Anzeige an- und ausschalten. Dazu einfach lange auf den Helligkeits-Balken drücken.

Beim Macbook oder Mac findest du das Feature untere Einstellungen > Allgemein > Erscheinungsbild = Dunkel.

Bei Android und Windows Geräten müsst ihr Google fragen. Da kenne ich mich nicht aus.

Weitere Infos zum CSS Query

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

Und?

Was hältst du von dieser Möglichkeit? Wirst du es auf deiner Website einsetzen?

 

Teile das mit deinen Kollegen

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp
Share on email

Kommentare

2 Antworten

  1. Ich nutze schon sehr lange den Dark Mode auf MacBook, iMac, iPhone und iPad (oh man, ich hab ein Apple Problem … warum sind die Airpods weiß???). Ich liebe denn Dark Mode (außer in Outlook). Ich werde mir das einmal für meine Website überlegen. Könnte mir Orange richtig cool wirken. Danke für den Input!

    1. Apple Kopfhörer sind weiß, weil damals, als die iPods auf den Markt kamen, niemand sonst weiße Kopfhörer verkauft hat. Genau wie der Apfel auf der Rückseite der Geräte, ist es ein für andere sichtbares Markensymbol. Damit habe ich mich nun offiziell auch als Angehörige des Apple-Kults geoutet 😉

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Beiträge interessieren dich vielleicht auch