颜色模式

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
    })
  ]
})