颜色模式

Nuxt UI 与 VueUse 集成，可以轻松切换亮色和暗色主题。

用法

Nuxt UI 会自动注册useDark可组合项作为 Vue 插件，因此无需额外设置。

组件

您可以使用内置的 ColorModeAvatar 或 ColorModeImage 组件来为亮色和暗色模式显示不同的图像，以及 ColorModeButton、ColorModeSwitch 或 ColorModeSelect 组件来切换亮色和暗色模式。

您还可以使用useColorMode可组合项来构建您自己的自定义组件

ColorModeButton.vue

<script setup lang="ts">
import { useColorMode } from '@vueuse/core'

const colorMode = useColorMode()

const isDark = computed({
  get() {
    return colorMode.value === 'dark'
  },
  set(_isDark: boolean) {
    colorMode.preference = _isDark ? 'dark' : 'light'
  }
})
</script>

<template>
  <UButton
    :icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
    :color="color"
    :variant="variant"
    :aria-label="`Switch to ${isDark ? 'light' : 'dark'} mode`"
    @click="isDark = !isDark"
  />
</template>

配置

您可以使用 vite.config.ts 中的 colorMode 选项禁用此插件

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({
      colorMode: false
    })
  ]
})