Le mode sombre est devenu une préférence populaire, vous devriez donc chercher à le prendre en charge sur vos sites et dans vos applications Web.

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

instagram viewer

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 Logospan>
<ulclass="nav__lists">
<li>Aboutli>
<li>Blogli>
<li>Contactli>
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 :

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.

// 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.

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.