实现暗黑模式的关键是css变量配合javaScript动态切换主题。1. 在:root中定义明暗主题颜色变量，通过[data-theme=”dark”]重写；2. 使用data-theme属性控制主题状态，页面默认应用根变量；3. 将CSS变量应用于元素样式，并添加过渡效果提升体验；4. javascript监听按钮点击，切换data-theme值并存入localStorage；5. 初次加载时可读取系统偏好自动适配主题。核心为CSS变量+data属性+js控制，结构清晰易维护。
实现暗黑模式的关键在于使用CSS变量配合JavaScript动态切换主题。html5本身不直接控制样式，但结合CSS和JS可以轻松实现主题切换，尤其是通过CSS自定义属性（变量）来管理颜色方案。
定义CSS变量
在CSS中定义明暗两种主题的颜色变量，通常写在:root选择器中，便于全局调用。
:root { --bg-color: #ffffff; --text-color: #333333; --border-color: #dddddd; } [data-theme="dark"] { --bg-color: #1a1a1a; --text-color: #f0f0f0; --border-color: #444444; }
通过data-theme属性控制整体主题状态，页面默认使用根变量，切换时只需更改该属性值。
应用CSS变量到页面元素
将定义好的变量用于实际样式中，确保所有颜色引用都使用变量。
立即学习“前端免费学习笔记（深入）”；
body { background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.3s, color 0.3s; } .card { border: 1px solid var(--border-color); padding: 1rem; }
加入过渡效果可以让主题切换更平滑，提升用户体验。
JavaScript动态切换主题
通过JS读取用户偏好或按钮操作，修改data-theme属性实现切换。
<button id="theme-toggle">切换暗黑模式</button> <script> const toggle = document.getElementById('theme-toggle'); const currentTheme = localStorage.getItem('theme') || 'light'; // 设置初始主题 document.documentElement.setAttribute('data-theme', currentTheme); toggle.addEventListener('click', () => { const theme = document.documentElement.getAttribute('data-theme'); const newTheme = theme === 'dark' ? 'light' : 'dark'; document.documentElement.setAttribute('data-theme', newTheme); localStorage.setItem('theme', newTheme); // 保存用户选择 }); </script>
利用localStorage记住用户上次选择，下次访问时自动应用对应主题。
可选：根据系统偏好自动适配
初次加载时判断系统是否为暗色模式，提供更自然的体验。
if (currentTheme === null && window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.setAttribute('data-theme', 'dark'); localStorage.setItem('theme', 'dark'); }
这样既支持手动切换，也能在未设置时跟随系统主题。
基本上就这些。核心是CSS变量 + data属性 + JavaScript控制，结构清晰，维护方便。不复杂但容易忽略细节，比如变量命名一致性、过渡动画和持久化存储。