Detect dark mode with JavaScript

Unlock your full potential in programming with tips, tricks and best practices. 1LinksApp reveals the secrets to mastering programming for beginners and pros alike. Check it out now!

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.

How to detect dark mode using JavaScript

Comments

More from this blog

Improve Readability with Numeric Separators in JavaScript

Free Google reCAPTCHA Alternative: Cloudflare Turnstile

Create a Username from a String in JavaScript

JavaScript regex: Allow letters and numbers, but not just numbers

What is Media Query?

Detecting Dark Mode

Conclusion

Command Palette

Comments

More from this blog

What is Media Query?

Detecting Dark Mode

Conclusion