组件
夜间模式
🌐 Dark mode
::vue-school-link{lesson="dark-mode-with-shadcn-vue" placement="top"} 观看一段关于如何使用 shadcn-vue 启用夜间模式的 Vue School 视频。::
安装依赖
🌐 Install Dependencies
pnpm add @vueuse/core
可选，包括主题按钮的图标。
🌐 Optional, to include icons for theme button.
pnpm add -D @iconify/vue @iconify-json/radix-icons
添加模式切换
🌐 Add a mode toggle
在你的网站上放置一个模式切换按钮，以在明夜间模式之间切换。
🌐 Place a mode toggle on your site to toggle between light and dark mode.
我们正在使用 useColorMode 来自 @vueuse/core。
响应式颜色模式（暗色 / 亮色 / 自定义）并支持自动数据持久化。
🌐 We're using useColorMode from @vueuse/core.
Reactive color mode (dark / light / customs) with auto data persistence.
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { useColorMode } from '@vueuse/core'
import { Button } from '@/components/ui/button'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
// Pass { disableTransition: false } to enable transitions
const mode = 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="mode = 'light'">
Light
</DropdownMenuItem>
<DropdownMenuItem @click="mode = 'dark'">
Dark
</DropdownMenuItem>
<DropdownMenuItem @click="mode = 'auto'">
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</template>