Comment mettre le mode nuit en deux lignes CSS ?
Vous aimeriez que votre site soit adaptée aux préférences de vos utilisateurs ? Utilisez cette astuce qui le transforme en mode nuit en 2 lignes CSS. Aucune librairie externe requise.
3 avantages du mode nuit
Au-delà du style, on a réellement intérêt à mettre en place le mode nuit pour au moins ces 3 raisons :
- Peu de consommation d’énergie donc une meilleure autonomie de votre batterie
- Moins de lumière bleue émise donc un meilleur sommeil lorsque vous allez vous coucher avec votre portable
- Confort pour les yeux surtout dans un milieu peu éclairé (petit clien d’oeil à tous mes confrères dev !)
Navigateurs compatibles
Tous sauf Opéra Mini et Internet Explorer. Finalement, qui les utilise en 2022 ?
Mode nuit en 2 lignes CSS
Dans votre HTML
<!DOCTYPE html>
<html>
<head>
<title>Mode nuit</title>
<!-- INCLURE VOTRE FICHIER CSS DE MODE NUIT ICI -->
<link rel="stylesheet" href="./nuit.css">
</head>
<body>
<!-- STYLES PAR DEFAUT -->
<style type="text/css">
* {font-family: arial;text-align: center;}
body{background-color: white}
#ignore{background-color: black; color: white; border-width: 1px; border-color: #ff8c8c; border-style: outset;}
</style>
<section id="conteneur">
<h1>Ceci est un titre</h1>
<div id="contenu">
<p>Ceci est le contenu. Et ci dessous une image à garder telle qu'elle, même en mode nuit.</p>
<img alt="image-random" src="https://picsum.photos/200">
</div>
</section >
<section id="ignore">
<p>Ceci aussi est à laisser comme tel en mode nuit.</p>
</section>
<div>
<label for="light-switch">
<input id="light-switch" type="checkbox" onchange="appliquer_theme()">Mode nuit
</label>
</div>
<script type="text/javascript">
function appliquer_theme(){document.querySelector('html').className=(document.getElementById('light-switch').checked ? 'nuit' : '')}
appliquer_theme()
</script>
</body>
</html>
Dans votre CSS (2 lignes)
.nuit { filter: invert(1) hue-rotate(180deg) ; }
.nuit img, .nuit #ignore { filter: invert(1) hue-rotate(180deg) ; }
Demo
Retrouvez le rendu final de la demo ici.
Explications
- La première ligne permet de changer tout ce qui est fond blanc à écriture noire en fond noir à écriture blanche, tout en gardant toutes les autres couleurs.
- La deuxième ligne permet d’ignorer ce changement sur des éléments précis, en réappliquant le même filtre : un même filtre appliqué deux fois s’annule.
Remarques importantes
- Appliquez le
filter
sur l’élementhtml
et non l’élementbody
: autrement, des éléments positionnés fixes changent de repères et vous ne pourrez plus avoir des éléments fixes dans votre page. Plus d’informations sur le sujet, en anglais, disponibles ici. - Précisez bien que chacun de vos éléments à inverser possède initialement un
background-color: white;
. En effet sans cela, Google Chrome n’applique pas de filtre inverse sur votre élément.
Limites du mode nuit
Je vous invite à visualiser la vidéo de Micode sur le sujet, un point de vue très intéressant sur les limites du darkmode.