everything about web

A Comprehensive Guide to the World of Web Design & Development:

CSS, HTML, Performance, Web Design, and all Aspects of Front-End Development


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

From web development wise, you can use CSS to customize specifically how you want to present your web page in Light and Dark themes.

prefers-color-scheme is a CSS media query that allows developers to detect if the user has requested a light or dark color theme.

CSS propertyprefers-color-scheme
Attributesdark , light

prefers-color-scheme: dark:
If user’s setting is in Dark mode, browser will take CSS from this media query.

prefers-color-scheme: light:
If user’s setting is in Light mode, browser will take CSS from this media query.


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

/*for light theme*/
@media (prefers-color-scheme: light) {
     color: #051111;
     background: #dadada;
   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.

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


  <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 />

Browser Compatibility for prefers-color-scheme

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


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.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

If you found this article helpful and would like to show your support, you can buy me a coffee using the link below. Thanks a bunch!

Choose an amount


Or enter a custom amount


Thank you for your contribution!



CSS (27) css pseudo (3) debug (2) design (4) fonts (2) html (6) image (8) layout (5) optimization (10) performance (9) responsive (8) Software-development (1)


Recent Post:


Related Posts

%d bloggers like this: