ColorModeSwitch (ColorModeSwitch)

밝은 모드와 어두운 모드 사이를 전환합니다.Switch to toggle between light and dark mode.

Usage

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 (### 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.