JV Webdesign BLOG

WordPress, Produktivität, Marketing, How-To
Dark Mode CSS

CSS Dark Mode Snippet – ja, es ist so einfach

Inhaltsangabe

Ü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 oder 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 Css Dark Mode

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

Wie der Query schon beschreibt, werden hier die CSS Einstellungen nur für diejenigen definiert, die auf Ihrem Gerät den Dark Mode eingeschlatet haben. Alle anderen sehen weiter die helle Version deiner Website.

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, p, ul{color: #d2d2d2}
 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 ü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 Dark Mode 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?

 

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. Erforderliche Felder sind mit * markiert

Newsletter abonnieren

Diese Beiträge interessieren dich vielleicht auch

Diese Website nutzt, wie in meinen Datenschutzhinweisen beschrieben, teilweise technisch erforderliche Cookies - keine Tracking- oder Werbe-Cookies.