Martin Ruiz

Posted on Mar 23

I built a visual theme editor for Nuxt UI (stop editing CSS variables by hand)

#nuxt #vue #nuxtui #themes

🚧 The problem

If you've ever customized themes in Nuxt UI, you probably ended up doing something like this:

:root {
  --ui-primary: #ff5a1f;
  --ui-secondary: #00b8d9;
}

It works… but let's be honest:

❌ It’s slow
❌ It’s not visual
❌ You have to constantly refresh to see changes
❌ Hard to experiment with colors

I found myself tweaking values again and again just to get something that looks right.

💡 The idea

I wanted a way to:

🎨 Change colors visually
⚡ See updates instantly
🧩 Work with tokens that map to CSS variables
📦 Export something usable in real projects

So I built a small tool for it.

🚀 The solution

👉 https://nuxtthemes.dev

A visual theme editor for Nuxt UI

What it does:

Live preview while editing tokens
Supports light & dark modes
Generates theme tokens you can map to CSS variables
No setup needed

🧩 How it fits with Nuxt UI

Nuxt UI themes are based on CSS variables.

This tool helps you visually define your color tokens, which you can then map to your CSS variables in your project.

So instead of guessing values manually, you can design them visually and plug them into your existing setup.

👉 Design your theme visually, then plug it into your CSS variables.

🎬 Quick demo

Suggested flow:

Change primary color
UI updates instantly
Copy/export tokens

🧠 Why I built it

I’m working a lot with Nuxt and component systems, and I realized that:

Most theme systems are powerful… but not ergonomic.

We’re still editing raw CSS variables for something that is inherently visual.

This tool is my attempt to bridge that gap.

⚙️ Tech stack

Nuxt 3
Nuxt UI
AI palette generation (powered by Gemini)

🔥 What’s next

I’m thinking about adding:

Export as CSS variables
Shareable theme links
Community gallery
Nuxt module integration (nuxi module add ...)
More advanced token control

🙌 Feedback welcome

This is still an early version, so I’d love to hear:

What’s missing?
What feels confusing?
What would make this part of your workflow?

👉 Try it

https://nuxtthemes.dev

If you find it useful, let me know 🙌

DEV Community