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 |
|
The element or component this component should render as. |
size |
| |
color |
| |
disabled |
When | |
ui |
|