颜色模式

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