ColorModeSelectPRO

SelectMenuGitHub
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

ColorModeImage

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

ColorModeSwitch

A switch to toggle between light and dark mode.