Themes

Lavender Theme for Nuxt UI

Soft purple tones deepening to rich violet in dark mode.
Copy the code

Light and dark mode

Light mode preview
primary
purple-500
secondary
fuchsia-500
success
emerald-500
info
sky-500
warning
amber-500
error
rose-500
Dark mode preview
primary
violet-400
secondary
fuchsia-400
success
emerald-400
info
cyan-400
warning
amber-400
error
rose-400
Font
Urbanist
Radius
0.5rem
Neutral
zinc / neutral (dark)
Collection
Bold

Use the Lavender theme in your project

Paste the palette assignments into app.config.ts, then add the CSS to your main stylesheet. The CSS carries everything app config can't express: the font, radius, shade shifts, and the separate dark-mode tokens. See How to Export and Share Nuxt UI Themes for the details.

app.config.ts18 lines
Highlighting code…
main.css97 lines
Highlighting code…

Related guides