Logo

dev-resources.site

for different kinds of informations.

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

Published at
12/25/2024
Categories
shadcnui
svelte
reac
javascript
Author
rodrigo_luglio_f63c6051de
Categories
4 categories in total
shadcnui
open
svelte
open
reac
open
javascript
open
Author
25 person written this
rodrigo_luglio_f63c6051de
open
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!

svelte Article's
30 articles in total
Favicon
🚀 I have released Eurlexa!!! EU Regulation at Your Fingertips!
Favicon
Building "Digital DSA": The Journey of Crafting a Smarter Loan Comparison Platform
Favicon
Tower defense clicker game built with Svelte 5, without canvas. Only CSS transitions and the power of Runes
Favicon
Optimize SvelteKit performance with brotli compression
Favicon
Migrating the VSCode theme generator to oklch
Favicon
Beatbump: Exploring Svelte Best Practices for Dynamic Web Applications
Favicon
SvelteJs vs ReactJs : But both can co-exists!
Favicon
Build a Simple Chatbot with Svelte and ElizaBot
Favicon
A minimalist password manager desktop app: a foray into Golang's Wails framework (Part 2)
Favicon
The Perfect Trio: Wails, Go & Svelte in Action
Favicon
Svelte 5: Share state between components (for Dummies)
Favicon
Integrating SvelteKit with Storyblok (Using Svelte 5)
Favicon
Changelog 2024/48 aka We 🖤 Svelte 5
Favicon
My first Micro SaaS | Automated, SEO-friendly Changelogs
Favicon
Quit Using Anonymous Functions in Props!
Favicon
From Svelte 4 to Svelte 5: Understanding Slots (default and named)
Favicon
Make EditorJS work in Svelte(kit) SSR
Favicon
Shadcn UI Theme generator, with OKLCH colors and ancient sacred geometry.
Favicon
A short guide to Async Components in Svelte 5
Favicon
New Post here!🍻
Favicon
Svelte vs Vue: Choosing the Best Front-End Framework
Favicon
Step-by-Step Tutorial: How to Use ALLAIS for Effortless UI Generation
Favicon
Schritt-für-Schritt-Anleitung: So verwenden Sie ALLAIS für die einfache UI-Generierung
Favicon
ALLAIS: Your Ultimate Personal UI Generator for Modern Web Development
Favicon
Пошаговый учебник: Как использовать ALLAIS для легкой генерации UI
Favicon
Svelte
Favicon
A minimalist password manager desktop app: a foray into Golang's Wails framework (Part 1)
Favicon
When Goliath Fell to David’s Smallest Stone: The Innocent Dropdown Tweak That Shattered React, Vue, and Svelte
Favicon
Deploying Your SvelteKit App to GitHub Pages with a Custom Domain (Ditch GoDaddy for Porkbun)
Favicon
Syncing DOM State and Data without IDs

Featured ones: