Detecting dark mode preference using JavaScript

As dark themes have become popular across the web and across operating systems, we might want to check the user’s operating system preference when they visit our website. This way, we can initialize our website accordingly after detecting their dark mode preference.

We can make use of the prefers-color-scheme media feature to help us do this.

Using CSS

- Advertisement -
@media (prefers-color-scheme: dark) {
  /* styles */
}

The possible values of the prefers-color-scheme are: light, dark, and no-preference.

Using JavaScript

We will again make use of the same property, but use the window.matchMedia function to check for it.

const isDarkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;

We can then use this to set the default value for a user that has set the dark mode as their operating system default. And we leave the default as light mode for the rest of the users.

If we want to add a listener to the property to ensure that we change the theme as the user switches between the two (this would rarely be a scenario though), we can do so by:

window
  .matchMedia("(prefers-color-scheme: dark)")
  .addEventListener("change", event => {
    if (event.matches) {
      //dark mode
    } else {
      //light mode
    }
})

And that is it for this super small API! Now, go dark mode everything! 😉

Recent Articles

How to sort a Set in JavaScript

ES6 introduced the set data structure in JavaScript. But sets are not ordered abstract data structures. So there is no .sort() property...

Debugging CSS scroll using one simple style

I have been doing a lot of complicated front-end work off lately and that always brings me back to the class conundrum...

CSS :has a parent selector now

CSS now includes a :has selector that allows us to apply styles on the basis of what is happening inside an element....

How to fix “invalid active developer path” after MacOS update

If you are here, then you are getting an "invalid active developer path" error on running commands in the terminal after a...

Getting the value of an input element as a number without parseInt

Every once in a while, you come across something and you think, how did I not know this earlier? valueAsNumber is that thing...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.