颜色模式

Nuxt UI 与 VueUse 集成,可轻松在亮色和暗色主题之间切换。

用法

Nuxt UI 会自动注册useDark可组合项作为 Vue 插件,因此无需额外设置。你可以直接使用它在亮色和暗色模式之间切换。

ColorModeButton.vue
<script setup>
import { useColorMode } from '@vueuse/core'

const mode = useColorMode()
</script>

<template>
  <UButton
    :icon="mode === 'dark' ? 'i-lucide-moon' : 'i-lucide-sun'"
    color="neutral"
    variant="ghost"
    @click="mode = mode === 'dark' ? 'light' : 'dark'"
  />
</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
    })
  ]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      colorMode: false
    })
  ]
})