Le « darkmode », ou mode sombre, est un thème que l’on peut appliquer sur les pages web ainsi que sur les systèmes d’exploitation afin d’en changer les couleurs. Bien que son utilisation ne fasse pas l’unanimité, on peut quand même constater certains bien-faits dans des cas bien précis. Par exemple lorsque l’on utilise son écran dans un environnement peu éclairé, ou bien pour les personnes souffrant de sensibilité à la lumière claire. De plus, il permet de réduire la consommation des écrans OLED qui désactivent les pixels noirs, leur évitant de consommer de l’énergie.
Pour ce qui est des statistiques, certaines études estiment l’utilisation du mode sombre à près de 80% des utilisateurs sur leurs appareils électroniques, avec une réelle préférence pour ce thème que pour le thème clair.
Nous allons voir dans cet article différentes manières d’aborder cette thématique, des préférences du système d’exploitation à comment des librairies et frameworks comme Tailwind et Bootstrap l’utilisent en passant par la manipulation directement les feuilles de styles ou encore en jouant sur les valeurs des variables CSS dédiées aux couleurs.
Appliquer un thème selon les préférences de l’OS
Quel que soit votre OS, vous devriez pouvoir définir un thème préférentiel (clair ou foncé) à travers vos paramètres système.
C’est ce même thème qui peut maintenant être utilisé directement dans le CSS pour appliquer tel ou tel style sur un bout ou sur l’ensemble de votre application.
Cela se fait à l’aide de la media query CSS suivante :
– @media (prefers-color-scheme : light | dark)
Voyons plus en détail comment procéder :
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}Ce simple bout de code permet de changer les couleurs du background et du texte de la page, via le sélecteur CSS « body », selon les préférences de l’utilisateur. Il ne reste alors plus qu’à appliquer ce principe sur chaque élément de l’application qui le nécessite.
Mettre en place son darkmode avec Tailwind
Le framework CSS Tailwind, déjà abordé dans un article précédent, permet lui aussi l’utilisation du dark mode. Voyons comment.
Des variants (pseudo-classes) peuvent être appliqués sur les classes Tailwind afin d’appliquer des styles dans différentes situations telles qu’un hover ou un focus. Il est également possible d’utiliser un variant pour le dark mode comme dans l’exemple suivant:
<div class="bg-white text-black hover:bg-red dark:bg-black dark:text-white">Ma super div !</div>
Maintenant, Tailwind va pouvoir détecter les conditions d’application du variant `dark`. Pour cela, il va falloir appliquer la classe « dark » sur la balise `<html></html>` de l’application lorsque l’on voudra utiliser le thème dark.
<html class="dark"></html>Maintenant, si l’on souhaite pouvoir rendre dynamique l’utilisation des thèmes clair et sombre, nous pouvons utiliser du javascript pour aller d’un thème à l’autre.
Pour cela, on peut utiliser le localStorage du navigateur pour modifier et partager l’information du thème à utiliser par l’ensemble des composants de l’application.
Voici quelques exemples pour illustrer ce cas d’usage :
// Pour définir le thème à utiliser comme étant le thème sombre dans le localStorage :
localStorage.theme = "dark";
// Pour définir le thème à utiliser comme étant le thème clair dans le localStorage :
localStorage.theme = "light";Une fois ce thème défini, il va falloir répercuter ce changement sur l’attribut HTML utilisé par Tailwind pour appliquer tel ou tel thème. C’est-à-dire qu’il va falloir appliquer ou non la classe CSS « dark » sur la balise `<html></html>` (accessible via l’objet `document.documentElement` en JS) :
if (localStorage.theme === "dark") {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}A noter que les préférences système sont également accessibles via le JS, si l’on souhaite les utiliser pour l’application de notre thème :
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}Mettre en place son dark mode avec Bootstrap
Bootstrap met lui aussi à disposition une methode simple pour styliser son application selon le thème désiré.
Il suffit d’utiliser l’attribut `data-bs-theme= »light »` ou `data-bs-theme= »dark »` sur une balise html du DOM, et tous ses éléments enfants hériteront de ce même thème. Ainsi, il est aisé d’appliquer un thème sur l’ensemble ou bien une partie de son application :
<div data-bs-theme="light">...</div>
<div data-bs-theme="dark">...</div>Feuilles de style multiples
Il est également possible d’implémenter un dark mode à la main. Imaginons deux feuilles de style définissant chacune un thème bien précis: clair et sombre. Chaque thème implémenterait des styles sur les balises enfants, ayant comme parent une balise globale telle que la balise `<html></html>` qui se verrait attribuer une classe ou un attribut dark / light. Ainsi les styles s’appliqueront selon cette même classe ou ce même attribut dark / light.
Prenons l’exemple de deux fichiers CSS définissant chacun un thème particulier, basé sur la présence ou non de la classe CSS « dark » sur la balise `<html></html>` :
/* theme-clair.css */
html body {
background-color: white;
color: black;
}
```
Et :
```css
/* theme-sombre.css */
html.dark body {
background-color: black;
color: white;
}Changement de valeurs des variables CSS
Dans le cas où vous utiliseriez des variables CSS pour définir les couleurs de votre application, nous pouvons également imaginer une solution permettant le changement de leurs valeurs selon le thème voulu. L’avantage de cette solution est qu’elle ne nécessite pas d’ajouter des classes CSS spécifiques au thème.
Prenons l’exemple de deux déclinaisons de couleurs : primary et secondary.
<div class="primary">Ma première div</div>
<div class="secondary">Ma seconde div</div>:root {
--monapp-color-primary: blue;
--monapp-color-secondary: cyan;
}
.primary {
background-color: var(--monapp-color-primary);
}
.secondary {
background-color: var(--monapp-color-secondary);
}
Voici un bout de code JS permettant de modifier les valeurs de ces variables CSS :
// Valeurs des couleurs claires
const primaryLightColor = "blue";
const secondaryLightColor = "cyan";
// Valeurs des couleurs sombres
const primaryDarkColor = "red";
const secondaryDarkColor = "orange";
const root = document.querySelector(":root") as HTMLElement
// Si darkmode :
root.style.setProperty("--monapp-color-primary", primaryDarkColor)
root.style.setProperty("--monapp-color-secondary", secondaryDarkColor)
// Si lightmode :
root.style.setProperty("--monapp-color-primary", primaryLightColor)
root.style.setProperty("--monapp-color-secondary", secondaryLightColor)En darkmode, cela donne donc :
Conclusion
Un grand nombre de solutions existent maintenant pour implémenter un dark mode sur une application. Et ce quelle que soit la manière dont son style est géré (à la main ou bien à l’aide d’un framework).
Comme présenté, le principe de thèmes CSS est quelque chose de vraiment simple, et quelques manipulations suffisent à pouvoir les utiliser.
Et maintenant, à votre tour !
Liens
https://fr.wikipedia.org/wiki/Mode_sombre
https://www.live360.fr/mode-sombre/
https://marketsplash.com/statistiques-dutilisation-du-mode-sombre/
https://tailwindcss.com/docs/dark-mode
https://getbootstrap.com/docs/5.3/customize/color-modes/