夜间模式需修改background-color、color、border-color和box-shadow等颜色相关CSS属性，用自定义属性集中管理并配合[data-theme="dark"]切换，JS需同步DOM属性、localStorage及系统偏好，避免FOUC需在head内联预设主题样式。
夜间模式需要改哪些 CSS 属性？
夜间模式本质是切换一组颜色值，核心要改的是 background-color、color、border-color 和部分 box-shadow。别碰字体大小或布局，否则会破坏可访问性和响应式表现。用 CSS 自定义属性（--bg-primary、--text-secondary 等）集中管理这些值，比直接写死颜色更可控。
推荐在 :root 下定义两套变量：一套默认（日间），一套加 [data-theme="dark"] 选择器覆盖。这样 JS 只需切 body 的 data 属性，样式自动响应，不用重写整套 class。
用 JavaScript 切换主题时要注意什么？
关键不是“加 class”，而是同步三件事：DOM 属性、本地存储、系统偏好 fallback。
-
document.documentElement.setAttribute('data-theme', 'dark') 或 'light'，确保根元素带正确标记
- 立刻执行
localStorage.setItem('theme', 'dark')，避免刷新丢失
- 检查
window.matchMedia('(prefers-color-scheme: dark)').matches，首次加载时优先尊重系统设置，再看 localStorage
- 不要用
onclick="toggleTheme()" 写内联事件，绑定 addEventListener 更利于调试和复用
按钮状态怎么和实际主题保持一致？
按钮文案或图标容易不同步，比如点了一次却还是显示“开启夜间模式”。必须在每次切换后显式更新按钮：
- 用
textContent 或 aria-label 更新文字，例如：btn.textContent = currentTheme === 'dark' ? '切换到日间' : '切换到夜间'
- 用
setAttribute('aria-pressed', currentTheme === 'dark') 提供无障碍反馈
- 避免仅靠 class 名（如
.is-active）判断状态——它可能滞后于真实 theme 值
为什么页面偶尔闪一下白底再变黑？
这是 CSS 未及时生效导致的 FOUC（Flash of Unstyled Content）。根源通常是：CSS 在 JS 执行完才加载，或 JS 在 DOM 就绪前运行。
document.documentElement.setAttribute('data-theme', 'dark') 或 'light'，确保根元素带正确标记localStorage.setItem('theme', 'dark')，避免刷新丢失window.matchMedia('(prefers-color-scheme: dark)').matches，首次加载时优先尊重系统设置，再看 localStorageonclick="toggleTheme()" 写内联事件，绑定 addEventListener 更利于调试和复用- 用
textContent或aria-label更新文字，例如：btn.textContent = currentTheme === 'dark' ? '切换到日间' : '切换到夜间' - 用
setAttribute('aria-pressed', currentTheme === 'dark')提供无障碍反馈 - 避免仅靠 class 名（如
.is-active）判断状态——它可能滞后于真实 theme 值
为什么页面偶尔闪一下白底再变黑？ 这是 CSS 未及时生效导致的 FOUC（Flash of Unstyled Content）。根源通常是：CSS 在 JS 执行完才加载，或 JS 在 DOM 就绪前运行。
解决方法只有两个：
- 把主题判断逻辑提到
里，用内联<style></style>预设初始主题（例如根据localStorage或matchMedia输出对应 CSS） - 给
加一个class="no-js"，JS 加载成功后移除，并用 CSS 写html.no-js { background: white; }和html:not(.no-js) { background: var(--bg-primary); }控制过渡
系统偏好、本地存储、手动切换这三层逻辑稍有错位，就会让颜色跳变一次。真正稳定的夜间模式，不在于功能多炫，而在于第一次渲染就对。
