How To Detect Dark Mode And Enable Theme Switching With JavaScript

Dark mode is a popular feature that reduces eye strain and saves battery life on devices. As a developer, you may want to detect whether a user has enabled dark mode to customize their experience. In this article, we will show you how to use JavaScript to detect dark mode.

Contents

Detect Dark Mode with JavaScript
Listening for Dark Mode Changes
How to Store Theme in Local Storage
CSS-Only Dark Mode Implementation
Demo - Theme Switching with Dark Mode

How to Detect Dark Mode with JavaScript

The prefers-color-scheme media query can be used in JavaScript to determine if the user prefers dark or light mode. Here is an example:

JavaScript

// Check if the device is in dark mode
const isDarkMode = () => {
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
};

if (isDarkMode()) {
    console.log("The device is in dark mode.");
    // document.documentElement.className = "dark-mode";
    // callback();
} else {
    console.log("The device is in light mode.");
    // document.documentElement.className = "light";
}

Try it yourself

This script checks the user dark mode preference and logs it to the console.

Listening for Dark Mode Changes

Users can change their system theme while your application is running. Here is how to listen for these changes in real-time:

JavaScript

// Handle changes in the color scheme
const handleColorSchemeChange = (event) => {
    if (event.matches) {
        console.log("Color scheme changed: Dark mode activated.");
        // document.documentElement.setAttribute('data-theme', 'dark');
    } else {
        console.log("Color scheme changed: Light mode activated.");
        //document.documentElement.setAttribute('data-theme', 'light');
    }
};

// change system theme trigger this function
// Add event listener for changes in the color scheme
if (window.matchMedia) {
    const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    darkModeMediaQuery.addEventListener('change', handleColorSchemeChange);
} else {
    console.warn("window.matchMedia is not supported on this browser.");
}

Try it yourself

This script detects when the user changes their system theme between dark mode and light mode, and logs the updates to the console.

How to Store Theme in Local Storage

To remember a users theme preference across sessions, you can use the localStorage feature of JavaScript. When a user selects or switches between light and dark modes, you can save their preference in localStorage and apply it when they revisit the site.

Saving Theme Preference

When a user selects a theme (e.g., dark or light), save it in localStorage:

javaScript

// Function to set theme preference
const setTheme = theme => {
	// Apply theme to the document
    document.documentElement.setAttribute('data-theme', theme);
    // Store the theme in localStorage
    localStorage.setItem('theme', theme);
};

// Example usage
// setTheme('dark'); // Switch to dark mode
// setTheme('light'); // Switch to light mode

Listening for User Theme Changes

You can add a toggle button for users to switch themes and save their preference:

JavaScript

// <button id="themeToggle">Toggle Theme</button>
const themeToggle = document.getElementById('themeToggle');
//  Theme toggle button functionality
themeToggle.addEventListener('click', () => {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    setTheme(newTheme); // Save and apply the new theme
});

Applying the Stored Theme on Page Load

When the page loads, check if a theme is stored in localStorage. If no theme is stored, fall back to the system preference.

javaScript

// Function to get stored theme preference
const applyStoredTheme = () => {
    const storedTheme = localStorage.getItem('theme');
    if (storedTheme) {
        document.documentElement.setAttribute('data-theme', storedTheme);
    } else {
        // Fallback to system preference
        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
        document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
    }
};

// Call this function on page load
applyStoredTheme();

Key Benefits

Theme preference persists across page reloads
Fallback to system preference if no stored preference exists
Easy to implement with existing dark mode detection

Note: Remember to clear localStorage when implementing a theme reset feature or when making significant changes to your theme implementation.

CSS-Only Dark Mode Implementation

If you prefer to handle dark mode styling purely with CSS, you can use the @media (prefers-color-scheme: dark) media query. This approach allows your website to adapt to the user's system theme settings without any JavaScript.

What is CSS prefers-color-scheme?

The prefers-color-scheme media feature is a CSS tool that allows developers to detect a user system preference for light or dark mode and adapt their website or application accordingly. This feature ensures that your web content seamlessly integrates with the user device settings

How It Works

The @media (prefers-color-scheme) media query checks the user's system preference and applies specific styles based on their chosen theme.

Dark Mode: Styles inside @media (prefers-color-scheme: dark) are applied when the user prefers dark mode.
Light Mode (Default): Styles outside this media query are used when the user prefers light mode or no preference is set.

Using prefers-color-scheme in CSS

You can define specific styles for light and dark modes directly in your CSS file using the @media rule. basic implementation CSS example:

CSS

/* Light mode styles (default) */
body {
    background-color: #ffffff;
    color: #000000;
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
    body {
    	color-scheme: dark;
        background-color: #000000;
        color: #ffffff;
    }
}

Preview

Combining with CSS Variables

You can use CSS variables for easier theme management:

CSS

:root {
    --background-color: #ffffff;
    --text-color: #000000;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #000000;
        --text-color: #ffffff;
        color-scheme: dark;
    }
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}

Preview

With this approach, your website will automatically apply the appropriate styles based on the user settings.

Advantages of (prefers-color-scheme) CSS-Only Solutions

No JavaScript Required: Minimal performance impact since everything is handled by CSS.
Seamless Integration: Automatically adapts to the user's system preference.
Faster Rendering: Browsers process CSS faster than JavaScript, ensuring a smoother user experience.

When to Use This Solution

You want a simple and lightweight way to support dark mode.
You don't need advanced features like saving the user preference or allowing manual toggling.

Note: While CSS-only dark mode is elegant and simple, it doesn't allow for user preferences that differ from system settings. Consider combining this with JavaScript if you need to provide manual theme toggles.

Live Demo: Dynamic Theme Switching with Dark Mode

Explore a complete implementation using HTML, CSS, and JavaScript. This example demonstrates how to detect dark mode, provide users with a theme toggle option, and save their preferences in localStorage for a seamless experience across sessions.

HTML code

Preview demo sample HTML code:

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Title</title>
</head>
<body>
	<h1>Heading</h1>
	<p>paragraph.</p>
	<input type="text">
	<input type="checkbox">
	<input type="radio">
	<textarea>Text area</textarea>
	<hr>
	<button id="themeToggle">Toggle Theme</button>
</body>
</html>

Using CSS Variables with Stored Theme

To make the most of stored theme preferences, define CSS variables for your color scheme:

CSS

/* Add this to your CSS */
:root[data-theme="light"] {
    --background-color: #ffffff;
    --text-color: #333333;
    color-scheme: none;
}

:root[data-theme="dark"] {
    --background-color: #1a1a1a;
    --text-color: #ffffff;
    color-scheme: dark;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

JavaScript Get Stored Theme And Listening for User Theme Changes

Toggle button for user to switch themes dark and light and save their preference:

JavaScript

const setTheme = theme => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
};

const themeToggle = document.getElementById('themeToggle');
//  Theme toggle button functionality
themeToggle.addEventListener('click', () => {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    setTheme(newTheme); // Save and apply the new theme
});

const applyStoredTheme = () => {
    const storedTheme = localStorage.getItem('theme');
    if (storedTheme) {
        document.documentElement.setAttribute('data-theme', storedTheme);
    } else {
        // Fallback to system preference
        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
        document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
    }
};

// Call this function on page load
applyStoredTheme();

Demo: Click the button try it yourself preview dark and light mode

Preview Try it yourself

Why Detect Dark Mode?

Detecting dark mode allows you to create dynamic and user-friendly websites that adapt to your users preferences. By checking the user's system settings, you can provide a seamless and comfortable experience for both light and dark mode users.

Benefits of Detecting Dark Mode

Detecting dark mode offers several advantages that enhance both user experience and the overall appeal of your website or application:

Improved User Comfort: Automatically aligning your interface with the user’s system preference reduces eye strain, especially in low-light environments.
Energy Efficiency: On devices with OLED or AMOLED screens, dark mode can save battery life by consuming less power to display darker colors.
Modern and Customizable Design: Supporting dark mode adds a sleek, modern touch to your design while showcasing your attention to user needs.
Accessibility: Detecting and implementing dark mode ensures your platform caters to users with visual sensitivities or preferences for darker themes.
User Retention: A seamless, personalized experience, including a dark mode option, encourages users to stay longer and return more frequently.

Browser Compatibility

Most modern browsers support the prefers-color-scheme media query and the window.matchMedia JavaScript method. This includes recent versions of Chrome, Firefox, Edge, and Safari. it is good practice to include fallback

External Resources and References

For a deeper understanding of dark mode implementation and related concepts, explore these trusted resources and references:

prefers-color-scheme: Learn about the CSS media query prefers-color-scheme for applying styles based on user color preferences. Visit MDN Documentation prefers-color-scheme
window.matchMedia: Understand how to use JavaScript’s window.matchMedia method to detect and respond to user preferences dynamically. Visit MDN Documentation window.matchMedia

Report Problem