直接用data-theme控制主题切换，配合CSS变量和localStorage持久化，不刷新、不闪屏、不依赖第三方库：在index.html的<head>中内联脚本初始化theme，早于<link>执行；style.css中用:root和[data-theme="dark"] :root定义变量；按钮用<button>绑定click并同步aria-pressed与meta[name="color-scheme"]。
直接用 data-theme 控制，配合 CSS 变量 + localStorage 持久化，不 reload、不闪屏、不依赖第三方库。
怎么在 index.html 里加切换按钮（且不闪屏）
把初始化逻辑塞进 <head> 里的内联 <script>，避免 DOM 渲染完才设主题导致白屏一闪：
<head>
<script>
const saved = localStorage.getItem('theme');
document.documentElement.dataset.theme = saved || (
window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
);
</script>
<link rel="stylesheet" href="style.css">
</head>
- 必须放在
<link>标签之前，否则 CSS 已加载，主题还没生效 - 别用
DOMContentLoaded—— 那时页面已开始渲染，闪屏不可避免 -
document.documentElement是<html>元素，比操作body更可靠（比如 meta 标签、color-scheme 响应都依赖它）
style.css 里怎么写两套颜色（用 CSS 变量）
所有可变色属性都得从 var(--xxx) 取值，否则切了 data-theme 也没用：
:root {
--bg: #fff;
--text: #111;
--border: #ddd;
}
[data-theme="dark"] :root {
--bg: #121212;
--text: #eee;
--border: #333;
}
body {
background-color: var(--bg);
color: var(--text);
border-color: var(--border);
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
- 别写成
.dark { ... }然后给body加 class —— 这样无法控制<meta name="color-scheme"> -
[data-theme="dark"] :root写法比@media (prefers-color-scheme: dark)更主动，能覆盖系统偏好 - 所有用到颜色的地方（文字、背景、边框、阴影、svg fill）都要走变量，漏一个就“局部亮着”
切换按钮怎么写（JS 绑定 + 无障碍支持）
用 <button>，别用 checkbox + label 的纯 CSS 方案 —— 它没法存 localStorage，也不能响应系统变化：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
<button id="theme-toggle" aria-pressed="false">?</button>
const btn = document.getElementById('theme-toggle');
const html = document.documentElement;
function setTheme(theme) {
html.dataset.theme = theme;
localStorage.setItem('theme', theme);
btn.setAttribute('aria-pressed', theme === 'dark');
}
btn.addEventListener('click', () => {
const current = html.dataset.theme;
setTheme(current === 'dark' ? 'light' : 'dark');
});
// 初始化时同步 aria 状态
btn.setAttribute('aria-pressed', html.dataset.theme === 'dark');
-
aria-pressed是给读屏器看的，必须手动同步，不能靠 CSS 伪类 - 别监听
matchMedia().addEventListener自动切主题 —— 用户点过“开深色”，系统一变暗又顶回去，体验断裂 - 按钮文案建议用图标+sr-only 文字（如
<span class="sr-only">切换深色模式</span>），兼顾可访问性
为什么 meta[name="color-scheme"] 也得手动更新
只改页面样式，不更新这个 meta，Chrome 地址栏、输入框、滚动条等浏览器 UI 还是按默认主题渲染，造成视觉割裂：
function updateColorSchemeMeta() {
const theme = document.documentElement.dataset.theme;
const meta = document.querySelector('meta[name="color-scheme"]');
if (!meta) {
const newMeta = document.createElement('meta');
newMeta.name = 'color-scheme';
document.head.appendChild(newMeta);
}
document.querySelector('meta[name="color-scheme"]').content =
theme === 'dark' ? 'dark only' : 'light only';
}
- 必须在每次
setTheme()后调用它，包括初始化时 -
dark only比dark更严格，防止浏览器 fallback 到 light - 这个 meta 不会自动随
data-theme变，必须 JS 显式控制
最容易被忽略的是：所有颜色都要走 CSS 变量，meta[name="color-scheme"] 要手动同步，以及初始化脚本必须塞在 <head> 里尽早执行 —— 少一个，用户就会看到闪屏、割裂或失效。
