🌐 Nodejs.cn

Nuxt

PreviousNext

为你的 Nuxt 应用添加夜间模式。

夜间模式

🌐 Dark mode

安装依赖

🌐 Install Dependencies

pnpm add -D @nuxtjs/color-mode

然后，将 @nuxtjs/color-mode 添加到你的 nuxt.config.ts 的模块部分

🌐 Then, add @nuxtjs/color-mode to the modules section of your nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '...',
    '@nuxtjs/color-mode'
  ],
  colorMode: {
    classSuffix: ''
  }
})

添加模式切换

🌐 Add a mode toggle

在你的网站上放置一个模式切换按钮，以在明夜间模式之间切换。

🌐 Place a mode toggle on your site to toggle between light and dark mode.

我们正在使用 useColorMode 来自 Nuxt Color Mode。

🌐 We're using useColorMode from Nuxt Color Mode.

可选，包括主题按钮的图标。

🌐 Optional, to include icons for theme button.

pnpm add -D @iconify/vue @iconify-json/radix-icons
components/ModeToggle.vue
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { Button } from '@/components/ui/button'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'

const colorMode = useColorMode()
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <Button variant="outline">
        <Icon icon="radix-icons:moon" class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
        <Icon icon="radix-icons:sun" class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
        <span class="sr-only">Toggle theme</span>
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent align="end">
      <DropdownMenuItem @click="colorMode.preference = 'light'">
        Light
      </DropdownMenuItem>
      <DropdownMenuItem @click="colorMode.preference = 'dark'">
        Dark
      </DropdownMenuItem>
      <DropdownMenuItem @click="colorMode.preference = 'system'">
        System
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>
ViteVitepress