VSCode-Themen-Community – Entdecken, teilen und erstellen Sie Themen mit einer Mischung aus Heiliger Geometrie und Farbtheorie

TLDR

Ich habe ein Tool zum Generieren von VSCode-Themen erstellt. Sie können Themen speichern, teilen und herunterladen, um sie in VSCode zu installieren oder auf dem Marktplatz zu veröffentlichen.

Die Hauptmerkmale sind:

• Erzeugung harmonischer Farben durch eine innovative Mischung von Mustern der Heiligen Geometrie und traditioneller Farbtheorie.
• Laden Sie das erstellte Theme und andere bereits in .vsix herunter bereit zur Installation auf VSCode oder veröffentlichen Sie es sogar auf dem Marktplatz.
• Speichern, bearbeiten und teilen Sie Ihre Themensammlung.

VSCode Themes Community –
Github-Repo

Es wurde mit Svelte 5 und Svelte-Kit hergestellt.

---

Eine Einführung

Ich war schon immer neugierig, wie die sogenannten Heiligen-Geometrie-Muster mit ihrem intelligenten und komplexen Design Augen und Geist erfreuen können.
Außerdem könnte ich mich nie länger als eine Woche mit einem VSCode-Thema zufrieden geben. Für mich ist es notwendig, verschiedene Themen zu haben, damit ich ab und zu wechseln kann, um meine Codierungsreise angenehmer zu gestalten. Ich war immer auf der Suche nach neuen Themen für meine bereits umfangreiche Sammlung.

Dann begann ich, meine eigenen Themen zu erstellen. Auf diese Weise konnte ich nicht nur die Farben auswählen, die mir gerade am besten gefallen, sondern auch die Granularität der Codehervorhebung in den verschiedenen von VSCode unterstützten Sprachen steuern.

Aber es war nie einfach, nach allen passenden Farben für so viele verschiedene Syntax-Tokens zu suchen, die Tokens und Bereiche, die UI-Farben usw. anzupassen ... Die Verwendung der Farbtheorie kann sehr hilfreich sein, Sie wählen eine Farbe aus und Durch die Verwendung einiger Farbschemata können Sie eine, zwei, drei oder mehr passende Farben erhalten (es gibt jedoch keine große Auswahl an Farbschemata). Anschließend müssen Sie mit einigen Sättigungs- und Helligkeitsparametern herumspielen, um die Farben genau abzustimmen das Verschiedene Tokens und UI-Elemente berücksichtigen immer, ob das Kontrastverhältnis aller ausgewählten Vordergrundfarben gegenüber dem Hintergrund auf einem akzeptablen Niveau liegt ... Vielleicht können Sie jetzt erkennen, wohin ich gehe, ein Thema zu erstellen, das nicht nur harmonisch ist aber auch funktionsfähig zu sein und einige akzeptable Mindeststandards einzuhalten, kann zu einer sehr komplexen Aufgabe werden.

Die „Notwendigkeit“ verschiedener Themen, um dieses fast pathologische Bedürfnis zu befriedigen, die Farben, die ich auf meinem Bildschirm habe, wenn ich arbeite, zu diversifizieren und zu verändern, gepaart mit meiner bereits erwähnten Neugier, wie heilige Geometriemuster Augen und Geist erfreuen können, trieb mich an mich zu diesem Projekt.

Die Idee und Umsetzung

Was wäre, wenn ich mir auf die gleiche Weise, wie die Farbtheorie mit ihren Farbschemata einen Satz passender Farben aus einer Ausgangsfarbe ableitet, eine Methode überlegen könnte, um anstelle der traditionellen Farbschemaberechnung einige Mustergleichungen der Heiligen Geometrie anzupassen? oben im Farbkreis?

Nachdem ich viele verschiedene heilige Geometriemuster studiert hatte, habe ich eine Liste mit mehr als 30 Mustern erstellt, deren Gleichungen für dieses verrückte Wissenschaftlerexperiment geeignet waren. Und hier wurde der Farbgenerierungsalgorithmus für dieses Projekt geboren.

Der Algorithmus

Durch die Auswahl eines Musters mit heiliger Geometrie aus einer Liste und eines Grundfarbtons mit einem Schieberegler generiert der Algorithmus eine bestimmte Menge an Grundtönen, die von der ausgewählten Mustergleichung mit heiliger Geometrie über dem traditionellen Farbkreis abgeleitet werden. Anschließend werden die Farben für alle Elemente in der Benutzeroberfläche generiert, indem die Helligkeits- und Sättigungsparameter nach dem Zufallsprinzip leicht variiert werden, wobei für jedes Element einer der vom generierten „Farbschema“ abgeleiteten Farbtöne verwendet wird. Anschließend wird mit der gleichen Technik die Farbe für jedes der benötigten Syntax-Tokens generiert, die im Theme verwendet werden. Schließlich werden die Ansi-Farben für das Terminal generiert.

Ich habe eine Möglichkeit entwickelt, eine Vorschau des Themas in Echtzeit anzuzeigen, indem ich den Monaco-Editor mit dem Shiki-Plugin für die Codehervorhebung mit VSCode-Themen anstelle des vom Monaco-Editor bereitgestellten Syntaxhervorhebungssystems verwende. Einige Elemente wurden um den Editor herum platziert, um die Benutzeroberfläche des VSCode-Editors mit einigen Codeausschnitten verschiedener Sprachen nachzuahmen, um so viel wie möglich die durch das generierte Design vordefinierten Token und Bereiche anzuzeigen. Dennoch gibt es einige Einschränkungen in den Token-Bereichen im Monaco-Editor, die die Online-Vorschau etwas weniger granular machen als bei der Installation des Themes auf VSCode selbst, aber zumindest besteht der Unterschied in einer Erhöhung der Granularität in der Syntax und der semantischen Hervorhebung .

Nachdem der Algorithmus alle Farben generiert hat, besteht die Möglichkeit, jede Farbe einzeln mit Echtzeit-Feedback in der Vorschaukomponente zu verfeinern.

Die Hauptmerkmale sind:

• Harmonische Farberzeugung durch eine innovative Kombination von Mustern der Heiligen Geometrie und traditioneller Farbtheorie.
• Laden Sie Themes herunter, die Sie erstellt haben, und andere bereits in .vsix bereit zur Installation auf VSCode oder veröffentlichen Sie sie sogar auf dem Marktplatz.
• Speichern, bearbeiten und teilen Sie Ihre Themensammlung.

Hör zu!

Was ich jedenfalls sagen möchte ist: Wenn Sie an einem Ort interessiert sind, an dem Sie neue VSCode-Themen entdecken, teilen und erstellen können, besuchen Sie bitte die VSCode Themes Community. Sie können sich den Quellcode auch im Github-Repository ansehen.

Ich würde gerne Rückmeldungen jeglicher Art zu allem erhalten, von der Benutzerfreundlichkeit, den Token-Umfängen, den generierten Farben ... wirklich zu allem. Und natürlich können Sie gerne eine Ausgabe eröffnen, falls Sie welche finden.

Außerdem gefällt mir die Entwicklung dieses Projekts so gut, dass ich vorhabe, den Theme-Generierungsalgorithmus über VSCode hinaus zu erweitern. Der Plan besteht darin, Themes für alles zu generieren, was ein Theme empfangen kann. Ehrgeizig, nicht wahr? Beiträge sind herzlich willkommen, sofern Sie etwas Freizeit haben und Ihnen das Projekt und die Idee gefallen.

Andere Experimente

Ich habe mit demselben Algorithmus auch einen Theme-Generator für die Shadcn-Benutzeroberfläche erstellt, aber es erfordert viel Arbeit in der Benutzeroberfläche und allen anderen Teilen davon, es war nur ein Proof of Concept. Sie finden es auf meiner persönlichen Github-Seite.

Wenn Sie bis hierher gekommen sind, vielen Dank für die Lektüre!

Das obige ist der detaillierte Inhalt vonVSCode-Themen-Community – Entdecken, teilen und erstellen Sie Themen mit einer Mischung aus Heiliger Geometrie und Farbtheorie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!