Introduction

Have you ever wondered how websites seamlessly switch between light and dark modes based on your preferences? It’s not magic—it's a clever use of modern web technologies. In this post, I'll reveal the simple yet powerful technique behind detecting whether a user prefers dark mode and how you can use this information to enhance the user experience on your website.

Understanding Dark Mode Detection

With the popularity of dark mode, many websites and applications now offer themes that align with the user's system preferences. This feature is achieved using the matchMedia API in JavaScript, which allows web applications to respond to changes in media queries, such as the user's color scheme preference.

How it's works

The matchMedia API

The window.matchMedia method provides a way to evaluate media queries and adapt your site's appearance based on the user's preferences. To check if dark mode is enabled, you can use the following JavaScript function:

// Check if the user prefers dark mode
function isDarkMode() {
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}

Practical Implementation

index.html

    
Hello, World!

    
    

• updateTheme Function: This function checks the dark mode preference and updates the class accordingly. Real-Time Updates: Added an event listener to matchMedia to detect changes in the color scheme preference and call update theme to adjust the appearance in real-time.

When you change your system's color scheme, the website will automatically adapt to reflect your preference without needing to refresh the page.

Follow Me on GitHub Avinash Tare