颜色模式

nuxtjs/color-mode
Nuxt UI 集成了 Nuxt Color Mode,可以轻松地在浅色和深色主题之间切换。

用法

Nuxt UI 会自动注册@nuxtjs/color-mode模块,因此无需额外设置。

组件

您可以使用内置的 ColorModeAvatarColorModeImage 组件来显示浅色和深色模式的不同图片,以及 ColorModeButtonColorModeSwitchColorModeSelect 组件来切换浅色和深色模式。

您还可以使用useColorMode组合函数来构建您自己的自定义组件

ColorModeButton.vue
<script setup lang="ts">
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"
      :aria-label="`Switch to ${isDark ? 'light' : 'dark'} mode`"
      @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/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    colorMode: false
  }
})