Migration du générateur de thème VSCode vers oklch

TLDR : La communauté des thèmes VSCode utilise désormais l'espace colorimétrique OKLCH dans l'algorithme de génération de couleurs correspondantes pour randomiser et manipuler les couleurs et dispose également d'un sélecteur de couleurs oklch à utiliser lors de l'ajustement des couleurs du thème généré.

Vous pouvez jeter un coup d'œil à la communauté des thèmes VSCODE ou plonger directement dans le code dans le référentiel GitHub.

---

La découverte tardive

Je sais, oklch, l'espace colorimétrique n'est pas si nouveau, mais quand j'ai commencé à développer la communauté de thèmes VSCode, j'ignorais totalement son existence. Il y a seulement quelques semaines, j'en ai découvert l'existence et j'ai commencé à lire de nombreux articles à ce sujet et j'ai pris conscience de tous les avantages qui pouvaient découler d'une migration de l'espace colorimétrique, à la fois dans l'algorithme et dans l'application elle-même.

Dans l'espace colorimétrique oklch, la couleur est représentée par

• L pour légèreté perceptuelle.
• C pour chroma représentant l'intensité chromatique, avec des valeurs de 0 (achromatique) sans limite supérieure, mais en pratique elle ne dépasse pas 0,5 ; CSS traite 0,4 comme 100 %.
• H pour l'angle de teinte dans une roue chromatique, généralement indiqué en degrés décimaux.

La luminosité perceptuelle permet non seulement de sélectionner facilement des couleurs avec une luminosité uniforme pour différentes teintes, mais permet également de manipuler la luminosité et la saturation des couleurs sans aucune modification du paramètre de teinte, ce qui est parfait pour être utilisé avec l'algorithme de génération de couleurs.

Une fois que l'algorithme a généré un ensemble de teintes en utilisant la teinte de base sélectionnée et le schéma de couleurs/motif de géométrie sacrée, les couleurs du thème sont générées de manière aléatoire en fonction de ces teintes avec des variations de luminosité et de saturation.

En adoptant l'espace colorimétrique oklch, il serait possible de conserver intactes toutes les teintes dérivées de la palette de couleurs sélectionnée, même après toutes les manipulations de luminosité et de chrominance nécessaires pour assurer un contraste minimum entre les couleurs d'arrière-plan et celles utilisées comme premier plan.

Même après, lorsqu'il est nécessaire ou souhaité de changer l'une des couleurs, en utilisant le nouveau sélecteur de couleurs oklch, il est possible non seulement d'ajuster la chrominance et la luminosité sans changer la teinte, mais on peut changer la teinte tout en conservant la légèreté perceptuelle de la couleur sélectionnée inchangée.

Après tout cela dit, je n'avais qu'un seul choix, migrer l'application.

La migration des codes

En lisant quelques articles concernant la spécification de l'espace colorimétrique CSS, j'ai découvert Culori, une bibliothèque de manipulation de couleurs très complète et précise pour TypeScript qui implémente l'espace colorimétrique oklch.

Il n'était pas difficile de modifier toutes les fonctions et méthodes qui utilisaient une ancienne bibliothèque de manipulation des couleurs. Certaines parties de l'algorithme sont même devenues plus claires et plus faciles à maintenir et à comprendre.

Après la migration du code, j'ai commencé à chercher un composant de sélecteur de couleurs, mais je n'en ai trouvé aucun qui puisse répondre aux exigences de mon application. Il devait utiliser Svelte 5, avoir la possibilité d'utiliser l'espace colorimétrique oklch et bien s'intégrer à l'actuel. interface utilisateur basée sur des composants shadcn-svelte.

Au milieu de la frustration, j'ai découvert ce superbe travail d'EvilMartians sur oklch.com qui est open source et, du moins pour moi, très complexe.
Après quelques heures passées sur leur référentiel GitHub et à regarder le sélecteur de couleurs sur leur page Web, j'ai décidé de l'essayer, de développer ma propre implémentation en utilisant Svelte 5 et les composants shadcn-svelte.

Je n'ai pas tout mis en œuvre pour développer un composant réutilisable, mais maintenant je pense en faire un package Svelte 5. Mais je m'éloigne du sujet, revenons à mon aventure, j'ai personnalisé certains arrière-plans de curseurs pour les mettre à jour dynamiquement à mesure que les options L, C, H et Alpha changent.

Implémentation d'un outil Web pour calculer les couleurs des pixels pour les cartes 2D dynamiques pour chaque curseur. Avec l'aide de Culori, il n'a pas été difficile de générer des dégradés pour représenter avec précision l'espace colorimétrique complexe d'oklch.

Et voilà… un sélecteur de couleurs fonctionnel et fonctionnel qui pouvait répondre aux besoins de ma pile actuelle.

Comme j'avais déjà les mains sales, je suis allée parler à mon précieux ami Claude 3.5 pour lui demander s'il avait encore quelques motifs de géométrie sacrée qui pourraient être utilisés comme schémas de couleurs à ajouter à la liste, déjà longue, des modèles/schémas. Cette fois, Claude n'a pas mesuré les efforts et a « irrité » plus d'une centaine de nouvelles géométries sacrées, de physique quantique moderne et quelques autres équations mathématiques qui pourraient être intégrées sous forme de motifs/schémas de couleurs dans l'algorithme.

Le résultat

Il est en direct sur la communauté VSCode Themes et vous pouvez consulter le code dans le référentiel Github.

S'il vous plaît, comme toujours, n'hésitez pas à fournir tout type de retour et/ou de suggestion dans les commentaires ou à déposer un problème dans le référentiel. Je serais très heureux d’entendre vos pensées.

Merci beaucoup pour la lecture et, j'espère, à la prochaine !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!