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

CSS für Dark Mode

Themen auf dieser Seite

Überall wo Informationen auf Bildschirmen dargestellt werden, erfreut sich der „Dark Mode“ immer größerer Beliebtheit. Statt dunklem Text auf weißem Hintergrund, ist der Hintergrund dunkel und der Text hell. Einstellen lässt sich das in den Geräte-Einstellungen von Smartphones und Laptops. Da fragt man sich als Webdesigner doch: Wie kann ich das mit CSS umsetzen? Gibt es einen CSS Dark Mode Media Query?

Website Unterschied Dark Mode CSS

Wer sich jetzt fragt, wozu soll das gut sein? 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.

Ich habe mich gefragt, wie ich meinen Blog für Menschen, die auf ihrem Gerät eingestellt haben, dass Sie den Dark-Mode nutzen wollen, eine dunkle Version der Webseiten ausliefern kann.

Die CSS Befehle für die Nutzung des Dark Mode

@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;
  }
}

Dieser Media Query überschreibt deine CSS Einstellungen, wenn der User Dark Mode eingeschaltet hat.

weitere Infos zum CSS Query

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-schemehttps://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

Feedback willkommen

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne (1 Stimme(n), Durchschnitt: 5,00 von 5)
Loading...

Schreibe einen Kommentar

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

Diese Beiträge interessieren dich vielleicht auch