Detecting Dark Mode in JavaScript

Detecting whether a user's operating system or browser is in dark mode can help tailor your website's appearance to match their preferences. In this article, we'll explore how to detect dark mode in JavaScript.

Dark Mode Detection Methods

There are multiple methods to detect dark mode, including checking the prefers-color-scheme media feature, using the matchMedia API, or listening for change events.

Here's a step-by-step guide for each method:

1. Using "prefers-color-scheme" Media Feature

The prefers-color-scheme media feature is part of CSS and can be accessed in JavaScript to detect the user's preferred color scheme. It returns "light," "dark," or "no-preference."

const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');

if (darkModeQuery.matches) {
    // Dark mode is preferred
} else {
    // Light mode is preferred, or no preference set
}

This code snippet uses the window.matchMedia method to check the current color scheme preference.

2. Using "matchMedia" API

You can also use the matchMedia API to listen for changes in the user's color scheme preference.

const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');

function handleDarkModeChange(e) {
    if (e.matches) {
        // Dark mode is preferred
    } else {
        // Light mode is preferred, or no preference set
    }
}

darkModeQuery.addEventListener('change', handleDarkModeChange);

// Initial check
handleDarkModeChange(darkModeQuery);

This code registers a listener for changes in the user's color scheme preference, and it also performs an initial check to detect the current preference.

3. Using "localStorage"

You can save the user's color scheme preference in localStorage when they explicitly set it on your website and retrieve it to determine the current mode.

// Set the user's preference (e.g., 'dark' or 'light') in localStorage
localStorage.setItem('color-scheme', 'dark');

// Retrieve the preference
const userPreference = localStorage.getItem('color-scheme');

if (userPreference === 'dark') {
    // Dark mode is preferred
} else {
    // Light mode is preferred, or no preference set
}

This method allows you to store and retrieve the user's choice of color scheme and then adapt your website accordingly.

Best Practices

When detecting dark mode in JavaScript, consider the following best practices:

  1. Provide a Toggle: Give users the option to switch between light and dark modes manually. Use their preference as a default but let them override it.

  2. Responsive Design: Adapt your website's appearance, color schemes, and images to provide an optimal experience in both light and dark modes.

  3. Testing: Test your dark mode implementation across different devices and browsers to ensure compatibility.

  4. Accessibility: Ensure your website remains accessible and readable in both light and dark modes, and consider offering high-contrast options for users with visual impairments.

Conclusion

Detecting dark mode in JavaScript is a valuable feature for enhancing the user experience on your website.

By understanding the methods and best practices mentioned in this article, you can create a more user-friendly and visually appealing web environment, catering to users' preferences for dark or light mode.