Base16 ou la génération rapide de thèmes pour de multiples applications

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

C'est à l'occasion du développement du plugin PicoPrism (insérant le script de coloration syntaxique Prism à Pico) et a priori avec quelques deux années de retard, que j'ai découvert base16, « une architecture pour construire des thèmes [...] à partir d'une base de seize couleurs » selon son auteur, Chris Kempson, sur son site (en) et sur son GitHub.

Pour pouvoir générer les thèmes à partir des palettes de couleurs et des templates, il faut se doter d'un builder. J'ai opté pour la version en Python proposée par InspectorMustache (GitHub).
Le plus simple est encore d'utiliser pip (pour Python 3) 

$ sudo apt-get install python3-pip

Cependant, la commande pip install base16-builder-python renvoyait une erreur ; du coup, on commence par cloner le dépôt et on lance l'installation de là :

$ git clone https://github.com/InspectorMustache/base16-builder-python.git
$ cd base16-builder-python/
$ sudo pip3 install .

Vous avez alors accès à la commande pybase16 ; cependant, avant de pouvoir l'utiliser, on commence par créer un répertoire où stocker les schemes et les templates qu'un pybase16 update récupérera automatiquement depuis bon nombre de dépôts.

$ mkdir ~/base16 && cd ~/base16
$ pybase16 update

Ensuite, pour pouvoir générer un thème, il faut utiliser la commande pybase16 build qui peut prendre un certain nombre d'arguments dont :

  • -s : la palette de couleur ;
  • -t : le template ;
  • -o : un répertoire de sortie, sachant qu'une arborescence sera créée automatique en son sein pour refléter les différents thèmes générés.
$ pybase16 build -t prism -s atelier-heath-light -o output

Il est en effet possible de générer tous les thèmes d'un template donné (il suffit d'omettre l'argument -s voire tous les thèmes pour tous les templates et toutes les palettes de couleurs).

$ pybase16 build -t prism -o test
$ pybase16 build -o test

Base16 Builder

Il existe un autre outil en ligne de commande, Base16 Builder, aisément utilisable, mais semble-t-il moins à jour pour ce qui est des thèmes et des templates puisque les intégrant directement dans son dépôt. Cependant, il m'a permis de générer des thèmes Base2Tone pour PrismJS grâce au travail de Bram de Haan (voir cet article à ce sujet).
Nous allons utiliser le le gestionnaire de paquets officiel de Node.js, npm, pour l'installer (si besoin est un sudo apt-get install npm devrait vous rendre cette commande disponible) :

$ sudo npm install --global base16-builder

La commande ls permet de lister les palettes de couleurs ainsi que les templates installés par défaut.

$ base16-builder ls schemes
Your browser window should have just loaded this .html file: file:///usr/local/lib/node_modules/base16-builder/dist/index.html
$ base16-builder ls templates

Pour générer un thème, cela se passe ainsi :

$ base16-builder -s yesterday -t prism -b dark > prism-yesterday.min.css