Introduction


Dans mon précédent article, je montrais une petite astuce pour appliquer un thème sombre à l’aide d’une seule propriété CSS, et expliquais qu’il pouvait être intéressant pour un site web de proposer plusieurs thèmes.

Dans cet article, nous allons voir pas à pas comment mettre en place un système de thèmes sur un site web.

Vous trouverez une démo de ce tutoriel sur Codepen : https://codepen.io/estellepicq/pen/RwRypzw


Les variables CSS


Nous allons nous servir des variables CSS. Une variable CSS est une propriété personnalisée définie comme suit :


 --main-bg-color: #fff;


On peut ensuite l’utiliser comme cela :


.element {
  background-color: var(--main-bg-color);
}


Mise en place des différents thèmes


Un thème constitue un ensemble de couleurs que l’on souhaite appliquer aux différents éléments du site : couleurs de fond, couleurs de polices, de bordures, etc.


Nous pouvons définir un thème principal, qui sera le thème par défaut lorsque l'on arrivera sur le site :


:root {
  --bg-color: #fff;
  --font-color: #404040;
  --primary-color: #3f51b5;
}


Ici, les variables sont définies à la racine (:root), ce qui nous permet de les utiliser de façon globale.


Nous allons appliquer ce thème sur l’élément principal de notre site, body :


body {
 background-color: var(--bg-color);
 color: var(--font-color);
}


Les éléments de classe primary-color auront une couleur spéciale :


.primary-color {
 color: var(--primary-color);
}


A présent, définissons un thème sombre, qui sera également disponible dans tout le document dès lors que l’attribut “data-theme” aura la valeur “dark” :


[data-theme=”dark”] {
  --bg-color: #404040;
  --font-color: #fff;
  --primary-color: #3f51b5;
}


Il ne reste plus qu’à mettre en place la logique de changement de thème en JavaScript, afin d’appliquer au document l’attribut data-theme=”dark” lorsqu’on veut passer en mode sombre :


document.documentElement.setAttribute('data-theme', 'dark');


Pour aller plus loin : stocker le thème choisi comme préférence utilisateur


Afin de conserver le thème choisi par l’utilisateur, nous pouvons le stocker dans le local storage du navigateur :


localStorage.setItem('theme', 'dark');


De cette façon, lors du chargement de la page, nous pouvons récupérer cette valeur et appliquer le thème au document :


var theme = localStorage.getItem(‘theme’);
document.documentElement.setAttribute('data-theme', theme); 


Conclusion


Vous savez maintenant comment mettre en place simplement différents thèmes sur votre site, à l’aide de variables CSS.


Dans cet article, j’ai montré un simple exemple avec deux thèmes et trois propriétés variables. Vous pouvez bien sûr adapter cet exemple et proposer plusieurs thèmes, faire varier plus de couleurs, etc.