DEV Community

Cover image for Shadcn UI Theme generator, with OKLCH colors and ancient sacred geometry.
Rodrigo Luglio
Rodrigo Luglio

Posted on

2

Shadcn UI Theme generator, with OKLCH colors and ancient sacred geometry.

Hello fellow developers!
After making the VSCode theme generator, I wanted to give the color generator algorithm other applications, so I made a theme generator for Shadcn UI. Now you can generate color themes for your next project with Shadcn UI using ancient sacred geometry patterns and modern mathematics equations mixed with color theory. I will improve the preview section that currently mimics a dashboard, some different kinds of cards and a mock of a simple social media.

The colors are generated using the oklch colors space and you can copy the generated color variables to paste directly in your project's css main file. As you might know these variables are framework independent, so, it doesn't matter if you are using the original Shadcn UI or any of its variants (Svelte, Vue and others), these color variables config will work in any of them.

You can check out the project at Shadcn UI theme generator. And, as usual, you can dive into the code in the repo.

I've also expanded the utility for the algorithm to generate themes for the Warp terminal. You generate and randomize until you are satisfied with the result and then download the theme to your .warp/themes folder. After that is just to select the theme in the terminal settings -> appearance. Check out the Warp theme generator, the code is in the same repo as the VSCode themes community.

Now I'm one step closer to my dream of having a theme generator for anything that the theme can be customized. :)

I really appreciate your reading and any comments or suggestions you might have.
See you in the next one!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay