ColorModeSwitch

SwitchGitHub
A switch to toggle between light and dark mode.

Usage

The ColorModeSwitch component extends the Switch component, so you can pass any property such as color, size, etc.

<template>
  <UColorModeSwitch />
</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: {
      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
as

'div'

any

The element or component this component should render as.

color

'primary'

"primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"

size

'md'

"md" | "xs" | "sm" | "lg" | "xl"

disabled

boolean

When true, prevents the user from interacting with the switch.

ui

{ root?: ClassNameValue; base?: ClassNameValue; container?: ClassNameValue; thumb?: ClassNameValue; icon?: ClassNameValue; wrapper?: ClassNameValue; label?: ClassNameValue; description?: ClassNameValue; }

Changelog

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

ColorModeSelect

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

LocaleSelect

A Select to switch between locales.