Comment implémenter le mode sombre à l'aide de CSS et JS

Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

Ces dernières années, le mode sombre a gagné en popularité en tant qu’option d’interface utilisateur. Il offre un fond plus sombre complété par un texte plus clair, ce qui non seulement réduit la fatigue oculaire mais préserve également la durée de vie de la batterie, notamment sur les écrans OLED.

Découvrez comment ajouter une option de mode sombre à vos sites Web et applications Web, en utilisant une combinaison de CSS et JavaScript.

Comprendre le mode sombre

Le mode sombre est une palette de couleurs alternative pour votre site Web qui remplace le fond clair traditionnel par un fond sombre. Cela rend vos pages plus agréables à regarder, en particulier dans des conditions de faible luminosité. Le mode sombre est devenu une fonctionnalité standard sur de nombreux sites Web et applications en raison de sa nature conviviale.

Mise en place de votre projet

Avant de mettre en œuvre cela, assurez-vous d'avoir un projet configuré et prêt à travailler. Vous devez organiser vos fichiers HTML, CSS et JavaScript de manière structurée.

Le code HTML

Commencez par le balisage suivant pour le contenu de votre page. Un visiteur pourra utiliser le thème__switcher élément pour basculer entre les modes sombre et clair.

<body> 
    <navclass="navbar"> 
        <spanclass="logo">Company Logo</span> 
 
        <ulclass="nav__lists"> 
            <li>About</li> 
            <li>Blog</li> 
            <li>Contact</li> 
        </ul> 
 
        <divid="theme__switcher"> 
            <imgid="theme__image"src="./toggle.svg"alt="" /> 
        </div> 
    </nav> 
 
    <main> 
    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    Odit deserunt sit neque in labore quis quisquam expedita minus 
    perferendis. 
    </main> 
 
    <scriptsrc="./script.js"></script> 
</body>

Le code CSS

Ajoutez le CSS suivant pour styliser l'exemple. Cela servira de mode d’éclairage par défaut que vous augmenterez plus tard avec de nouveaux styles pour une vue en mode sombre.

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap"); 
 
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
 
html { font-size: 62.5%; } 
 
body { font-family: "Quicksand", sans-serif; } 
 
.navbar { 
    display: flex; 
    padding: 2rem; 
    font-size: 1.6rem; 
    align-items: center; 
    color: rgb(176, 58, 46); 
    background-color: #fdedec; 
} 
 
.navbarspan { margin-right: auto; } 
 
.logo { font-weight: 700; } 
 
.nav__lists { 
    display: flex; 
    list-style: none; 
    column-gap: 2rem; 
    margin: 0 2rem; 
} 
 
#theme__switcher { cursor: pointer; } 
 
main { 
    width: 300px; 
    margin: 5remauto; 
    font-size: 2rem; 
    line-height: 2; 
    padding: 1rem 2rem; 
    border-radius: 10px; 
    box-shadow: 2px 3.5px 5pxrgba(242, 215, 213, 0.4); 
}

Pour le moment, votre interface devrait ressembler à ceci :

Interface utilisateur initiale après l'application de HTML et CSS

Implémentation du mode sombre à l'aide de CSS et JavaScript

Pour implémenter le mode sombre, vous définirez son apparence en utilisant CSS. Vous utiliserez ensuite JavaScript pour gérer le basculement entre les modes sombre et clair.

Création des classes thématiques

Utilisez une classe pour chaque thème afin de pouvoir basculer facilement entre les deux modes. Pour un projet plus complet, vous devriez considérer comment le mode sombre peut affecter tous les aspects de votre conception .

.dark { 
    background: #1f1f1f; 
    color: #fff; 
} 
 
.light { 
    background: #fff; 
    color: #333; 
}

Sélection des éléments interactifs

Ajoutez le JavaScript suivant à votre script.js déposer. Le premier morceau de code sélectionne simplement les éléments que vous utiliserez pour gérer la bascule.

où dois-je acheter mon iphone

// Get a reference to the theme switcher element and the document body 
 
const themeToggle = document.getElementById("theme__switcher"); 
const bodyEl = document.body;

Ajout de la fonctionnalité bascule

Ensuite, utilisez le JavaScript suivant pour basculer entre le mode d'éclairage ( lumière ) et le mode sombre ( sombre ) Des classes. Notez que c'est également une bonne idée de modifier l'interrupteur à bascule pour indiquer le mode actuel. Ce code le fait avec un filtre CSS .

// Function to set the theme 
 
functionsetTheme(theme) { 
    // If the theme is "dark," add the "dark" class, remove "light" class, 
    // and adjust filter style 
    bodyEl.classList.toggle("dark", theme === "dark"); 
 
    // If the theme is "light," add the "light" class, remove "dark" class, 
    bodyEl.classList.toggle("light", theme !== "dark"); 
 
    // adjust filter of the toggle switch 
    themeToggle.style.filter = theme === "dark" ? "invert(75%)" : "none"; 
} 
 
 
// Function to toggle the theme between light and dark 
 
functiontoggleTheme() { 
    setTheme(bodyEl.classList.contains("dark") ? "light" : "dark"); 
} 
 
themeToggle.addEventListener("click", toggleTheme);

Cela permet à votre page de changer de thème en un seul clic sur le conteneur à bascule.

Interface utilisateur après l'activation du mode sombre

Améliorer le mode sombre avec JavaScript

Considérez les deux améliorations suivantes qui peuvent rendre vos sites en mode sombre plus agréables à utiliser pour vos visiteurs.

Détection des préférences utilisateur

Cela implique de vérifier le thème du système de l’utilisateur avant le chargement du site Web et d’ajuster votre site en conséquence. Voici comment procéder en utilisant le matchMedia fonction:

// Function to detect user's preferred theme 
 
functiondetectPreferredTheme() { 
    // Check if the user prefers a dark color scheme using media queries 
    const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches; 
    setTheme(prefersDarkMode); 
} 
 
// Run the function to detect the user's preferred theme 
detectPreferredTheme();

Désormais, tout utilisateur qui visite votre site verra un design correspondant au thème actuel de son appareil.

Préférence utilisateur persistante avec le stockage local

Pour améliorer davantage l'expérience utilisateur, utiliser le stockage local pour mémoriser le mode choisi par l’utilisateur au fil des sessions. Cela garantit qu'ils n'auront pas à sélectionner à plusieurs reprises leur mode préféré.

functionsetTheme(theme) { 
    bodyEl.classList.toggle("dark", theme === "dark"); 
    bodyEl.classList.toggle("light", theme !== "dark"); 
 
    themeToggle.style.filter = theme === "dark" ? "invert(75%)" : "none"; 
 
    // Setting the theme in local storage 
    localStorage.setItem("theme", theme); 
} 
 
// Check if the theme is stored in local storage 
 
const storedTheme = localStorage.getItem("theme"); 
 
if (storedTheme) { 
    setTheme(storedTheme); 
} 
 
functiondetectPreferredTheme() { 
    const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches; 
 
    // Getting the value from local storage 
    const storedTheme = localStorage.getItem("theme"); 
 
    setTheme(prefersDarkMode && storedTheme !== "light" ? "dark" : "light"); 
}

Adopter une conception centrée sur l'utilisateur

Le mode sombre va au-delà de l’apparence ; il s'agit de donner la priorité au confort et aux préférences de l'utilisateur. En suivant cette approche, vous pouvez créer des interfaces conviviales et encourager les visites répétées. Lorsque vous codez et concevez, donnez la priorité au bien-être des utilisateurs et offrez une meilleure expérience numérique à vos lecteurs.