ColorModeSelect

A Select to switch between system, dark & light mode.

Usage

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

<template>
  <UColorModeSelect />
</template>

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: {
      system: 'i-ph-desktop',
      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'
        }
      }
    })
  ]
})

API

Props

Prop	Default	Type
`size`		`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`color`		`"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
`variant`		`"outline" \| "soft" \| "subtle" \| "ghost" \| "none"`
`disabled`		`boolean` When `true`, prevents the user from interacting with listbox
`trailingIcon`	`appConfig.ui.icons.chevronDown`	`string` The icon displayed to open the menu.
`content`	`{ side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }`	`ComboboxContentProps` The content of the menu.
`selectedIcon`	`appConfig.ui.icons.check`	`string` The icon displayed when an item is selected.
`portal`	`true`	`boolean` Render the menu in a portal.
`arrow`	`false`	`boolean \| ComboboxArrowProps` Display an arrow alongside the menu.
`ui`		`PartialString<{ base: string[]; leading: string; leadingIcon: string; leadingAvatar: string; leadingAvatarSize: string; trailing: string; trailingIcon: string; value: string; placeholder: string; arrow: string; ... 15 more ...; input: string; }>`