Nowadays, most operating systems and applications have started implementing dark mode. It's a feature that switches the application theme from light to dark, providing users with better readability, improved visual ergonomics, and reduced eye-strain. Web applications are no exception. Many websites now have a dark mode option, which can be triggered automatically based on the user's system preference. However, you can also detect whether or not the user has enabled dark mode, using JavaScript.

In this tutorial, we will see how to detect if the user is in dark mode, in their browser, using JavaScript. We will make use of the window.matchMedia() method and CSS media queries to achieve this.

What is Media Query?

In CSS, Media Queries are used to apply styles based on certain conditions such as screen resolution, device orientation, or color scheme.

For example, one can set a different font size for a specific screen width by using media queries.

Consider the following example:

@media only screen and (max-width: 768px) {
   /* Styles for devices with a maximum width of 768px */
   body {
      font-size: 16px;
   }
}

In this example, the CSS media query applies the defined styles for devices whose screen width is less than or equal to 768px.

Detecting Dark Mode

Let's get back to our main topic; detecting dark mode using JavaScript. When a user enables dark mode on their device, the browser sets the prefers-color-scheme media query of that device to dark.

Therefore, we can check if this media query is true or false to detect whether dark mode is enabled or not.

Here is a basic implementation to detect whether the user has dark mode enabled on their device or not.

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (isDarkMode) {
   // User is in dark mode
   console.log("User is in dark mode");
} else {
   // User is not in dark mode
   console.log("User is not in dark mode");
}

• We first check whether the window.matchMedia() method is supported by the user's browser. If the browser does not support the matchMedia() method, it returns undefined, and the if statement evaluates to false, bypassing the check.

• We then call the matchMedia() method with the argument (prefers-color-scheme: dark). This creates a MediaQueryList object that matches devices that have enabled dark mode.

• We then check the matches property of the MediaQueryList. If the matches property is true, the user is in dark mode, and we perform the necessary actions. If it's false, the user is in light mode.

Conclusion

That's it! We have seen how to detect if a user has dark mode enabled on their device or not, using JavaScript. We can use this feature to switch between the light and dark themes of a website or perform various actions based on the user's color scheme preference. I hope this tutorial helps you in creating better user experiences for your website visitors.