Communauté de thèmes VSCode - Découvrez, partagez et créez des thèmes en utilisant un mélange de géométrie sacrée et de théorie des couleurs

TLDR

J'ai créé un outil pour générer des thèmes VSCode, vous pouvez enregistrer, partager et télécharger des thèmes prêts à être installés sur VSCode ou publiés sur le marché.

Les principales fonctionnalités sont :

• Génération de couleurs harmonieuses en utilisant une manière innovante mélangeant les motifs de la géométrie sacrée et la théorie traditionnelle des couleurs.
• Téléchargez le thème créé et d'autres déjà en .vsix prêts à être installés sur VSCode ou même à publier sur la place de marché.
• Enregistrez, modifiez et partagez votre collection de thèmes.

Communauté de thèmes VSCode -
Dépôt Github

Il a été réalisé avec Svelte 5 et Svelte-kit.

---

Une introduction

J'ai toujours été curieux de savoir comment les motifs dits de la Géométrie Sacrée peuvent plaire aux yeux et à l'esprit grâce à leur conception intelligente et complexe.
De plus, je ne pourrais jamais me contenter d'un thème VSCode pendant plus d'une semaine, pour moi, il est nécessaire d'avoir des thèmes différents pour pouvoir en changer de temps en temps afin de rendre mon parcours de codage plus agréable. J'étais toujours à la recherche de nouveaux thèmes pour ma collection déjà vaste.

Ensuite, j'ai commencé à créer mes propres thèmes, de cette façon, je pouvais non seulement sélectionner les couleurs de ma préférence du moment, mais aussi contrôler le code mettant en évidence la granularité sur les différents langages pris en charge par VSCode.

Mais cela n'a jamais été facile, recherchez toutes les couleurs correspondantes pour autant de jetons de syntaxe différents, ajustez les jetons et les étendues, les couleurs de l'interface utilisateur, etc.... utiliser la théorie des couleurs peut beaucoup aider, vous sélectionnez une couleur et en utilisant certains schémas de couleurs, vous pouvez obtenir une, deux, trois couleurs assorties ou plus (mais il n'y a pas une grande variété de schémas de couleurs), après cela vous devez jouer avec certains paramètres de saturation et de luminosité pour affiner les couleurs pour les différents jetons et éléments de l'interface utilisateur toujours en considérant si le rapport de contraste de toutes les couleurs de premier plan sélectionnées par rapport à l'arrière-plan est à un niveau acceptable... Peut-être qu'à présent, vous voyez où je veux en venir, créer un thème qui soit non seulement harmonieux mais aussi fonctionnel et suivre certaines normes minimales acceptables peut devenir une tâche très complexe.

La "nécessité" de différents thèmes pour satisfaire ce besoin presque pathologique de diversifier et de changer les couleurs que j'ai sur mon écran lorsque je travaille en conjonction avec ma curiosité, mentionnée plus haut, de la façon dont les motifs de géométrie sacrée peuvent plaire aux yeux et à l'esprit. moi à ce projet.

L'idée et la mise en œuvre

Et si je pouvais, de la même manière que la théorie des couleurs avec ses schémas de couleurs dérive un ensemble de couleurs correspondantes à partir d'une couleur initiale, penser à une méthode pour utiliser à la place le calcul des schémas de couleurs traditionnels, adapter certaines équations de motifs de géométrie sacrée sur en haut de la roue chromatique ?

Après avoir étudié de nombreux modèles de géométrie sacrée différents, j'ai dressé une liste de plus de 30 modèles dont les équations étaient adaptées à cette expérience de savant fou. Et c’est à ce moment-là qu’est né l’algorithme de génération de couleurs pour ce projet.

L'algorithme

En sélectionnant un motif de géométrie sacrée dans une liste et une teinte de base avec un curseur, l'algorithme génère une quantité spécifique de teintes de base dérivées de l'équation du motif de géométrie sacrée sélectionnée au-dessus de la roue chromatique traditionnelle. Après cela, il génère les couleurs de tous les éléments de l'interface utilisateur en faisant varier légèrement les paramètres de luminosité et de saturation de manière aléatoire en utilisant pour chaque élément l'une des teintes dérivées du « jeu de couleurs » généré. Ensuite, en utilisant la même technique, il génère la couleur pour chacun des jetons de syntaxe nécessaires utilisés dans le thème. Enfin, il génère les couleurs ansi pour le terminal.

J'ai développé un moyen de prévisualiser en temps réel le thème en utilisant l'éditeur Monaco avec le plugin Shiki pour la mise en évidence du code avec les thèmes VSCode au lieu du système de coloration syntaxique fourni par l'éditeur Monaco. Placement de quelques éléments autour de l'éditeur pour imiter l'interface de l'éditeur VSCode avec quelques extraits de code de différents langages pour afficher autant que possible les tokens et scopes prédéfinis par le thème généré. Mais il existe néanmoins certaines limitations dans la portée des jetons dans l'éditeur de Monaco qui rendent l'aperçu en ligne un peu moins granulaire que lorsque le thème est installé sur VSCode lui-même, mais au moins, la différence est une augmentation de la granularité dans la syntaxe et la mise en évidence sémantique. .

Une fois que l'algorithme a généré toutes les couleurs, il est possible d'affiner chaque couleur indépendamment avec un retour en temps réel dans le composant d'aperçu.

Les caractéristiques principales sont :

• Génération de couleurs harmonieuses en utilisant une manière innovante mélangeant les motifs de la géométrie sacrée et la théorie traditionnelle des couleurs.
• Téléchargez les thèmes que vous avez créés et d'autres déjà en .vsix prêts à être installés sur VSCode ou même à publier sur le marché.
• Enregistrez, modifiez et partagez votre collection de thèmes.

Vérifiez-le!

Quoi qu'il en soit, ce que j'essaie de dire, c'est que si vous êtes intéressé par un endroit où vous pouvez découvrir, partager et créer de nouveaux thèmes VSCode, veuillez visiter la communauté des thèmes VSCode. Vous pouvez également consulter le code source sur le référentiel Github.

J'aimerais recevoir des commentaires de toutes sortes sur n'importe quoi, la convivialité, les portées des jetons, les couleurs générées... vraiment n'importe quoi. Et bien sûr, n'hésitez pas à ouvrir un numéro au cas où vous en trouveriez.

De plus, j'aime tellement développer ce projet que j'ai prévu d'étendre l'algorithme de génération de thème au-delà de VSCode, le plan est de lui faire générer des thèmes pour tout ce qui peut recevoir un thème. Ambitieux, n'est-ce pas ? Les contributions sont plus que bienvenues si vous avez du temps libre et que vous avez aimé le projet et l'idée.

Autres expériences

J'ai également créé un générateur de thème pour l'interface utilisateur Shadcn en utilisant le même algorithme, mais cela nécessite beaucoup de travail dans l'interface utilisateur et dans toutes les autres parties, ce n'était qu'une preuve de concept. Vous pouvez le trouver sur ma page personnelle Github.

Si vous êtes arrivé jusqu'ici, merci beaucoup pour votre lecture !

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!