ColorModeSwitchPRO

SwitchGitHub
一个用于在浅色和深色模式之间切换的开关。

用法

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

<template>
  <UColorModeSwitch />
</template>

示例

使用自定义图标

使用 app.config.ts 来自定义图标，通过 ui.icons 属性

app.config.ts
export default defineAppConfig({
  ui: {
    icons: {
      light: 'i-ph-sun',
      dark: 'i-ph-moon'
    }
  }
})

使用 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-ph-sun',
          dark: 'i-ph-moon'
        }
      }
    })
  ]
})

API

属性

属性默认值类型
as

'div'

any

此组件应渲染为的元素或组件。

disabled

boolean

当 true 时，防止用户与开关交互。

color

'primary'

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

尺寸

'md'

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

ui

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

ColorModeSelect

一个用于在系统、深色和浅色模式之间切换的选择器。

ColorPicker

一个用于选择颜色的组件。