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?
No saved themes yet.
Use the Save button in the toolbar to save your current theme, or use the presets below.
Theme Color Palette
AI Assistant
Hello! I'm your AI assistant. I can help you with:
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:
Pick one that represents your brand:
| Color | Conveys |
|---|---|
| Blue | Trust & stability |
| Green | Growth & health |
| Purple | Creativity & luxury |
| Red | Energy & urgency |
Contrast with your primary: blue â orange, violet â cyan, green â rose.
Keep them intuitive:
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.
| 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 |
// 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!