Base2Tone ou des thèmes tout en contraste et finesse

le 16/07/2018 dans Web #console#dev#Linux#personnalisation#Pico CMS#web

Basé sur l'architecture base16 de Chris Kempson (voir cet article) et sur les thèmes DuoTone développés par simurai pour Atom, Base2Tone est une proposition de Bram de Haan de composer un thème à partir de deux teintes de base, à partir desquelles, en jouant sur la saturation et la luminosité, on crée une palette de 32 couleurs.
Pour découvrir les différents thèmes ainsi générés par Bram de Haan, rendez-vous sur base2t.one.

Comme pour base16, c'est en cherchant à ajouter des thèmes à mon plugin PicoPrism que j'ai découvert Base2Tone. C'est donc tout naturellement sur Base2Tone Prism que je me suis focalisé.
L'ensemble des thèmes déjà générés se trouvent dans le répertoire output du dépôt.

Pour pouvoir générer ses propres thèmes, il faut commencer par installer le Base16 Builder.

On commence par récupérer les schemes et templates du répertoire db, on les places dans un répertoire, mettons base2tone.
Pour générer un thème, il suffit de se rendre dans ce répertoire et de lancer la commande suivante :

$ cd base2tone/
$ $ base16-builder -s schemes/base2tone-desert.yml -t templates/prism/dark.ejs > output/prism-base2tone-desert-dark.css

Générer un thème personnalisé

Pour ce faire, il faut commencer par créer un scheme, donc un fichier listant les 32 couleurs tirées de vos deux teintes. Le plus simple est de partir d'un fichier SCSS de ce genre :

$baseA0: hsl(203, 29%, 8%);
$baseA1: hsl(203, 28%, 12%);
$baseA2: hsl(203, 27%, 19%);
$baseA3: hsl(203, 24%, 23%);
$baseA4: hsl(203, 24%, 28%);
$baseA5: hsl(203, 24%, 35%);
$baseA6: hsl(203, 23%, 44%);
$baseA7: hsl(203, 22%, 52%);

$baseB0: hsl(203, 95%, 52%);
$baseB1: hsl(203, 96%, 60%);
$baseB2: hsl(203, 97%, 68%);
$baseB3: hsl(203, 97%, 75%);
$baseB4: hsl(203, 97%, 82%);
$baseB5: hsl(203, 97%, 89%);
$baseB6: hsl(203, 97%, 95%);     
$baseB7: hsl(203, 100%, 96%);

$baseC0: hsl(45, 5%, 45%); 
$baseC1: hsl(45, 6%, 51%);
$baseC2: hsl(45, 7%, 58%);
$baseC3: hsl(45, 8%, 66%);
$baseC4: hsl(45, 9%, 74%);
$baseC5: hsl(45, 12%, 82%);
$baseC6: hsl(45, 16%, 90%);
$baseC7: hsl(45, 20%, 97%);

$baseD0: hsl(45, 65%, 20%);
$baseD1: hsl(45, 65%, 27%);
$baseD2: hsl(45, 91%, 38%);
$baseD3: hsl(45, 91%, 45%);
$baseD4: hsl(45, 96%, 51%); 
$baseD5: hsl(45, 96%, 56%);
$baseD6: hsl(45, 100%, 64%);
$baseD7: hsl(45, 100%, 72%);

Une fois notre palette conforme à nos attentes, il faut, et c'est bien rébarbatif, convertir les couleur HSL en hexadécimal (avec cet outil par exemple) pour renseigner le fichier schemes/mon_scheme.yml :

scheme: "Base2Tone-momh"
author: "by Brice Boucard (http://momh.fr)"
baseA0: "0e161a"
baseA1: "162127"
baseA2: "23343e"
baseA3: "2d3e49"
baseA4: "364b59"
baseA5: "445e6f"
baseA6: "56768a"
baseA7: "6a8ba0"
baseB0: "10a0f9"
baseB1: "37b0fb"
baseB2: "5ec0fd"
baseB3: "81cefd"
baseB4: "a5dbfe"
baseB5: "c8e9fe"
baseB6: "e6f5ff"
baseB7: "ebf7ff"
baseC0: "78766d"
baseC1: "8a867b"
baseC2: "9b988c"
baseC3: "afaca1"
baseC4: "c3c0b7"
baseC5: "d7d4cc"
baseC6: "eae8e1"
baseC7: "f9f8f6"
baseD0: "544412"
baseD1: "725b18"
baseD2: "b98d09"
baseD3: "dba70a"
baseD4: "fabe0a"
baseD5: "fbc523"
baseD6: "ffd147"
baseD7: "ffdb70"

Puis on lance la commande (en modifiant les éléments nécessaires) :

$ $ base16-builder -s schemes/mon_scheme.yml -t templates/prism/dark.ejs > output/prism-base2tone-mon_scheme-dark.css