What is LiveTheme?
LiveTheme is a free, real-time theme design tool. Instead of tweaking CSS variables blindly and refreshing your browser, LiveTheme lets you see every color and font change applied instantly on 15+ authentic UI templates — dashboards, email clients, AI chat UIs, blog layouts, and more.
No account needed. No install. Open the editor and start designing.
Step 1 — Open the editor
Navigate to livetheme.app/app/editor. The editor panel appears on the right (or as a bottom drawer on mobile). The live preview fills the rest of the viewport.
You can also click the Theme floating button (bottom-right) to open or close the editor panel at any time.
Step 2 — Choose a starting theme
The Theme tab at the top of the editor panel lists 30+ built-in DaisyUI themes — light, dark, and colorful options. Click any to apply it instantly.
Alternatively, hit the Randomize button (dice icon) to generate a completely new theme using color theory algorithms. Each randomization explores a different harmony strategy (complementary, triadic, split-complementary, etc.) for a fresh starting point.
Step 3 — Customize your colors
Switch to the Editor tab. The Change Colors section shows every color in your theme — base surfaces, primary, secondary, accent, neutral, and semantic colors (error, warning, success, info).
Click any color swatch to open the inline color picker panel (left side of screen). Features:
- Hue/Saturation plane — drag to pick any color visually
- Multiple formats — HEX, RGB, HSL, OKLCH
- Background/Foreground toggle — edit the base color OR its content (text) color
- Tailwind palette tab — click any Tailwind color to apply it instantly
- Image tab — extract a color palette from any photo
- Saved palettes — reuse palettes you've saved from previous sessions
- Contrast badge — real-time WCAG AA/AAA accessibility check
Step 4 — Adjust border radius
Still in the Editor tab, the Radius section gives you sliders for:
- --radius-box — cards, modals, alerts
- --radius-field — inputs, buttons, selects
- --radius-selector — checkboxes, toggles
Slide from 0 (sharp/square corners) to 3rem (very rounded/pill). This dramatically affects the visual personality of your theme.
Step 5 — Choose your fonts
Click the Font tab. LiveTheme gives you access to 2000+ Google Fonts as separate heading and body typefaces:
- Search or browse fonts by name or category
- Click to preview any font on the live template
- Set weights for heading and body independently
- Save fonts you like for quick access later
Step 6 — Switch preview templates
Click the Templates button in the bottom dock to open the template gallery. 15+ real UI templates available:
- SaaS Dashboard, Analytics, Email Inbox
- AI Chat UI, Social Feed, Blog Landing
- Auth UI, shadcn/ui Kit, DaisyUI Components
- YouTube Clone, Blog View, Waifu Gallery, and more
Click any to switch instantly. Your colors and fonts persist across templates.
Step 7 — Export your theme
When your theme is ready, click Export at the bottom of the editor panel. LiveTheme generates export code for:
- DaisyUI v4 — drop-in
@plugin "daisyui"config - TailwindCSS — CSS custom properties for your
tailwind.config.js - shadcn/ui — HSL variable format for your
globals.css - Raw CSS — plain
:root { ... }variables you can use anywhere
Step 8 — Save your theme
When you've modified a theme, a save bar appears at the top of the Editor tab. Enter a name, optional tags and description, then click Save. Your theme is saved locally and appears in the Explore modal under "Your Themes".
Tips for faster workflows
- Start from a built-in theme close to your vision and refine, rather than starting from scratch.
- Use the Randomize button aggressively — each iteration unlocks a new color combination you might not have considered.
- The Share button generates a URL you can send to collaborators with your exact theme encoded.
- Use the device selector (left side) to preview in phone, tablet, or desktop modes.