Dark modes with CSS

– Posted in: Article, macOS, media queries, Web Design

With the introduction of dark mode in macOS, Safari Technology Preview 68 has released a new feature called,prefers-color-scheme which lets us detect whether the user has dark mode enabled with a media query.

That’s right. If this becomes a little bit more supported in other browsers, then we might potentially soon have a way to toggle on night modes with a few lines of CSS!

Recently Mark Otto described how we can start using prefers-color-scheme today in order to create themes that dynamically adjust to the new user setting. And the neat thing about this post is that Mark sort of frames it as an accessibility issue and shows how he uses it on his own website to adjust images so that they’re not too bright for the user:

CSS

@media (prefers-color-scheme: dark) {
  img {
    opacity: .75;
    transition: opacity .5s ease-in-out;
  }
  img:hover {
    opacity: 1;
  }
}

In the code above, Mark detects whether the user has dark mode enabled with the media query and then makes the images darker so that they match a dark background. This reminds me of an excellent post by Marcin Wichary where he explores a similar technique and goes one step further by adding all sorts of filters to make sure they have a much higher contrast.

Andy Clarke also wrote up some thoughts about how to take this fancy new CSS feature and how we might apply a dark theme across our website. He describes how to pick colors so our light/dark themes are consistent in terms of branding and how we might want to use a lighter font-weight for darker backgrounds. He writes:

Original article published by Robin Rendle. Click the link below to continue reading.

Continue reading article...

0 Comments… add one

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.