Maison >interface Web >js tutoriel >Comment détecter si un utilisateur est en mode sombre dans Js

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

王林original: 2024-08-24 22:30:03675parcourir

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

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>

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!

JavaScript html if switch using class Event JS function this github

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Principales API gratuites que vous devez connaître en 4Article suivant：Principales API gratuites que vous devez connaître en 4

Articles Liés

Voir plus