Inspired by Shadcn Theme Editor by programming-with-ia

✨ Description

Shadcn Theme Editor (Svelte) is a simple tool that lets you visually customize theme colors in your Shadcn-based web application (or any app that uses CSS variables).
It provides an intuitive interface to tweak colors and instantly preview changes.

⚡ Features

• 🧩 Plug-and-play integration with SvelteKit
• 🎨 Real-time editing of CSS variable-based themes
• 🎛️ Support for HSL and size-based variables
• ⌨️ Keyboard shortcuts for quick toggling
• 🧠 Useful even outside Shadcn projects

🚀 Quick Start

1. Install (as a dev dependency)

yarn add -D shadcn-theme-editor-svelte

or

yarn add -D shadcn-theme-editor-svelte

2. Add to your SvelteKit app

<!-- src/routes/+layout.svelte -->

{#if import.meta.env.DEV}
{#await import('shadcn-theme-editor-svelte') then { default: ShadcnThemeEditor }}
<ShadcnThemeEditor />
{/await}
{/if}

☝️ This ensures the editor is only loaded during development.

🧠 Usage

Shortcuts

• Ctrl / Command + Enter — Toggle editor visibility
• Ctrl / Command + Shift + Enter — Toggle editor position (Left / Right)

Preview

⚙️ How It Works

Instead of pulling values from tailwind.config.js or CSS files, this tool directly reads styles from the :root or html element.
That means it can be used in any project that relies on CSS variables — not just Shadcn-based apps.

🧩 Supported Values

Currently supported input formats for variables:

• ✅ HSL values (e.g., 0 0% 100%)
• ✅ Sizes: px, rem, em, vh, vw (e.g., 10px)

All other variable types can still be edited manually via text input.

📦 Package Info

• 📁 Source code
• 📄 NPM Package

🙌 Contributing

Contributions, feedback, and issues are welcome!
Feel free to open an issue or submit a pull request.

📄 License

Licensed under the MIT License.