TLDR: VSCode Themes Community now uses the OKLCH colorspace in the matching colors generation algorithm to randomize and manipulate colors and also has a oklch color picker to be used when adjusting the generated theme colors.

You can sneak a peek at VSCODE Themes Community or dive straight into the code in the GitHub repository.

The late discovery

I know, oklch colorspace is not that new, but when I started to develop the VSCode Themes Community I was totally unaware of its existence. It was only a couple of weeks ago I found out about it and started to read a lot of articles regarding it and became aware of all the benefits that could come along with a color space migration in both the algorithm and the app itself.

In the oklch colorspace the color is represented by

• L for perceptual lightness.
• C for chroma representing chromatic intensity, with values from 0 (achromatic) with no upper limit, but in practice it does not exceed 0.5; CSS treats 0.4 as 100%.
• H for hue angle in a color wheel, typically denoted in decimal degrees.

The perceptual lightness not only enables the easy selection of colors with uniform lightness for different hues but also allows manipulation of colors lightness and chroma without any change in the hue parameter, which is perfect to be used with the colors generation algorithm.

After the algorithm generates a set of hues using the selected base hue and color scheme/sacred geometry pattern, the colors for the theme are randomly generated based on these hues with variations of lightness and chroma.

By adopting the oklch color space it would be possible to keep the all derived hues from the selected color scheme intact even after all manipulation of lightness and chroma needed to ensure minimum contrast between the background colors and the ones used as foreground.

Even after, when there is the need or will to change any of the colors, using the new oklch color picker it is possible not only to adjust the chroma and lightness without changing the hue, but one can change the hue while keeping the perceptual lightness of the selected color unchanged.

After all that said I had only one choice, migrate the app.

The code migration

Reading some articles regarding the css colorspace specification I learned about the Culori, a very complete and precise color manipulation library for typescript that implements the oklch colorspace.

It was not hard to change all the functions and methods that were using an old color manipulation library. Some parts of the algorithm even got cleaner and easier to maintain and understand.

After the code migration, I started looking for a color picker component but couldn’t find any that could suit my app’s requirements, it needed to use Svelte 5, have the option to use oklch color space and integrate well with the current ui that is based on shadcn-svelte components.

In the middle of the frustration, I've encountered this great work from EvilMartians at oklch.com which is open source and, at least for me, very complex.
After some hours spent at their GitHub repository and looking at the color picker on their web page I decided to give it a try, develop my own implementation using Svelte 5 and shadcn-svelte components.

I did not went all in developing a reusable component, but now I'm thinking about making a Svelte 5 package out of it. But I digress, back to my adventure I customized some sliders backgrounds to dynamically update as the L, C, H and Alpha options changes.

Implemented a web worker to calculate the pixel colors for the dynamic 2D maps for each slider, with the help of Culori it was not hard to generate gradients to accurately represent the complex oklch color space.

And there it was…a functional oklch color picker that could fulfill the needs of my current stack.

As I already was with my hands dirty, I went to talk to my invaluable friend Claude 3.5 to ask if he had a few more sacred geometry patterns that could be used as color schemes to add to the, already long, list of patterns/schemes. This time Claude did not measured the efforts and 'spited' more than a hundred new sacred geometry, modern quantum physics and some other mathematical equations that could be integrated as patterns/color schemes in the algorithm.

The result

It is live at VSCode Themes Community and you can check out the code in the Github repository.

Please, as always, feel free to provide any kind of feedback and/or suggestion in the comments or file an issue at the repository. I would be very happy to hear your thoughts.

Thanks a lot for the reading and, hopefully, I see you in the next one!

The above is the detailed content of Migrating the VSCode theme generator to oklch. For more information, please follow other related articles on the PHP Chinese website!