Snippet : détecter le mode sombre en JavaScript
Voici un snippet simple pour détecter automatiquement si l’utilisateur utilise le mode sombre sur son appareil ou son navigateur.
Pourquoi détecter le mode sombre
De plus en plus d’utilisateurs naviguent avec le mode sombre activé.
Détecter cette préférence permet de :
- adapter automatiquement le thème du site
- améliorer le confort de lecture
- rendre l’interface plus moderne
- respecter les préférences système de l’utilisateur
C’est le genre de détail qui donne à ton site un petit côté propre et intelligent, au lieu du site qui débarque en blanc nucléaire à 2h du matin.
Le code JavaScript
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
console.log("Mode sombre activé");
} else {
console.log("Mode clair activé");
}Version avec ajout d’une classe CSS
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
document.body.classList.add("dark-mode");
} else {
document.body.classList.add("light-mode");
}Le code CSS exemple
body.light-mode {
background: <a href="/search.php?q=ffffff" class="hashtag">#ffffff</a>;
color: <a href="/search.php?q=111111" class="hashtag">#111111</a>;
}
body.dark-mode {
background: <a href="/search.php?q=111111" class="hashtag">#111111</a>;
color: <a href="/search.php?q=ffffff" class="hashtag">#ffffff</a>;
}
Détecter aussi le changement en temps réel
Si l’utilisateur change de thème pendant qu’il est sur ton site, tu peux aussi écouter ce changement.
const darkMode = window.matchMedia("(prefers-color-scheme: dark)");
function updateTheme(e) {
if (e.matches) {
document.body.classList.add("dark-mode");
document.body.classList.remove("light-mode");
} else {
document.body.classList.add("light-mode");
document.body.classList.remove("dark-mode");
}
}
updateTheme(darkMode);
darkMode.addEventListener("change", updateTheme);
Comment ça fonctionne
Le navigateur peut indiquer si l’utilisateur préfère un thème :
- sombre
- clair
Avec matchMedia(), JavaScript vérifie cette préférence grâce à :
(prefers-color-scheme: dark)Si la condition est vraie, tu peux appliquer automatiquement un style sombre.
Où utiliser ce snippet
Ce snippet est utile pour :
- un blog
- une interface admin
- une application web
- une page d’accueil moderne
- un dashboard
Bref, partout où tu veux éviter de cramer les rétines des visiteurs nocturnes.
Détecter le mode sombre en JavaScript est très simple grâce à matchMedia(). Ce petit snippet permet d’adapter automatiquement l’apparence du site selon les préférences de l’utilisateur et d’améliorer l’expérience globale.
