Nuxt UI 与 Nuxt Color Mode 集成，可轻松在浅色和深色主题之间切换。
用法
Nuxt UI 会自动为您注册 @nuxtjs/color-mode 模块，因此无需额外设置。您只需使用 useColorMode 可组合项即可在浅色和深色模式之间切换：
ColorModeButton.vue
<script setup>
const colorMode = useColorMode()
const isDark = computed({
get() {
return colorMode.value === 'dark'
},
set(_isDark) {
colorMode.preference = _isDark ? 'dark' : 'light'
}
})
</script>
<template>
<ClientOnly v-if="!colorMode?.forced">
<UButton
:icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
color="neutral"
variant="ghost"
@click="isDark = !isDark"
/>
<template #fallback>
<div class="size-8" />
</template>
</ClientOnly>
</template>
您可以使用 nuxt.config.ts 中的 ui.colorMode 选项禁用 @nuxtjs/color-mode 模块：
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/content'],
css: ['~/assets/css/main.css'],
ui: {
colorMode: false
}
})