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 obtenue à 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 fournit un moyen 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

    
Hello, World!

    
    

• updateTheme Function : 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énements à 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