Theming & couleurs hsl()

J’ai fait pas mal de « theming » ces derniers temps. Non, ça ne sert absolument à rien, à part rendre plus agréable à l’œil – ou tout du moins différentes – certaines choses. Et ça prend pas mal de temps, c’est vrai… Mais bon.

J’ai entrepris de modifier plusieurs outils ou sites web que j’utilise régulièrement en leur appliquant le thème « Material ». C’est un thème que j’ai découvert sur Sublime Text, puis que j’ai retrouvé sur VSCode, puis sur PhpStorm.

Je l’aimais tellement que je voulais qu’il soit appliqué partout. (Oui, je me soigne…)

J’ai ensuite réalisé un thème « Material » pour HeidiSQL, un éditeur de base de données Open Source.

Puis j’ai découvert Stylish, une appli web qui permet de surcharger le css (voire le js) de certains sites.
J’ai commencé à installer quelques thèmes sombres, puis j’en ai modifié pour mon utilisation perso, puis j’ai fini par en créer quelques uns

Utilisation des couleurs hsl()

Il se trouve que tous les portages du thème « Material » respectent une déclinaison en minimum trois sous-thèmes : Oceanic, Darker, et Palenight

On trouve parfois d’autres déclinaisons dont la liste peut varier. Vous en retrouverez pas mal ici.

C’est une vraie galère de réaliser ces différentes déclinaisons en utilisant les notations classiques de couleurs que sont l’hexadécimal et le rgb.

Prenons l’exemple du thème suivant :

:root{
    --bg1: #1f292e;
    --bg2: #253137;
    --bg3: #2b3940;
    --bg4: #36464f;
    --bg5: #3e515b;
    --bg6: #425761;
    --bg7: #4a626d;
    --bg8: #678898;
    --bg9: #869fac;
    --bg10: #8fa7b3;
    --bg11: #98aeb9;
    --bg12: #a4b7c1;
    --bg13: #b3c3cb;
    --bg14: #b6c6cd;
    --bg15: #c2cfd6;
    --bg16: #ced9de;
    --bg17: #e1e7ea;
    --bg18: #f0f3f5;
}

Ce sont 18 nuances utilisées pour le thème Oceanic (parfois appelé Dark)

Comme les différentes déclinaisons se basent sur les mêmes valeurs de luminosité, il n’y a que la teinte (hue) et la saturation qui changent.

Si on convertit ces valeurs en hsl(), on obtient ceci :

:root{
    --bg1: hsl(200, 19%, 15%);
    --bg2: hsl(200, 19%, 18%);
    --bg3: hsl(200, 19%, 21%);
    --bg4: hsl(200, 19%, 26%);
    --bg5: hsl(200, 19%, 30%);
    --bg6: hsl(200, 19%, 32%);
    --bg7: hsl(200, 19%, 36%);
    --bg8: hsl(200, 19%, 50%);
    --bg9: hsl(200, 19%, 60%);
    --bg10: hsl(200, 19%, 63%);
    --bg11: hsl(200, 19%, 66%);
    --bg12: hsl(200, 19%, 70%);
    --bg13: hsl(200, 19%, 75%);
    --bg14: hsl(200, 19%, 76%);
    --bg15: hsl(200, 19%, 80%);
    --bg16: hsl(200, 19%, 84%);
    --bg17: hsl(200, 19%, 90%);
    --bg18: hsl(200, 19%, 95%);
}

On constate que seul le troisième paramètre change soit la luminosité (le l du hsl).

Il est ainsi beaucoup plus simple de décliner ce thème avec d’autres teintes. Ici par exemple avec le thème Palenight :

:root{
    --bg1: hsl(229, 20%, 15%);
    --bg2: hsl(229, 20%, 18%);
    --bg3: hsl(229, 20%, 21%);
    --bg4: hsl(229, 20%, 26%);
    --bg5: hsl(229, 20%, 30%);
    --bg6: hsl(229, 20%, 32%);
    --bg7: hsl(229, 20%, 36%);
    --bg8: hsl(229, 20%, 50%);
    --bg9: hsl(229, 20%, 60%);
    --bg10: hsl(229, 20%, 63%);
    --bg11: hsl(229, 20%, 66%);
    --bg12: hsl(229, 20%, 70%);
    --bg13: hsl(229, 20%, 75%);
    --bg14: hsl(229, 20%, 76%);
    --bg15: hsl(229, 20%, 80%);
    --bg16: hsl(229, 20%, 84%);
    --bg17: hsl(229, 20%, 90%);
    --bg18: hsl(229, 20%, 95%);
}

On conserve le troisième paramètre et on remplace le 200, 19% par 229, 20%. On obtient ainsi avec précision l’exacte palette de nuances avec une autre teinte.

Pour le thème Darker, c’est encore plus simple :

:root{
    --bg1: hsl(0, 0%, 15%);
    --bg2: hsl(0, 0%, 18%);
    --bg3: hsl(0, 0%, 21%);
    --bg4: hsl(0, 0%, 26%);
    --bg5: hsl(0, 0%, 30%);
    --bg6: hsl(0, 0%, 32%);
    --bg7: hsl(0, 0%, 36%);
    --bg8: hsl(0, 0%, 50%);
    --bg9: hsl(0, 0%, 60%);
    --bg10: hsl(0, 0%, 63%);
    --bg11: hsl(0, 0%, 66%);
    --bg12: hsl(0, 0%, 70%);
    --bg13: hsl(0, 0%, 75%);
    --bg14: hsl(0, 0%, 76%);
    --bg15: hsl(0, 0%, 80%);
    --bg16: hsl(0, 0%, 84%);
    --bg17: hsl(0, 0%, 90%);
    --bg18: hsl(0, 0%, 95%);
}