DEV Community

loading...
Cover image for How to Write CSS for Both Light & Dark Display Modes

How to Write CSS for Both Light & Dark Display Modes

sprite421 profile image Nathan Pasko ・3 min read

This is the beginning of a little series about responsive design and some cool new ways to make your web projects—sites, apps, games—more responsive. In this article we'll check out a quick and easy way to use CSS media queries to check if the client device is using light or dark display mode, and set different styles for light and dark.

Why Light/Dark Mode Shifting is Cool

Responsive web design has accelerated to meet the needs of an ecosystem full of different web-capable devices. Designers no longer take screen sizes for granted, so the web has become more fluid as designers create sites that adapt to context. Responsiveness dovetails with the industry standardization of "Dark Mode"—that is, the capability of your OS to switch between a light- or dark-toned UI.

I was converted to Dark Mode fandom when I discovered I could set my phone and laptop to switch automatically from light to dark at sunset (and back to light at sunrise).

Tapping into users' light/dark mode setting and presenting a version of our site to match is another powerful form of responsiveness. From a design standpoint, an OS with these display features is an invitation to create more fluid images and brand identities; the proliferation of these features encourages designers to express the same identity using multiple color schemes, where in the past they might've stopped at one. This makes media more comfortable for users and helps images, websites, apps, and brands feel more intelligent and less static.

We can use a CSS media query to set up alternate styles for when users switch their client device between light and dark display modes. Now our site is responsive not only on a basis of screen size, but a basis of color scheme as well. Remember, responsiveness is all about responding to the context that different users and situations bring to our site.

How to Use prefers-color-scheme to Set Styles Specific to Light or Dark Mode

Here's the media query that we can use to tap into the display color scheme, light or dark:

@media (prefers-color-scheme: dark) {
  /* These styles will be applied only in dark mode */
}

@media (prefers-color-scheme: light) {
  /* These styles will be applied only in light mode */
}
Enter fullscreen mode Exit fullscreen mode

As you can see, CSS gives us everything we need with media queries. Let's whip up a very basic example to test it out.

Let's start by making a blank HTML page. We just need to add some text to demonstrate the change from light to dark.

<h1>Light vs. Dark</h1>
<h2>Testing</h2>
<h2>Testing</h2>
Enter fullscreen mode Exit fullscreen mode

Similar to the way, in working with screen width, we write base styles assuming a very narrow breakpoint and use media queries to adapt to progressively wider breakpoints, we will write some CSS assuming light mode to start. Then we use the prefers-color-scheme: dark media query to write corrective styles for dark mode.

/* Default styles */
html {
  /* Black text on a white background */
  color: black;
  background: white;
}

/* Style changes to use in dark mode */
@media (prefers-color-scheme: dark) {
  html {
    /* White text on a black background */
    color: white;
    background: black;
  }
}
Enter fullscreen mode Exit fullscreen mode

If we use that CSS on our page and then switch between light and dark display modes... voilà!

This example just inverts text color and background color on our page. That's a basic and pretty common application of light/dark mode responsiveness, but it's pretty useful. Like the other building blocks of CSS, the possibilities this provides are endless.

Go Make Something More Responsive

The changes between light and dark mode can be subtle if diluting a brand or aesthetic is too risky, or they can be drastic, putting full emphasis on readability or low-light operation. Responsive design is all about expanding a design's preparedness and creating opportunities for a more specific and intuitive user experience. Using the prefers-color-scheme query will help you invest more in your designs and serve users a more engaging experience.

Discussion (5)

pic
Editor guide
Collapse
cmuralisree profile image
Chittoji Murali Sree Krishna

I dont know about this, but I use javascript onclick() function to handle dark and light mode by just appending a css class to particular element, and can change back by clicking the same button or reloading the page

Collapse
sprite421 profile image
Nathan Pasko Author • Edited

That is absolutely a valid way to change between styles. Maybe I should've been more clear in my writing, that I'm interested in using the OS light/dark setting to affect CSS as a kind of responsiveness.

Collapse
hungnguyenkt profile image
Hung Nguyen Manh

Light/Dark Mode depends on OS you use, you no need to click on or off to switch mode.

Collapse
cmuralisree profile image
Chittoji Murali Sree Krishna

then its cool, i hope i knew this before, atleast i would saved my time instead of appending class to each and every section and styling them in a different way.
Thanks for the info

Collapse
manabl profile image
Manuel Blanco

For anyone wondering the coverage of this one:
caniuse