# Theme Editor for Svelte
[](https://www.npmjs.com/package/theme-editor-svelte)
[](https://github.com/naziks/theme-editor-svelte)
---
> Inspired by [Shadcn Theme Editor](https://github.com/programming-with-ia/shadcn-theme-editor) by [programming-with-ia](https://github.com/programming-with-ia)
## ✨ Description
**Universal 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)
```bash
yarn add -D theme-editor-svelte
```
or
```bash
yarn add -D theme-editor-svelte
```
### 2. Add to your SvelteKit app
```sveltehtml
{#if import.meta.env.DEV}
{#await import('theme-editor-svelte') then { default: ThemeEditor }}
{/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 **almost 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](https://github.com/naziks/theme-editor-svelte)
- 📄 [NPM Package](https://www.npmjs.com/package/theme-editor-svelte)
## 🙌 Contributing
Contributions, feedback, and issues are welcome!
Feel free to open an [issue](https://github.com/naziks/theme-editor-svelte/issues) or submit a [pull request](https://github.com/naziks/theme-editor-svelte/pulls).
## 📄 License
Licensed under the [MIT License](./LICENSE).