颜色模式
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
})
]
})