实现HTML网页的主题切换与暗色模式适配，核心是通过CSS变量定义不同主题的样式，再结合JavaScript动态修改根元素的属性，同时兼容系统自带的暗色模式偏好设置。
基础主题方案设计
首先通过CSS变量定义两套主题的样式参数，在根元素上声明变量，不同主题下修改变量值即可生效。
/* 定义CSS变量 */
:root {
--bg-color: #ffffff;
--text-color: #333333;
--primary-color: #1677ff;
}
/* 暗色主题变量 */
[data-theme="dark"] {
--bg-color: #1a1a1a;
--text-color: #e5e5e5;
--primary-color: #4096ff;
}
/* 应用变量到页面元素 */
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
.btn {
background-color: var(--primary-color);
color: #ffffff;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}主题切换逻辑实现
切换主题时只需要修改根元素的data-theme属性，同时可以将用户的选择保存到本地存储，避免刷新后主题重置。
// 获取主题切换按钮
const themeToggleBtn = document.getElementById('theme-toggle');
// 获取当前保存的主题，默认使用系统主题
let currentTheme = localStorage.getItem('theme') || 'system';
// 初始化主题
function initTheme() {
if (currentTheme === 'system') {
// 跟随系统主题
const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.setAttribute('data-theme', systemDark ? 'dark' : 'light');
} else {
document.documentElement.setAttribute('data-theme', currentTheme);
}
}
// 切换主题
themeToggleBtn.addEventListener('click', () => {
const root = document.documentElement;
const currentDataTheme = root.getAttribute('data-theme');
const newTheme = currentDataTheme === 'dark' ? 'light' : 'dark';
root.setAttribute('data-theme', newTheme);
// 保存用户选择
localStorage.setItem('theme', newTheme);
currentTheme = newTheme;
});
// 监听系统主题变化
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
// 仅当用户选择跟随系统时更新主题
if (currentTheme === 'system') {
document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
}
});
// 页面加载时初始化主题
initTheme();HTML页面结构
页面中只需要添加对应的切换按钮，不需要额外的复杂结构。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主题切换示例</title>
<link rel="stylesheet" href="theme.css">
</head>
<body>
<h2>主题切换演示</h2>
<p>点击按钮切换亮色和暗色主题，刷新页面后主题会保持上一次的选择。</p>
<button id="theme-toggle" class="btn">切换主题</button>
<script src="theme.js"></script>
</body>
</html>注意事项
- 所有颜色相关的样式尽量使用CSS变量，避免硬编码颜色值，方便后续扩展更多主题
- 主题切换时添加过渡动画，避免样式突变导致视觉不适
- 暗色模式下注意对比度，避免文字和背景颜色过于接近影响可读性
- 图片等媒体内容也可以根据主题调整，比如暗色模式下给图片添加轻微的亮度调整
注意：CSS变量兼容IE11及以下版本浏览器有问题，如果需要兼容旧浏览器，可以考虑使用类名切换样式的方式替代CSS变量方案。
HTML暗色模式适配CSS变量主题切换JavaScript修改时间：2026-06-03 22:48:00