Introduction


In my previous post, I explained a CSS trick to quickly implement a dark mode on your website. I also said that it could be interesting to offer multiple themes options.

In this post, I am going to present a simple CSS variables system that will allow you to implement theming.

Here is a live demo of this tutorial on Codepen : https://codepen.io/estellepicq/pen/RwRypzw




CSS variables


We are going to use CSS variables. It is a custom property defined as follow:



 --main-bg-color: #fff;


Then, we can use it like this:



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




Theming implementation


A theme is a set of colors that we want to apply on the different components of our website: backgrounds, fonts, borders...

We can define a main theme, that will be the default theme when we first land on the website:



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


Here, the variables are defined at root level, and it allows us to use it globally.

We are going to use it on the body element:



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


Then, we define a class for elements that will have a special color:



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


We can now set a dark theme, which will also be available in all the document, when data-theme attribute is equal to 'dark'.



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


All is left to do is to implement the JavaScript logic behind the action of switching themes.



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




Dig deeper: store chosen theme as a preference


In order to keep the chosen theme as a user preference, we can store it in the browser local storage:



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


That way, when the page load, we can then get this value and apply it to the document:



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



Conclusion


Now you know how to quickly implement a CSS variables theming system 🎉!


I showed in this post a really simple example with two themes and three variables properties, but you can for sure adapt this example for your specific needs and implements many themes with a lot more of variable colors!


Have fun.



--------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------- Version française ---------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------


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.