ColorModeSwitch

一个开关，用于在亮模式和暗模式之间切换。

用法

ColorModeSwitch组件扩展了Switch组件，因此您可以传递任何属性，如color、size等。

<template>
  <UColorModeSwitch />
</template>

示例

带有自定义图标

使用app.config.ts自定义带有ui.icons属性的图标：

app/app.config.ts

export default defineAppConfig({
  ui: {
    icons: {
      light: 'i-lucide-sun-medium',
      dark: 'i-lucide-moon-star'
    }
  }
})

使用vite.config.ts自定义带有ui.icons属性的图标：

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-lucide-sun-medium',
          dark: 'i-lucide-moon-star'
        }
      }
    })
  ]
})

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"`
`highlight`		`boolean` Highlight the ring color like a focus state.
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`autofocus`		`false \| true \| "true" \| "false"`
`disabled`		`boolean` When `true`, prevents the user from interacting with the switch.
`label`		`string`
`loadingIcon`	`appConfig.ui.icons.loading`	`any` The icon when the `loading` prop is `true`.
`defaultValue`		`boolean` The state of the switch when it is initially rendered. Use when you do not need to control its state.
`required`		`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.
`id`		`string`
`value`		`string` The value given as data when submitted with a `name`.
`description`		`string`
`trueValue`		`boolean` The value used when the switch is on. Defaults to `true`.
`falseValue`		`boolean` The value used when the switch is off. Defaults to `false`.
`ui`		`{ root?: SlotClass; base?: SlotClass; container?: SlotClass; thumb?: SlotClass; icon?: SlotClass; wrapper?: SlotClass; label?: SlotClass; description?: SlotClass; }`

Changelog

No recent changes

ColorModeSelect

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

LocaleSelect

A Select to switch between locales.