DEV Community

Martin Ruiz
Martin Ruiz

Posted on

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;
}
Enter fullscreen mode Exit fullscreen mode

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:

  1. Change primary color
  2. UI updates instantly
  3. 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 🙌

Top comments (0)