Live Coding : Création d'un thème sombre

Il est de plus en plus courant de voir des sites ou applications proposer un thème sombre pour leurs visiteurs, pour diverses raisons telles que la consommation d'énergie ou le confort visuel.

Bien qu'apparemment complexe, la création d'un thème sombre est relativement simple.

Il y a de nombreuses façons d'y parvenir, nous allons ici en traiter une seule, la plus simple selon moi (mais ce n'est que mon avis).

La base

Pour commencer, il est nécessaire de partir d'un thème de base, que vous trouverez sur le Git si vous souhaitez vous exercer, mais ce thème est surtout le thème "clair" de votre site.

Ce thème est créé au moyen d'un fichier CSS. C'est ce fichier CSS qui lui donne ses tons clairs.

Pour créer un thème sombre, nous allons utiliser un autre fichier CSS qui lui donnera ses tons sombres.

Quelques conventions (pour cet article)

Nous allons nommer les fichiers CSS de la façon suivante :

style_clair.css pour le thème clair

style_sombre.css pour le thème sombre

Fonctionnement

Pour faire fonctionner le changement de thème, nous allons placer une balise "span" dans le footer du site. Le clic sur cette balise permettra de changer de thème.

Lors du clic, nous modifierons le nom du fichier CSS appelé par la page en fonction du choix du visiteur.

Bien sûr, le visiteur, à son retour, voudra retrouver le choix qu'il a fait, il sera donc nécessaire de le stocker.

Le code

Le HTML

Passons au code, en commençant par le HTML.

Nous allons modifier quelques éléments de notre page HTML pour préparer le terrain pour le changement de thème.

Le 1er élément à modifier sera la balise "link" faisant appel à notre fichier CSS.

Les 2 lignes de code ci-dessous indiquent la structure avant et après la modification



<!-- Ceci est la ligne d'origine -->

<link rel="stylesheet" type="text/css" href="css/styles.css">





<!-- Ceci est la ligne modifiée -->

<link rel="stylesheet" type="text/css" href="css/styles_light.css" id="theme-link">

Comme vous pouvez le voir, nous avons :

Modifié le nom du fichier CSS

Ajouté un id qui permettra de pointer facilement cette balise dans le document

Le 2ème élément à modifier, ou plutôt à ajouter, est la balise "span" sur laquelle le visiteur cliquera pour changer de thème.

Enormément de solutions sont possibles, de la simple balise contenant du texte au bouton, j'ai choisi un simple texte.



<span id="theme">Thème sombre</span>

Comme vous le voyez, le texte dit "Thème sombre" étant donné que le thème actuel est le thème clair. Un id facilitera également l'utilisation de cette "span".

Voilà, la base du code html est en place.

Le CSS

Pour le CSS, les manipulations sont très variables en fonction de votre contexte.

La 1ère étape est de nommer votre fichier de base sous le nom "style_clair.css".

L'idée suivante est de créer un fichier "style_sombre.css" reprenant les mêmes sélecteurs et propriétés et en modifiant les couleurs.

L'interaction

Pour l'interaction avec l'utilisateur, nous ferons appel à Javascript Vanilla, pas jQuery ici, mais son utilisation est tout à fait possible.

Le stockage des informations

Comme indiqué, le visiteur voudra retrouver le thème qu'il a choisi si il revient sur le site. De ce fait, il sera nécessaire de stocker ce choix.

Nous allons utiliser une fonctionnalité de stockage appelée "localStorage" qui permet de stocker des informations qui persistent après la fermeture du navigateur.

Il est donc possible d'écrire tout ce qu'on souhaite dans la "mémoire du navigateur" sous une forme textuelle. Je vous invite à visiter la page "Storage" de MDN pour en savoir plus.

Dans son fonctionnement, notre gestion de thème devra faire 3 choses :

Charger le bon fichier CSS lors du chargement de la page

Stocker l'information du thème choisi

Modifier le fichier CSS et le stockage lors du changement de choix du visiteur

Charger le bon fichier CSS et stocker l'information

Pour charger le bon fichier CSS, nous allons vérifier si le stockage local (localStorage) contient un thème. Si c'est le cas, nous le chargeons, sinon, nous l'initialisons sur "clair".

Le code sera le suivant



window.onload = () => { // Nous attendons que le DOM soit entièrement chargé

    // Nous allons chercher la balise "link" contenant le thème

    let themeLink = document.getElementById("theme-link")



    // Nous vérifions si un thème est déjà stocké

    if(localStorage.theme != null){

        // Si un thème est stocké, nous le chargeons dans le href de la balise link

        themeLink.href = `css/style_${localStorage.theme}.css`

    }else{

        // Si aucun thème n'est stocké, nous initialisons le lien

        themeLink.href = `css/style_clair.css`

        // Nous stockons le thème clair

        localStorage.theme = "clair"

    }

}

Modifier le fichier CSS et le stockage

Nous allons maintenant réagir au clic du visiteur sur notre "span".

Pour ce faire, nous allons initialiser un écouteur d'évènements sur "click" et réagir en conséquence.

Si le thème stocké est clair, nous allons passer au sombre et inversement.



document.getElementById("theme").addEventListener("click", function(){

    // Si le thème stocké est "clair"

    if(localStorage.theme == "clair"){

        // On stocke le thème "sombre"

        localStorage.theme = "sombre"

        // On prépare le texte de la span pour revenir au thème clair

        var themeText = "clair"

    }else{ // Sinon

        // On stocke le thème "clair"

        localStorage.theme = "clair"

        // On prépare le texte de la span pour revenir au thème sombre

        var themeText = "sombre"

    }

    // On met à jour le texte de la span

    this.innerText = `Thème ${themeText}`

    // On met à jour le href de la balise link

    themeLink.href = `css/style_${localStorage.theme}.css`

})

Et voilà, simple et efficace.

Une technique avec un select est traitée à la fin de la vidéo.

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat