đŸ Archived View for lord.re âș fast-posts âș 52-css-de-jour âș index.gmi captured on 2024-05-10 at 11:23:29. Gemini links have been rewritten to link to archived content
âŹ ïž Previous capture (2022-06-03)
âĄïž Next capture (2024-08-18)
-=-=-=-=-=-=-
-------------------------------------------------
[05/11/2020] - ~4mins - #meta #ux #css
-------------------------------------------------
Depuis toujours j'ai adoptĂ© un thĂȘme visuel trĂšs dark net crypto hacker pour mon blog.
J'ai toujours eu un ptit faible pour les interfaces sombres et du coup naturellement c'est ce vers quoi j'ai voulu aller pour mon ptit coin de web.
Sauf que bon j'ai appris récemment que notre cerveau avait (une trÚs faible) latence supplémentaire quand il doit traiter des informations visuelles sombres.
Forcément, je ne voulais pas que mes pauvres lecteurs aient du mal à comprendre mes propos et je me devais donc d'agir.
En plus certaines défaillances visuelles font qu'un site sombre n'est pas forcément accessible pour tout le monde.
J'ai tentĂ© Ă plusieurs reprises de faire un thĂȘme clair sauf que je me sens clairement pas l'envie de maintenir deux feuilles de style sĂ©parĂ©es.
L'arrivée récente de
dans les specs du CSS m'a poussĂ© Ă y re-rĂ©flĂȘchir de nouveau.
Et j'ai donc repris ce que j'avais commencé dans la douleur : *une feuille de style CSS avec des variables* pour "m'alléger le boulot".
Franchement changer quelques couleurs par-ci par-lĂ , c'est rien, hein ?
Il y en a pour une demi-heure et c'est torché, non ?
Bha non.
C'est galĂšre.
On peut pas juste changer la couleur de fond et hop c'est fait.
Il faut s'assurer que toutes les couleurs utilisées aient un contraste suffisant une nouvelle fois.
Et globalement il faut du coup toutes les redéfinir.
Et puis c'est lĂ qu'on se rend compte que le jaune c'est dur Ă poser sur un fond clair (tendant vers le blanc).
Le jaune est devenu mon némésis.
C'est vrai, autant sur un fond sombre c'est facile de trouver un jaune doré avec un bon contraste et pas moche mais sur fond blanc c'est une galÚre.
Le contraste est pourri ou alors visuellement c'est super moche.
Depuis pas si longtemps que ça, on peut utiliser des variables en CSS.
C'est l'outil parfait pour réaliser une base commune (la structure spatiale du site, la typographie) et de pouvoir par la suite jouer sur les couleurs via des variables redéfinissable.
La premiĂšre Ă©tape consiste donc Ă crĂ©er en tĂȘte du CSS un block contenant toutes ces variables avec les couleurs actuelles.
<details><summary>extrait du neodark.css</summary>
{{< highlight "css" >}}
:root{
--background:#272b30;
--default-color:#bbb;
--header-delimiter:#414;
--bg-accent:#222;
--url-color:#ea872d;
--h2-color:#8aa;
--posts-h1-a:#cac;
--fast-h1-a:#99c3d1;
--shares-h1-a:#ffa;
--ideas-h1-a:#aff;
--recap-h1-a:#9cd256;
--category:#aeb8f9;
--em:#8a8;
--strong:#a8a;
--kbd-samp:#fca;
--tr-even:#333;
}
{{< / highlight >}}
</details>
Bon j'ai pas changé toutes les couleurs encore, mais déjà avec juste celle-là ça permet d'avoir une bonne base utilisable.
Maintenant que j'ai défini ces variables il faut les utiliser aux bons endroits bien entendu et là , la syntaxe est un peu longue mais tolérable.
<details><summary>extrait du neodark.css</summary>
{{< highlight "css" >}}
html{
line-height:1.35em;
background:var(--background);
color:var(--default-color);
}
{{< / highlight >}}
</details>
Bon une fois qu'on a remplacĂ© toutes les occurences partout c'est chouette mais ça ne crĂ©Ă© pas un nouveau thĂȘme, on a juste tout mis dans des variables.
Bon, c'est maintenant qu'on utilise la propriĂ©tĂ© CSS permettant de dĂ©finir un thĂȘme clair ou sombre !
Ăa y est !
<details><summary>extrait du neodark.css</summary>
{{< highlight "css" >}}
@media screen and (prefers-color-scheme: light){
:root{
--background:#eee;
--default-color:#222;
--header-delimiter:#fff;
--bg-accent:#ddd;
--url-color:#000;
--h2-color:#388;
--posts-h1-a:#7b56d2;
--fast-h1-a:#5694d2;
--shares-h1-a:#d2c656;
--shares-h1-a:#ff0080;
--ideas-h1-a:#56c6d2;
--recap-h1-a:#85ce27;
--category:#0062ff;
--em:#0062ff;
--strong:#7b56d2;
--kbd-samp:#fff;
--tr-even:#ccc;
}
}
{{< / highlight >}}
</details>
La premiĂšre ligne est une *media query* qui permet de n'appliquer les rĂšgles que dans certaines conditions.
La condition définie ici est le prefers-color-scheme: light.
Donc quand le navigateur indique qu'il prĂ©ferre afficher un thĂȘme clair, ce sont ces rĂ©gles CSS qui seront appliquĂ©es par-dessus les existantes.
Et voilĂ avec ça, vous avez, par dĂ©faut un site sombre mais avec un thĂȘme clair pour les gens ayant choisie un thĂȘme clair.
Il me reste à trifouiller et régler encore un peu pour réhausser du contraste de droite et de gauche et surtout trouver la formule magique pour les jaunes.
{{< img src="nuit.png" alt="capture d'Ă©cran de la version sombre classique du thĂȘme" title="Bon vous connaissez probablement cette version dĂ©jĂ " >}}
{{< img src="jour.png" alt="capture d'Ă©cran de la version claire du thĂȘme" title="Le nouveau thĂȘme clair pas encore parfaitement finalisĂ©, beaucoup de soucis de contraste Ă amĂ©liorer." >}}
------------------------------------
------------------------------------
[05/11/2020] [meta ux css]
------------------------------------