Comment détecter si un utilisateur est en mode sombre dans Js-js tutoriel-php.cn

Comment détecter si un utilisateur est en mode sombre dans Js

王林

Libérer： 2024-08-24 22:30:03

original

675 Les gens l'ont consulté

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

Introduction

Vous êtes-vous déjà demandé comment les sites Web basculent de manière transparente entre les modes clair et sombre en fonction de vos préférences ? Ce n’est pas magique, c’est une utilisation intelligente des technologies Web modernes. Dans cet article, je vais révéler la technique simple mais puissante permettant de détecter si un utilisateur préfère le mode sombre et comment vous pouvez utiliser ces informations pour améliorer l'expérience utilisateur sur votre site Web.

Comprendre la détection du mode sombre

Avec la popularité du mode sombre, de nombreux sites Web et applications proposent désormais des thèmes qui correspondent aux préférences système de l'utilisateur. Cette fonctionnalité est réalisée à l'aide de l'API matchMedia en JavaScript, qui permet aux applications Web de répondre aux modifications des requêtes multimédias, telles que les préférences de jeu de couleurs de l'utilisateur.

Comment ça marche

L'API matchMedia

La méthode window.matchMedia permet d'évaluer les requêtes multimédias et d'adapter l'apparence de votre site en fonction des préférences de l'utilisateur. Pour vérifier si le mode sombre est activé, vous pouvez utiliser la fonction JavaScript suivante :

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

Copier après la connexion

Mise en œuvre pratique

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>

Copier après la connexion

Fonction updateTheme : cette fonction vérifie la préférence du mode sombre et met à jour la classe en conséquence. Mises à jour en temps réel : ajout d'un écouteur d'événement à matchMedia pour détecter les changements dans les préférences de jeu de couleurs et appeler le thème de mise à jour pour ajuster l'apparence en temps réel.

Lorsque vous modifiez la palette de couleurs de votre système, le site Web s'adaptera automatiquement pour refléter vos préférences sans avoir besoin d'actualiser la page.

Suivez-moi sur GitHub Avinash Tare

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!