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 :

  1. Peu de consommation d’énergie donc une meilleure autonomie de votre batterie
  2. Moins de lumière bleue émise donc un meilleur sommeil lorsque vous allez vous coucher avec votre portable
  3. Confort pour les yeux surtout dans un milieu peu éclairé (petit clien d’oeil à tous mes confrères dev !)

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

  1. 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.
  2. 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

  1. Appliquez le filter sur l’élement html et non l’élement body : 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.
  2. 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.

Vous avez aimé ce contenu ? Faites le savoir
Retourner à la liste de projets