How to Detect if a User is in Dark Mode In Js-JS Tutorial-php.cn

How to Detect if a User is in Dark Mode In Js

王林

Release： 2024-08-24 22:30:03

Original

663 people have browsed it

How to Detect if a User is in Dark Mode In Js

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;
}

Copy after login

Practical Implementation

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Dark Mode Demo</title>
    <style>
        .dark {
            background: black;
            color: white;
        }
        .light {
            background: white;
            color: black;
        }
    </style>
</head>
<body>

    <h1>Hello, World!</h1>

    <!-- scripts -->
    <script>
        // Function to check if dark mode is enabled
        function isDarkMode() {
            return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
        }

        // Function to update the theme based on the user's preference
        function updateTheme() {
            if (isDarkMode()) {
                document.body.classList.add("dark");
                document.body.classList.remove("light");
            } else {
                document.body.classList.add("light");
                document.body.classList.remove("dark");
            }
        }

        // Initial theme setup
        updateTheme();

        // Listen for changes in the color scheme preference
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme);
    </script>
</body>
</html>

Copy after login

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

The above is the detailed content of How to Detect if a User is in Dark Mode In Js. For more information, please follow other related articles on the PHP Chinese website!