TLDR
I've created a tool to generate VSCode themes, you can save, share and download themes ready to install to VSCode or publish to the marketplace.
The main features are:
- Harmonious colors generation using an innovative way mixing Sacred Geometry patterns and traditional Color Theory.
- Download the created theme and others already in .vsix ready to be installed on VSCode or even publish to the marketplace.
- Save, edit and share your themes collection.
VSCode Themes Community -
Github repo
It was made with Svelte 5 and Svelte-kit.
Some introduction
I've always been curious about how the so called Sacred Geometry patterns can please the eyes and mind with its intelligent and complex design.
Also, I could never settle for a VSCode theme for more than one week, for me, it is necessary to have different themes so I can change once in a while in order to make my coding journey more pleasant. I was always looking for new themes for my already extensive collection.
Then, I started to create my own themes, this way, I could not only select the colors of my preference at the moment, but also control the code highlighting granularity over the different languages VSCode supports.
But it was never easy, look for all the matching colors for so many different syntax tokens, adjust the tokens and scopes, the ui colors and so on...using color theory can help a lot, you select a color and by using some color schemes you can get one, two, three or more matching colors (but there is not a big variety of color schemes), after that you have to play around with some saturation and lightness parameters to fine-tune the colors for the different tokens and ui elements always considering if the contrast ratio for all selected foreground colors against the background is at an acceptable level...
Maybe, by now, you can see where I'm going at, to create a theme that is not only harmonious but also functional and follows some minimum acceptable standards can become a very complex task.
The "necessity" for different themes to satisfy this almost pathological need to diversify and change the colors I have on my screen when working in conjunct with my, earlier mentioned, curiosity of how sacred geometry patterns can please ones eyes and mind drove me to this project.
The idea and implementation
What if I could, in the same way the color theory with its color schemes derives some set of matching colors from an initial color, think of some method to instead using the traditional color schemes calculation, adapt some Sacred Geometry patterns equations on top of the color wheel?
After studying a lot of different sacred geometry patterns, I came up with a list of more than 30 patterns which the equations were suitable for this mad scientist experiment. And this is when the color generation algorithm for this project was born.
The algorithm
By selecting one sacred geometry pattern from a list and a base hue with a slider, the algorithm generates a specific amount of base hues derived by the selected sacred geometry pattern equation on top of the traditional color wheel.
After that, it generate the colors for all elements in the UI by slightly variating the lightness and saturation parameters randomly using for each element one of the generated "color scheme" derived hues.
Then using the same technique it generates the color for each of the needed syntax tokens used in the theme.
Lastly, it generates the ansi colors for the integrated terminal.
The preview
Using Monaco Editor and a Shiki plugin for code highlighting it is possible to use VSCode themes instead of the incompatible and limited, when compared to VSCode, syntax highlighting system used by the Monaco Editor.
With some elements around the editor to mimic the VSCode editor's interface and some code snippets of different languages to show as much tokens and scopes pre-defined by the generated theme as possible I made a way to preview the generated theme in realtime.
But, there is a lot of room for improvement and some limitations about how the tokens and scopes are applied within the Monaco Editor.
This makes the online preview a little less granular than when the theme is installed on VSCode itself, but at least, the difference is an increase of granularity in the syntax and semantic highlighting.
Selecting any color generated by the algorithm is possible to change or fine-tune it independently, with real-time feedback in the preview component.
The main features are:
- Harmonious colors generation using an innovative way mixing Sacred Geometry patterns and traditional Color Theory.
- Download themes you created and others already in .vsix ready to be installed on VSCode or even publish to the marketplace.
- Save, edit and share your themes collection.
Check it out!
Anyway, what I'm trying to say is, if you're interested in a place where you can discover, share and create new VSCode themes, please visit VSCode Themes Community. You can also check out the source code at the Github repository.
I would love to receive feedbacks of any kind about anything, usability, token scopes, colors generated...really anything. And of course, feel free to open an issue in case you find some.
Also, I'm liking so much to develop this project that I have plans to extend the theme generation algorithm beyond VSCode, the plan is to make it generate themes for anything that can receive a theme. Ambitious ain't it? Contributions are more than welcome in case you have some spare time and liked the project and the idea.
Other experiments
I've also made a theme generator for Shadcn UI using the same algorithm, but it need a lot of work in the ui and every other part of it, it was just a proof of concept. You can find it in my Github personal page.
If you came this far, thanks a lot for the reading!
Top comments (0)