Les ateliers du klafoutis - Carnet de notes

Générer automatiquement des palettes via CSS avec OKLCH

Kozlika — Sat, 28 Mar 2026 08:52:00 +0100

Nous sommes en train de mettre la dernière main à un thème pour Dotclear dérivé de celui que nous utilisions sur le site de l’Auberge des blogueurs. Billet de présentation et démo ici.

Le problème

À l’auberge, il était facile d’attribuer des couleurs différenciées (en l’occurrence selon l’auteurice) puisque nous disposions de leur liste. Pour chaque nouvelle autrice ou auteur on indiquait sa couleur et voilà.

Ici, il s’agit d’un thème distribué : je ne connais pas le nombre de catégories, ni leur nom, ni leur identifiant. Idem pour les auteurices. Par ailleurs, nous souhaitions que le ou la proprio du blog puisse choisir une ambiance dominante de couleurs vives ou de couleurs douces, en harmonie entre elles et reconnaissables si l’on passe d’une gamme à l’autre. Je ne pouvais donc pas préciser telle couleur pour telle catégorie (ou auteurice).

Ah et puis il fallait une palette pour le mode dark aussi.

OKCLH à la rescousse

Dans mes découvertes récentes après mon interruption de veille des techno web depuis cinq ou six ans, je suis tombée sur le modèle de couleurs OKLCH. Pour ce que je cherchais à faire c’est idéal.

Vous pouvez aller lire l’article en lien ci-dessus pour des informations plus complètes que je vais simplifier ici. Dans oklch, l représente la luminosité, c la chromie, h la teinte (h pour hue). Selon le but recherché, en conservant un ou deux des paramètres et en faisant bouger le troisième, on obtient des gammes visuellement cohérentes. Je vous invite à aller jouer avec les curseurs pour vous en rendre compte.

J’ai donc défini quatre principes :

Un point de départ avant calcul propre à chaque catégorie : la teinte (h) 155.
Pour les couleurs douces, une luminosité (l) à 0.75 et une chromie (c) à 0.06 (résultat du point de départ).
Pour les couleurs vives, une luminosité (l) à 0.48 et une chromie (c) à 0.15 (résultat du point de départ).
Pour les couleurs du mode dark, je mélange les couleurs douces avec un gris-bleu très sombre (ma couleur de fond dans ce mode).

Une fois cela établi, le seul paramètre que je fais bouger c’est celui de la teinte, quelle que soit la gamme.

Le code

Pour faire varier la teinte, je m’appuie sur l’identifiant numérique de la catégorie, dont je me sers pour « faire bouger le curseur » avec des pas de 55 pour que les couleurs ne soient pas proches les unes des autres (donc un step avec juste le numéro de la catégorie ne serait pas suffisant) et pas un nombre qui ferait retomber trop vite sur les mêmes couleurs (donc pas un nombre entier d’une division de 360). Voici comment « bouge » la valeur de hue :

--hue: calc(h + (55 * id_de_la_cat));

Je ne détaille pas comment récupérer la valeur numérique de la catégorie¹, c’est trop spécifique à Dotclear mais vous pourrez toujours télécharger le thème et en étudier les sources si vous en avez besoin². Si bien que pour chaque élément (ici ma_div) possédant un identifiant numérique on aura trois variables à utiliser selon les contextes :


.ma_div {
  --hue: calc(h + (55 * id_de_la_div));

  /* gamme douce */
  --specific-color-muted: oklch(0.75 0.06 var(--hue)); 
  /* gamme vive */
  --specific-color-vibrant: oklch(0.48 0.15 var(--hue));
  /* gamme dark mode */
  --specific-color-dark: color-mix(oklch(0.75 0.06 var(--hue)), var(--body-bg));
}

/* affectation selon le contexte */
.muted .ma_div {
    --specific-color: --specific-color-muted;
  }
.vibrant .ma_div {
    --specific-color: --specific-color-vibrant;
  }
.dark .ma_div {
    --specific-color: --specific-color-dark;
  }

/* Utilisation */
.ma_div header {
  background-color: var(--specific-color);
  color: oklch(from var(--specific-color) round(1.21 - L) 0 0);
}

Note : la dernière ligne est la cerise sur le gâteau de ce qui est possible avec OKLCH, calculer automatiquement le texte noir ou blanc selon la couleur de fond. Merci Kevin Hamer .

J’ai fait un code pen sur ce principe, bien que je n’ai pas pu reproduire la récupération de la valeur de l’identifiant d’une catégorie avec les seuls outils proposés mais ça peut vous donner une idée en point de départ de vos propres expérimentations. Aussi, je ne sais pas pourquoi mais les couleurs sont vachement plus moches sur cette démo qu’en vrai !

Pour le moment, seuls les navigateurs chromium acceptent de traiter un nombre dans un attribut comme une valeur numérique, ce qui permettrait d’utiliser directement attr(data-cat_id type(<number>). Comme ça ne pouvait être utilisé partout, j’ai eu recours à un hack en introduisant la définition de la variable dans un attribut style inline. Spa beau mais ça marche en attendant que tous les navigateurs sachent interpréter un attribut en number. ↩︎
Parution dans les jours qui viennent et il y a un billet ici. ↩︎

Rafraîchissement de Ductile : phase 3

Kozlika — Fri, 27 Feb 2026 13:33:00 +0100

Ductile est installé et prêt à être testé sur ce blog. Si ça n’est pas celui qui s’affiche sur votre écran, vous pouvez le sélectionner dans la boîte de menu « Changer le thème » ou en cliquant sur ce lien. Une boîte permet aussi de tester les modes clair et sombre, quelle que soit l’heure.

Si vous croisez un bug, merci de le signaler dans les commentaires de ce billet ou d’ouvrir un ticket sur le dépôt.

Rafraîchissement de Ductile : phase 2

Kozlika — Wed, 18 Feb 2026 10:40:00 +0100

Comme la lectrice avertie l’aura subodoré à la lecture du billet précédent de ce matin, je vais poursuivre les travaux en parallèle avec Franck et pour ce faire, nous avons créé un dépôt de code commun et j’ai fait une installation sur mon ordinateur pour pouvoir récupérer ses modifs au fur et à mesure — et lui les miennes.

Il ne sera donc pas possible de voir les changements en live pour le moment. En revanche, je vais tâcher de continuer ici à indiquer au fur et à mesure ma liste en vrac des modifs. Elles seront d’ailleurs de deux ordres : les améliorations de l’existant (ce sera plutôt moi) et le configurateur (plutôt Franck).

Je remettrai le thème à jour ici quand nous aurons une version distribuable ou proche de la distribution.

Modifs de la phase 2

Templates: il y avait un souci avec l’intégration de la description du blog dans l’entête, correction du template du top.
Templates : la liste des billets d’une catégorie inclut ceux des sous-catégories éventuelles¹.
Templates : réintégration des widgets blogcustom dans la sidebar.
CSS : amélioration de l’affichage des images (petite réserve tout autour, fond légèrement grisé).
CSS : correction du chapo qui était collé au premier paragraphe du corps du texte.
CSS : présentation du code et texte préformaté, correction pour ne pas souligner chaque ligne en cas de pre + code.
CSS : archives : la présentation en arbre des catégories et sous-catégories est désormais en full css sans images.
CSS : distribution des blocs d’archives par catégorie et par tags améliorée.
CSS : améliorations diverses et variées du rendu sur mobiles et petits écrans.
CSS : les listes sont en pure CSS, sans images.
CSS : présentation des blocs aside ainsi que des details/summary.
CSS : styles pour le mode sombre.
Couleurs : harmonisation couleur du fond des stickers, des icônes de flux et des boutons de prévisu/validation, suppression des dégradés.
Images : optimisation, passage en svg chaque fois que possible.
Tech : regénération du screenshot (petite image de prévisu du thème pour l’admin).

C’était d’ores et déjà possible via un réglage des paramètres du blog, checkbox Inclure les sous-catégories dans la page des catégories et dans les flux de billets pour une catégorie mais c’est ici en dur parce que neuf utilisateurices sur dix ne savent même pas que ce réglage existe et qu’il me semble que le texte “Filtrer par sous-catégorie” au lieu de l’actuel “Sous-catégories” est plus clair. ↩︎

Pense-bête pour déménagement de blog

Kozlika — Wed, 18 Feb 2026 06:38:00 +0100

Le déménagement d’un blog (ou sa copie) est, dans le beau pays de Théorie, plutôt facile. On exporte les billets et les médias via l’item Import / Export puis on les importe sur le blog cible grâce au même item.

Attention cependant, il peut y avoir des ajustements à faire, comme ce fut le cas pour moi. J’ai créé un environnement de travail sur mon ordinateur pour poursuivre le travail de rafraîchissement du thème Ductile en m’appuyant sur les billets et médias du blog de démo des thèmes pour Dotclear.

Mon Dotclear local est basique, sans ajout d’aucun plugin, afin de reproduire l’environnement d’un·e utilisateurice venant tout juste d’installer son bébé. Or le blog de démo est augmenté du plugin MarkdownSyntax, qui comme son nom l’indique permet la saisie des billets en syntaxe Markdown. Il en est résulté que les billets écrits dans cette syntaxe sur le blog de démo sont arrivés dans mon blog local restitués en texte brut au lieu de la mise en forme qu’elle permettait.

Autre souci, plus difficile à gérer si l’on a beaucoup de médias dans le blog : les constructions respectives des URLs menant vers les médias peuvent différer entre le blog d’origine et le blog cible. Ainsi, dans mon blog local l’url relative est /dotclear/public/<chemin_du_fichier> alors que sur le blog de démo c’est /blogfiles/dc-demothemes/public/<chemin_du_fichier>. Plus aucune image ne s’affichait donc sur mon blog local. En l’occurrence, comme c’est un petit blog j’ai pu corriger les chemins à la main mais sur un gros blog cela peut demander un gros travail d’aller tout corriger…

Je ne sais pas s’il serait possible d’améliorer le plugin Import / Export pour faciliter ce type de tâche mais ce serait une amélioration non négligeable. Par exemple on pourrait offrir le choix entre sauvegarde simple et export en vue de migration avec un champ dédié pour le nouveau public_url ?

Rafraîchissement de Ductile : phase 1

Kozlika — Mon, 16 Feb 2026 10:16:00 +0100

Histoire de me remettre dans le bain, je replonge dans le thème Ductile pour le rafraîchir. Ceci est un billet que je compléterai au fil de mon travail, une sorte de journal de bord, tant pour redécouvrir la mécanique des thèmes de Dotclear que réveiller ma mémoire côté CSS… et me remettre progressivement à jour de mes connaissances.

Les retours et suggestions sont évidemment plus que bienvenus dans les commentaires.

Environnement de travail

Pour pouvoir tester ici, j’ai commencé par dupliquer le thème Ductile. C’est sur cette copie que je vais travailler. Dans le fichier _define.php, je remplace le nom créé automatiquement (Ductile (copie)) par Ductile 2026.

Work in progress en live

On peut comparer ancienne et nouvelle version grâce au plugin Arlequin installé ici qui permet d’afficher un bloc « Changer le thème » dans le sidebar. L’ancienne continue de s’appeler Ductile et la nouvelle se nomme Ductile 2026.

Modifs CSS non visibles

Fusion des règles css dans un seul fichier : au lieu des include, copie-colle les règles dans des @layer {}.
Ajout de variables pour les fontes.

Modifs visibles

remplacement du logo par le même mais en svg et sombre pour rééquilibrer sombre/clair dans l’entête ;
remplacement des stickers png par des sitckers svg, même fond que la feuille ;
sur mobile, fond du titre du blog en bleu ;
famille de caractères : conservation du serif, mais remplacée par une serif dite transitionnelle ;
taille de base des caractères un peu augmentée (de 100% à 105%) ;
taille du titre du blog légèrement augmentée aussi et un peu plus d’espace au-dessus de la baseline ;
suppression des text-shadow en différents endroits (titre du blog
augmentation de l’interlignage de base de 1.5 à 1.6 ;
réduction des marges de côté pour la zone principale sur les écrans de largeur supérieure à celle des tablettes ;
réduction légère de la taille des titres de billet, de 2.5em à 2.25em ;
augmentation de la marge entre les billets (dans les présentations en liste) à 2em au lieu de 1em ;
appels de note en bleu, en gras, un peu décollés du texte ;
notes : filet de séparation un poil plus large ; marge au-dessus un peu plus grande ;
augmentation légère de l’espace intérieur des boîtes de la sidebar ;
suppression du hideux dégradé du bandeau de navigation de billet en billet ;
bandeau de navigation : précédent à gauche et suivant à droite au lieu des deux centrés ;
correction du débordement du post-info lorsque le nom de la catégorie ou du tag est trop long ;
soulignement des liens un poil moins collé, grâce à text-underline-position: from-font; et text-underline-offset: .2em; ;
remplacement du set d’icônes (et passage au format svg) ;
ajout de styles pour l’élément aside.

Réveil des ateliers

Kozlika — Sun, 01 Feb 2026 06:27:00 +0100

Je ranime ce blog pour bosser sur des thèmes. Je n’efface pas les billets anciens mais je les ai tous classés dans une catégorie « Grenier », pour mémoire.

Nonobstant, **tous les billets antérieurs au présent billet sont considérés obsolètes.**