Chat Template — Nuxt UI Theme Builder

Nuxt UI Theme Builder

Loading preview…

Theme Color Palette

AI Assistant

Hello! I'm your AI assistant. I can help you with:

🎨 Building Nuxt UI themes — colors, fonts, radius
💻 Writing code — components, composables, configs
❓ Answering questions — about Nuxt, Tailwind, and more

How can I help you today?

I want to create a custom theme for my Nuxt application. Can you help me choose a good color palette?

Of course! Here are some tips for choosing a great color palette:

1. Start with your primary color

Pick one that represents your brand:

Color	Conveys
Blue	Trust & stability
Green	Growth & health
Purple	Creativity & luxury
Red	Energy & urgency

2. Complementary secondary

Contrast with your primary: blue → orange, violet → cyan, green → rose.

3. Semantic colors

Keep them intuitive:

✅ Success — green / emerald
⚠️ Warning — amber / yellow
❌ Error — red / rose
ℹ️ Info — sky / blue

4. Neutral palette

Slate, zinc, or gray for text and backgrounds.

Pro tip: A good neutral is just as important as your primary color — it makes up most of your UI.

Would you like me to suggest a specific palette?

That's helpful! I'm building a developer tools product. I like violet as the primary color. What would you recommend for the rest?

Great choice! Violet is perfect for dev tools — modern and technical.

Recommended palette

Role	Color	Why
Primary	`violet`	Modern, tech-forward
Secondary	`cyan`	High contrast complement
Success	`emerald`	Sophisticated green
Info	`sky`	Calm, informational
Warning	`amber`	Clear without alarm
Error	`rose`	Softer than pure red
Neutral	`zinc`	Clean & professional

Why this works

Violet + Cyan creates a vibrant, tech-forward feel
Zinc neutral keeps things clean and professional
Emerald for success is more sophisticated than plain green
Rose for errors is softer than pure red but still noticeable

// app.config.ts
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'violet',
      secondary: 'cyan',
      success: 'emerald',
      info: 'sky',
      warning: 'amber',
      error: 'rose',
      neutral: 'zinc'
    }
  }
})

You can try this right now in the Theme Builder sidebar!