How to Customize Light / Dark Theme With CSS Media Query- Introducing prefers-color-scheme

Nowadays, Light/Dark mode** has become a widely adopted appearance setting in most devices/applications, users can easily trigger the Light/Dark mode from system level.

** Except to apply a fixed setting, some OS/applications also allow the user to choose “Auto” mode in the setting, which will automatically adjust the appearance from light to dark throughout the day by a schedule.

What is Light mode?

Light mode is the traditional display mode in operating system since early days. It usually refers to the display which is showing dark text on a light background.

Most of the time, if users never specify their preferred color mode as Dark or Auto, Light mode will be selected as default.

What is Dark Mode?

If we take iOS as an example, selecting Dark theme will change the overall display such as toolbars, browser, wallpaper etc. to dark color.

Users can choose Light/Dark display based on their personal preference. Sometimes, it can be used for accessibility needs. Besides, during a low light environment, enabling dark mode can also help reduce eye-straining.

Dark/Light Mode on CSS

/*for dark theme*/
@media (prefers-color-scheme: dark) {
  container{
   color: white;
   background: black;
  }
  nav{
   color: #fefefe;
   background: #121212;
  }
}

/*for light theme*/
@media (prefers-color-scheme: light) {
  container{
     color: #051111;
     background: #dadada;
  }
  nav{
   color: black;
   background: lightblue;
  }
}

Dark/Light Mode on HTML Image

Other than customizing Light/Dark mode at CSS level, sometimes, you may need to customize images at HTML level to suit the background display.

For instance, if you have a dark color logo displayed on a white background in Light mode, when switching over to Dark mode, the logo needs to be changed to a brighter version to make it visible.

HTML:

<picture>
  <source srcset="pic-light.jpg" media="(prefers-color-scheme: light)" />
  <source srcset="pic-dark.jpg" media="(prefers-color-scheme: dark)" />
  <img src="pic-light.jpg />
</picture>

Browser Compatibility for prefers-color-scheme

Desktop	Mobile
Chrome 76 Edge 79 Safari 12.1 Firefox 67 Opera 62 Internet Explorer	Chrome Android 76 WebView Android 76 iOS Safari 13 Firefox Android 67 Opera Android 54 Samsung Internet 14.2

Summary

In my experience, designing a web page in dark mode is not only about switching the text and background color over to an inverted color scheme. It’s also about the look and feel of the overall design. For example, you may also consider:

• Adjust images’ brightness and saturation to ensure the image doesn’t distract from its background
• Adjust font to a better readable size in a dark mode design

Since prefer-color-scheme has been rolled out for years and has been working well with most modern browsers, having your website present in user’s preferred mode could help increase the average time user spent on your web page.