1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
|
.. -*- mode: rst -*-
.. -*- coding: utf-8 -*-
==============================================
Se créer un thème de couleur dans son terminal
==============================================
:date: 2014-05-18
:tags: libre, DIY
:logo: /images/palette_75.jpg
:summary:
Quand on utilise un terminal tous les jours, on a envie de l'adapter en
fonction de ses goûts. Il existe beaucoup de thèmes disponibles sur le net
qui permettent de le configurer à sa guise, mais rien qui n'explique
comment en créer un nouveau.
.. figure:: {static}/images/palette_150.jpg
:figwidth: 150
:figclass: floatleft
:alt: Palette
Image : `Hafsa Nabeel`_ (creativecommons_)
.. _Hafsa Nabeel: https://www.flickr.com/photos/hafsacreations/3241957057/
.. _creativecommons: http://creativecommons.org/licenses/by-nc-nd/2.0/
Il est assez facile de se créer un thème de couleur pour son terminal. La
plupart du temps on trouve des thèmes à copier qui contiennent la liste des
couleurs à utiliser, mais il est rarement expliqué comment faire pour en créer
un nouveau. C'est pourtant assez simple une fois que l'on a compris les bases.
Les bases
=========
La plupart des terminaux peuvent afficher 256 couleurs ou plus, mais le shell
n'a besoin que de six couleurs de base (auxquelles viennent s'ajouter le blanc
et le noir que je ne traite pas ici). Il s'agit des trois couleurs primaires,
et les trois couleurs secondaires, que l'on peut représenter la palette sous
forme de tableau (dans l'ordre d'index utilisé dans un terminal) :
.. raw:: html
<table cellspacing="2" cellpadding="3" border="1">
<tbody>
<tr>
<th scope="row">Couleur</th>
<td width="15%">Rouge</td>
<td width="15%">Vert</td>
<td width="15%">Jaune</td>
<td width="15%">Bleu</td>
<td width="15%">Magenta</td>
<td width="15%">Cyan</td>
</tr>
<tr>
<th scope="row">Clair</th>
<td bgcolor="Red"></td>
<td bgcolor=#00FF00></td>
<td bgcolor="Yellow"></td>
<td bgcolor="Blue"></td>
<td bgcolor="Fuchsia"></td>
<td bgcolor="Aqua"></td>
</tr>
<tr>
<th scope="row">Sombre</th>
<td bgcolor=#800000></td>
<td bgcolor=#008000></td>
<td bgcolor=#808000></td>
<td bgcolor=#000080></td>
<td bgcolor=#800080></td>
<td bgcolor=#008080></td>
</tr>
</tbody></table>
Cette représentation sous forme de tableau présente l'avantage de montrer deux
caractéristiques : le nombre de couleurs de base est limité, et la variante
sombre ou claire consiste juste à changer la luminosité.
Construire le thème
===================
Nous allons créer deux thèmes : un clair et un sombre.
Pour faire un thème homogène, il va falloir respecter deux règles :
- Chaque couleur devra avoir la même luminosité que les autres couleurs
du thème : il ne faut pas qu'une couleur éclate davantage que les autres.
- Chaque couleur devra occuper le même espace [#]_ dans le cercle
colorimétrique : il ne faut pas que deux couleurs semblent proches au point
de les confondre.
Pour respecter ces deux contraintes, nous allons être obligé de construire
notre thème via une application, qui sera plus à même que nous de respecter ces
deux contraintes.
La représentation des couleurs
==============================
Il existe plusieurs manières de représenter les couleurs en informatique, la
plus connue est la `représentation RGB`_, mais celle-ci n'est pas très pratique
dans notre cas d'utilisation : en effet il n'est pas possible en utilisant
cette représentation de passer facilement de la teinte claire à sombre. Nous
allons nous intéresser ici à la représentation `Teinte/Saturation/Valeur`_ qui
présente l'avantage de séparer la teinte d'une couleur de sa luminosité.
Selon la codification TSL, chaque teinte de couleur est séparée de 60°. Il
faudra donc conserver cet écart dans notre thème final. Par contre nous avons
la possibilité d'appliquer une rotation du cercle pour faire varier la teinte
des couleurs, c'est ce qui donnera les couleurs de notre thème. Il ne nous
reste plus qu'à définir les valeurs de saturation/valeur pour le thème clair et
le thème sombre.
Après tout le reste n'est que conversion d'un système de représentation à un
autre, ce qui peut se faire tout seul avec un petit script.
Le résultat
===========
Le script est écrit en python et peut être `téléchargé ici`_, il reçoit 5
paramètres, et écrit sur la sortie la configuration pouvant être utilisée avec
`rxvt` et `xterm`, deux émulateurs de terminaux permettant un bon niveau de
configuration.
.. _téléchargé ici: {static}/resources/colors.py
.. list-table::
:header-rows: 1
* - décalage
- saturation claire
- saturation sombre
- valeur claire
- valeur sombre
* - 30
- 60
- 50
- 90
- 70
Ce qui donnera l'exécution suivante :
.. code-block:: bash
$ python colors.py 30 60 50 90 70
Il est possible de modifier les couleurs sans enregistrer le paramétrage
définitivement en passant la sortie du script à `xrdb` avant d'ouvrir un
nouveau terminal :
.. code-block:: bash
$ python colors.py 30 60 50 90 70 | xrdb -override
Si vous voulez appliquer ce paramétrage définitement, il faut l'enregistrer
dans le fichier `~/.Xdefaults`
Le résulat des couleurs générées avec les valeurs définies ci-dessus :
.. raw:: html
<table cellspacing="2" cellpadding="3" border="1">
<tbody>
<tr>
<th scope="row">Couleur</th>
<td width="15%">Rouge</td>
<td width="15%">Vert</td>
<td width="15%">Jaune</td>
<td width="15%">Bleu</td>
<td width="15%">Magenta</td>
<td width="15%">Cyan</td>
</tr>
<tr>
<th scope="row">Clair</th>
<td bgcolor=#e6175c></td>
<td bgcolor=#a1e65c></td>
<td bgcolor=#e6a15c></td>
<td bgcolor=#5ca1e6></td>
<td bgcolor=#a15ce6></td>
<td bgcolor=#5ce6a1></td>
</tr>
<tr>
<th scope="row">Sombre</th>
<td bgcolor=#b32c59></td>
<td bgcolor=#86b359></td>
<td bgcolor=#b38659></td>
<td bgcolor=#5986b3></td>
<td bgcolor=#8659b3></td>
<td bgcolor=#59b386></td>
</tr>
</tbody></table>
Et voilà ce que ça donne en réeel : des couleurs plutôt douces et claires qui
n'agressent pas les yeux ^^
.. image:: {static}/images/Capture-terminal.png
:class: center
:alt: caputre d'écran
Vous pouvez à votre tour essayer d'autres combinaisons pour vous créer votre
propre palette à utiliser dans votre terminal.
.. _représentation RGB: https://fr.wikipedia.org/wiki/Rouge_vert_bleu
.. _Teinte/Saturation/Valeur: https://fr.wikipedia.org/wiki/Teinte_Saturation_Valeur
.. [#]
On peut concevoir l'ensembre des couleurs comme un système, c'est-à-dire un
ensemble d'éléments interdépendants les uns des autres : l'espace occupé
par un élément correspond à l'espace qui n'est pas pris par l'ensemble des
autres éléments.
Comme les six couleurs de base sont uniformément réparties dans le cercle
colorimétrique, il faut que notre thème final conserve cette répartition.
|
