Some simple CSS tricks to enable Dark Mode for Websites

You may already be familiar with media queries. They are being widely used to make responsive websites. The width and height properties contain the dimensions of the screen. You will then use CSS to render different layouts at different screen sizes.

Media query prefers-color-scheme works in a similar way. Users can configure their operating system to use light or dark mode. Prefers-color-scheme contains that value. The value is light or dark, although the W3C spec says it may support other values ​​in the future like sepia. We will specify different values ​​of CSS variables for both modes and let the user’s operating system decide.

Some simple CSS tricks for dark mode

Using media queries prefers-color-scheme

Two values ​​of media query prefers-color-scheme to be:

/* Light mode */
@media (prefers-color-scheme: light) {
   :root {
       --body-bg: #FFFFFF;
       --body-color: #000000;
   }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
   :root {
       --body-bg: #000000;
       --body-color: #FFFFFF;
   }
}

In the above CSS code, –body-bg and –body-color are CSS variables. As you can see, they contain different values ​​for both modes. In light mode, I set a white background with black text. In dark mode, I set the background to black with white text.

Since the W3C may introduce values ​​in the future, it makes sense to convert this CSS to a boolean.

/* Light mode */
:root {
   --body-bg: #FFFFFF;
   --body-color: #000000;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
   :root {
       --body-bg: #000000;
       --body-color: #FFFFFF;
   }
}

In the above code, I am defining light mode by default and converting it to dark mode if the media query is dark (i.e. the user uses dark mode on the operating system). This way, any future values ​​added to the media query will set light mode by default.

Using CSS variables

Now that we have different values ​​for different themes, we will use them to style the page.

body {
   background: var(--body-bg);
   color: var(--body-color);
}

Syntax var() is how CSS uses variables. In the above code, I am saying to set the background to the value of –body-bg and set the color to the value of –body-color. Note that the values ​​of these variables come from the media query. Means background and background colors based on operating system settings.

This is the true power of media queries: Deliver a consistent user experience from the operating system to the website.

If you visit findmymastodon.com and switch the operating system theme, you will see the website switch from one theme to another.

Conclusion

Note that the use of prefers-color-scheme It’s no different than using a regular programming language. We define variables whose values ​​change based on some logic. And those variables are used for further operations.

The ability to allow your site to adapt to a user-selected theme is a great feature. And it further blurs the line between desktop and web for the benefit of users. Latest browser versions supported prefers-color-schemeso you can start trying it out today.