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>
<nav class="navbar">
<span class="logo">Company Logo</span> <ul class="nav__lists">
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div id="theme__switcher">
<img id="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>
<script src="./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;
}
.navbar span { 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: 5rem auto;
font-size: 2rem;
line-height: 2;
padding: 1rem 2rem;
border-radius: 10px;
box-shadow: 2px 3.5px 5px rgba(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 à l’aide de 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.
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 setTheme(theme) {
bodyEl.classList.toggle("dark", theme === "dark");
bodyEl.classList.toggle("light", theme !== "dark");
themeToggle.style.filter = theme === "dark" ? "invert(75%)" : "none";
}
function toggleTheme() {
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 detectPreferredTheme() {
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
setTheme(prefersDarkMode);
}
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é.
function setTheme(theme) {
bodyEl.classList.toggle("dark", theme === "dark");
bodyEl.classList.toggle("light", theme !== "dark"); themeToggle.style.filter = theme === "dark" ? "invert(75%)" : "none";
localStorage.setItem("theme", theme);
}
const storedTheme = localStorage.getItem("theme");
if (storedTheme) {
setTheme(storedTheme);
}
function detectPreferredTheme() {
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
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.
to www.makeuseof.com
Abonnez-vous à notre page Facebook: https://www.facebook.com/mycamer.net
Pour recevoir l’actualité sur vos téléphones à partir de l’application Telegram cliquez ici: https://t.me/+KMdLTc0qS6ZkMGI0
Nous ecrire par Whatsapp : Whatsapp +44 7476844931