利用 localstorage 在静态网站中自动记忆用户最后一次选择的深色或浅色模式，页面刷新或重新访问时无缝恢复，无需后端、不依赖框架，兼容所有现代浏览器。
利用 localstorage 在静态网站中自动记忆用户最后一次选择的深色或浅色模式，页面刷新或重新访问时无缝恢复，无需后端、不依赖框架，兼容所有现代浏览器。
要在静态 HTML 网站中实现「关闭再打开仍保持上次主题」的效果，核心在于将用户交互产生的状态持久化落地——而 localStorage 正是为此类轻量级、同源、客户端偏好存储而生的标准 API。
以下是一个完整、健壮、可直接集成到你现有代码中的实现方案（已优化错误处理、类型安全与可维护性）：
✅ 推荐实现（含初始化 + 切换 + 类型安全）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="color-scheme" content="light dark" />
<title>暗黑模式静态站点</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
body {
background: white;
color: black;
display: flex;
align-items: center;
justify-content: center;
font-family: "Arial", sans-serif;
}
a,
a:visited,
a:focus,
a:hover,
a:active {
color: black;
text-decoration: none;
}
/* 暗色模式样式：通过 data-theme 属性控制（更语义、更安全） */
html[data-theme="dark"] body {
background: #121212;
color: #e0e0e0;
}
html[data-theme="dark"] a,
html[data-theme="dark"] a:visited,
html[data-theme="dark"] a:focus,
html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:active {
color: #bb8fca;
}
</style>
</head>
<body>
<p><a href="#" class="contrast-toggle">? 切换暗黑模式</a></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<script>
const html = document.documentElement;
const button = document.querySelector('.contrast-toggle');
// ? 步骤1：页面加载时读取并应用本地存储的主题
function initTheme() {
const saved = localStorage.getItem('theme');
// 安全解析：支持 "dark" / "light" 字符串，也兼容旧版布尔字符串
if (saved === 'dark' || saved === 'light') {
html.dataset.theme = saved;
} else {
// 回退策略：优先尊重系统偏好（仅首次无存储时）
const systemPrefersDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches;
html.dataset.theme = systemPrefersDark ? 'dark' : 'light';
}
}
// ? 步骤2：封装切换逻辑（避免重复代码 & 提升可测试性）
function toggleTheme() {
const current = html.dataset.theme;
const next = current === 'dark' ? 'light' : 'dark';
html.dataset.theme = next;
localStorage.setItem('theme', next);
// 同步更新 meta[name="color-scheme"]，确保浏览器 UI（如地址栏、表单）配色一致
const metaColorScheme = document.querySelector('meta[name="color-scheme"]');
if (metaColorScheme) {
metaColorScheme.content = next === 'dark' ? 'dark light' : 'light dark';
}
}
// ? 步骤3：绑定事件
button.addEventListener('click', (e) => {
e.preventDefault();
toggleTheme();
});
// ? 步骤4：监听其他标签页变更（跨页同步）
window.addEventListener('storage', (e) => {
if (e.key === 'theme') {
html.dataset.theme = e.newValue || 'light';
}
});
// ? 初始化执行
initTheme();
</script>
</body>
</html>⚠️ 关键注意事项
-
不要仅依赖
classList.toggle()+ 字符串比较：原始代码中html.classList.contains('dark-mode')返回布尔值，但localStorage.setItem()存的是true/false字符串，后续=== 'true'判断易出错；改用data-theme字符串语义更清晰、扩展性更强。 -
<meta name="color-scheme">必须手动同步：否则 Safari/Chrome 地址栏、输入框等系统控件颜色不会随主题变化，造成视觉割裂。 -
多标签页需监听
storage事件：当前页修改localStorage不会触发自身storage事件，但其他同源标签页的修改会通知本页，实现跨页实时同步。 - 清除 localStorage 即重置：这是设计使然（隐私友好），若需永久记忆，才需引入后端用户偏好存储（如 IndexedDB 或服务端 API），对静态站不必要。
-
无障碍增强建议：为切换按钮添加
aria-pressed属性，并根据html.dataset.theme动态更新其状态，提升屏幕阅读器体验。
该方案零依赖、纯原生、一次写入全站通用，适用于任何静态托管平台（GitHub Pages、Vercel、Cloudflare Pages 等），且已适配 2026 年主流浏览器行为规范。
立即学习“前端免费学习笔记（深入）”；
