Astro

为你的 Astro 应用添加深色模式。

深色模式 ​

创建内联主题脚本 ​

src/pages/index.astro
astro
---
import '../styles/globals.css'
---

<script is:inline>
	const getThemePreference = () => {
		if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
			return localStorage.getItem('theme');
		}
		return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
	};
	const isDark = getThemePreference() === 'dark';
	document.documentElement.classList[isDark ? 'add' : 'remove']('dark');

	if (typeof localStorage !== 'undefined') {
		const observer = new MutationObserver(() => {
			const isDark = document.documentElement.classList.contains('dark');
			localStorage.setItem('theme', isDark ? 'dark' : 'light');
		});
		observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
	}
</script>

<html lang="en">
	<body>
      <h1>Astro</h1>
	</body>
</html>
</script>

安装依赖 ​

pnpm add @vueuse/core

可选，为主题按钮包含图标。

pnpm add -D @iconify/vue @iconify-json/radix-icons

添加模式切换器 ​

在你的网站上放置一个模式切换器，用于在浅色和深色模式之间切换。

我们使用 @vueuse/core 中的 useColorMode。

响应式颜色模式（深色 / 浅色 / 自定义）并自动持久化数据。

vue
<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'

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'">
        浅色
      </DropdownMenuItem>
      <DropdownMenuItem @click="mode = 'dark'">
        深色
      </DropdownMenuItem>
      <DropdownMenuItem @click="mode = 'auto'">
        系统
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

显示模式切换器 ​

在你的网站上放置一个模式切换器，用于在浅色和深色模式之间切换。

src/pages/index.astro
astro
---
import '../styles/globals.css'
import ModeToggle from '@/components/ModeToggle.vue';
---

<!-- 内联脚本 -->

<html lang="en">
	<body>
      <h1>Astro</h1>
      <ModeToggle client:load />
	</body>
</html>
Edit this page on GitHub