Vite 项目中实现暗黑模式应使用 CSS 自定义属性 + data-theme 属性控制主题，配合 useDark（Vue/React 官方方案）或手动工具函数实现系统偏好读取、localStorage 持久化与手动切换，并注意 HMR 兼容性及 index.html 中 data-theme 默认值设置。
在 Vite 项目中实现暗黑模式主题切换，不需要专门的“暗黑模式包”，而是通过 CSS 自定义属性（CSS Variables） + JavaScript 控制 class 或媒体查询响应 + 可选的状态持久化来完成。核心是轻量、高效、与 Vite 的 HMR 兼容。
1. 基于 data-theme 属性控制主题
推荐在 <html> 标签上设置 data-theme="light" 或 data-theme="dark"，然后用 CSS 变量定义两套主题色：
:root {
--bg-color: #ffffff;
--text-color: #333333;
--border-color: #e0e0e0;
}
<p>html[data-theme="dark"] {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
--border-color: #333333;
}</p><p>body {
background-color: var(--bg-color);
color: var(--text-color);
border-color: var(--border-color);
}2. 使用 useDark（推荐：Vue / React 官方生态方案）
Vite 本身不提供主题逻辑，但 Vue 生态有 @vueuse/core/useDark，React 生态有 next-themes（也兼容 Vite）。以 Vue 为例：
- 安装：
npm install @vueuse/core - 在组件中使用：
import { useDark, useToggle } from '@vueuse/core'
<p>const isDark = useDark()
const toggleDark = useToggle(isDark)它会自动：
- 读取系统偏好（prefers-color-scheme）
- 同步到 <html data-theme>
- 持久化到 localStorage
- 支持手动切换
3. 手动实现（无框架或需完全自控时）
创建一个轻量工具函数，例如 src/utils/theme.ts：
立即学习“Java免费学习笔记（深入）”；
export function setTheme(theme: 'light' | 'dark') {
document.documentElement.setAttribute('data-theme', theme)
localStorage.setItem('theme', theme)
}
<p>export function getSavedTheme(): 'light' | 'dark' {
const saved = localStorage.getItem('theme')
if (saved === 'light' || saved === 'dark') return saved
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}</p><p>// 初始化
setTheme(getSavedTheme())在入口文件（如 main.ts）中调用初始化，并暴露全局切换方法供按钮调用。
4. 配合 Vite 的优化点
-
CSS 提取：确保主题变量写在全局 CSS（如
style.css）中，避免被模块化隔离 - HMR 友好：不要在 JS 中动态插入 style 标签改颜色——用 class 切换更稳定
- 服务端注意：纯前端方案无需 SSR 处理；若用 SSR（如 Vike/Vue SSR），需在服务端同步初始主题
不复杂但容易忽略：记得在 index.html 的 <html> 标签加 data-theme 占位符，并设默认值（如 data-theme="light"），避免首屏闪白/闪黑。
