配置 Light / Dark 双主题
本页负责把前端骨架推进到“默认支持双主题”的状态，让系统主题、手动切换和本地持久化形成一条稳定机制。
这篇教程解决什么
- 首屏应该如何决定当前主题。
- 主题切换和本地持久化应该放在哪个文件。
- 为什么后续页面应该依赖统一的主题开关，而不是各自判断深浅色。
前置条件
- 已完成 配置 Tailwind 与图标库。
pnpm dev已能启动前端样例。
配套代码
- 当前样例：frontend-starter
- 当前关注文件：main.ts
- 当前关注文件：app.css
我们要做的事
- 建立统一的主题解析函数。
- 把切换逻辑集中在前端入口脚本。
- 让用户选择可以持久化到
localStorage。
操作步骤
- 在 src/main.ts 中增加主题类型和本地存储 key：
type ThemeMode = "light" | "dark";
const themeStorageKey = "frontend-starter-theme";
- 加入首屏主题解析逻辑，顺序固定为：本地偏好优先，其次系统
prefers-color-scheme。
function getPreferredTheme(): ThemeMode {
const stored = window.localStorage.getItem(themeStorageKey);
if (stored === "light" || stored === "dark") {
return stored;
}
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
- 把主题应用到
document.documentElement：
function applyTheme(theme: ThemeMode): void {
document.documentElement.classList.toggle("dark", theme === "dark");
document.documentElement.dataset.theme = theme;
window.localStorage.setItem(themeStorageKey, theme);
}
- 页面渲染后立即应用首屏主题，并绑定切换按钮：
const initialTheme = getPreferredTheme();
applyTheme(initialTheme);
document.querySelector("#theme-toggle")?.addEventListener("click", toggleTheme);
- 在 src/app.css 中补上颜色模式声明：
:root {
color-scheme: light;
}
:root.dark {
color-scheme: dark;
}
验证结果
- 首次打开页面时，会跟随系统主题。
- 点击页面右上角切换按钮后，主题会立即切换。
- 刷新页面后，主题选择不会丢失。