在index.html中怎么给网页添加深色模式切换？

作者：袖梨 2026-07-19

直接用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，也不能响应系统变化：

立即学习“前端免费学习笔记（深入）”；

<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';}