🌐 Nodejs.cn

Vitepress

PreviousNext

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

夜间模式

🌐 Dark mode

安装依赖

🌐 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.

我们正在使用 useToggle 来自 @vueuse/core。

一个带有实用函数的布尔开关器。

🌐 We're using useToggle from @vueuse/core.

A boolean switcher with utility functions.

components/ModeToggle.vue
<script setup lang="ts">
import { useToggle } from '@vueuse/core'
import { useData } from 'vitepress'
import { Button } from '@/registry/default/ui/button'

const { frontmatter, isDark } = useData()
const toggleDark = useToggle(isDark)
</script>

<template>
  <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>
</template>
NuxtAstro