Theming

Customize Nuxt UI to match your brand.

Color Configuration

// app.config.ts
export default defineAppConfig({
  ui: {
    primary: 'green',
    gray: 'cool'
  }
})

Available colors: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose

Dark Mode

Dark mode is built-in:

<template>
  <UButton color="primary">
    Works in both light and dark mode!
  </UButton>

  <ColorSchemeToggle />
</template>

Component Customization

Override component styles:

// app.config.ts
export default defineAppConfig({
  ui: {
    button: {
      rounded: 'rounded-full',
      default: {
        size: 'lg'
      }
    }
  }
})

CSS Variables

Use Tailwind with Nuxt UI:

<template>
  <div class="bg-primary-500 p-4 text-white">
    Custom styled with Tailwind
  </div>
</template>

Theming in Nuxt UI is flexible and powerful. Customize to your heart's content!