ColorModeButton^PRO

A Button to switch between light and dark mode.

Usage

The ColorModeButton component extends the Button component, so you can pass any property such as color, variant, size, etc.

<template>
  <UColorModeButton />
</template>

The button defaults to color="neutral" and variant="ghost".

Examples

With custom icons

Use the app.config.ts to customize the icon with the ui.icons property:

app.config.ts

export default defineAppConfig({
  ui: {
    icons: {
      light: 'i-ph-sun',
      dark: 'i-ph-moon'
    }
  }
})

Use the vite.config.ts to customize the icon with the ui.icons property:

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        icons: {
          light: 'i-ph-sun',
          dark: 'i-ph-moon'
        }
      }
    })
  ]
})

With fallback slot

As the button is wrapped in a ClientOnly component, you can pass a fallback slot to display a placeholder while the component is loading.

<template>
  <UColorModeButton>
    <template #fallback>
      <UButton loading variant="ghost" color="neutral" />
    </template>
  </UColorModeButton>
</template>

API

Props

Prop	Default	Type
`as`	`'button'`	`any` The element or component this component should render as when not a link.
`color`	`'neutral'`	`"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
`variant`	`'ghost'`	`"link" \| "solid" \| "outline" \| "soft" \| "subtle" \| "ghost"`
`disabled`		`boolean`
`size`	`'md'`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`
`ui`		`PartialString<{ base: string[]; label: string; leadingIcon: string; leadingAvatar: string; leadingAvatarSize: string; trailingIcon: string; }>`

Slots

Slot	Type
`fallback`	`{}`

ColorModeAvatar

An Avatar with a different source for light and dark mode.

ColorModeImage

An image element with a different source for light and dark mode.

ColorModeButtonPRO