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
`trailingIcon`	`appConfig.ui.icons.chevronDown`	`string \| object` The icon displayed to open the menu.
`color`	`'primary'`	`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`content`	`{ side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }`	`ComboboxContentProps & Partial<EmitsToProps<DismissableLayerEmits>>` The content of the menu.
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`disabled`		`boolean` When `true`, prevents the user from interacting with listbox
`variant`	`'outline'`	`"ghost" \| "outline" \| "soft" \| "subtle" \| "none"`
`selectedIcon`	`appConfig.ui.icons.check`	`string \| object` The icon displayed when an item is selected.
`arrow`	`false`	`boolean \| ComboboxArrowProps` Display an arrow alongside the menu.
`portal`	`true`	`string \| false \| true \| HTMLElement` Render the menu in a portal.
`ui`		{ base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; value?: ClassNameValue; placeholder?: ClassNameValue; arrow?: ClassNameValue; content?: ClassNameValue; viewport?: ClassNameValue; group?: ClassNameValue; empty?: ClassNameValue; label?: ClassNameValue; separator?: ClassNameValue; item?: ClassNameValue; itemLeadingIcon?: ClassNameValue; itemLeadingAvatar?: ClassNameValue; itemLeadingAvatarSize?: ClassNameValue; itemLeadingChip?: ClassNameValue; itemLeadingChipSize?: ClassNameValue; itemTrailing?: ClassNameValue; itemTrailingIcon?: ClassNameValue; itemLabel?: ClassNameValue; input?: ClassNameValue; focusScope?: ClassNameValue; }

Changelog

5cb65 — feat: import @nuxt/ui-pro components

ColorModeImage

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

ColorModeSwitch

A switch to toggle between light and dark mode.