本教程详细介绍了如何利用CSS自定义属性（变量）和JavaScript实现网页的动态主题切换功能。文章摒弃了直接操作CSS规则的复杂方法，转而采用在HTML根元素上添加`data-theme`属性的策略，通过CSS选择器高效地应用不同主题样式。此外，还演示了如何结合`localStorage`实现用户主题偏好的持久化存储，从而优化用户体验。
在现代网页应用中，为用户提供个性化的主题选择（如亮色模式和暗色模式）已成为提升用户体验的重要一环。传统上，开发者可能会尝试通过JavaScript直接修改CSS样式规则，例如使用document.styleSheets API。然而，这种方法往往复杂且容易出错，尤其是在涉及动态添加或删除规则时，可能导致样式冲突或意外行为。
本教程将介绍一种更简洁、更健壮的方法，即利用CSS自定义属性（CSS变量）结合HTML的data-*属性来高效实现动态主题切换。
核心概念：CSS变量与data-theme属性
CSS自定义属性（变量）允许我们定义可重用的值，并在整个样式表中引用它们。这使得主题管理变得异常简单，我们只需修改变量的值即可改变整个网站的外观。
立即学习“Java免费学习笔记（深入）”；
:root {
--m-background: #ffffff; /* 默认背景色 */
--m-fontcolor: #000000; /* 默认字体颜色 */
--m-boxcolor: #acacac; /* 默认盒子背景色 */
}
body {
background-color: var(--m-background);
color: var(--m-fontcolor);
}
#box {
background-color: var(--m-boxcolor);
}data-theme属性是一个自定义数据属性，我们可以将其添加到HTML的根元素（<html>）上，用于标记当前激活的主题。通过CSS选择器，我们可以根据这个属性的值来覆盖默认的CSS变量。
/* 当HTML根元素具有data-theme="dark"属性时，应用暗色主题变量 */
[data-theme="dark"] {
--m-background: #262626;
--m-fontcolor: #ffffff;
--m-boxcolor: #404040;
}当<html>元素没有data-theme="dark"属性时，将应用:root中定义的默认（亮色）主题变量。当data-theme="dark"属性存在时，其定义的变量会覆盖:root中的同名变量，从而实现暗色主题。
实现主题切换功能
我们将使用一个简单的HTML结构，包含一个用于切换主题的复选框。
HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<title>动态主题切换</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div id="box">
<label class="theme-input" for="checkbox">
暗色模式?
<input type="checkbox" id="checkbox" />
</label>
</div>
<span id="text">这是一段示例文本</span>
<script src="/app.js"></script>
</body>
</html>请注意，script标签通常放在body的末尾，以确保DOM元素加载完毕后再执行JavaScript。
CSS样式（style.css）
:root {
/* 亮色模式变量 */
--m-background: #ffffff;
--m-fontcolor: #000000;
--m-boxcolor: #acacac;
}
/* 暗色模式变量，通过data-theme属性激活 */
[data-theme="dark"] {
--m-background: #262626;
--m-fontcolor: #ffffff;
--m-boxcolor: #404040;
}
/* 页面基础布局和样式 */
body {
height: 100vh;
display: flex;
flex-direction: column; /* 调整为列方向以便内容垂直排列 */
justify-content: center;
align-items: center;
background-color: var(--m-background); /* 使用CSS变量 */
color: var(--m-fontcolor); /* 使用CSS变量 */
font-family: sans-serif;
margin: 0;
transition: background-color 0.3s ease, color 0.3s ease; /* 平滑过渡 */
}
#box {
height: 10rem;
width: 15rem;
background-color: var(--m-boxcolor); /* 使用CSS变量 */
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1rem;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease; /* 平滑过渡 */
}
.theme-input label {
display: flex;
align-items: center;
cursor: pointer;
}
.theme-input input[type="checkbox"] {
margin-left: 0.5rem;
width: 20px;
height: 20px;
cursor: pointer;
}JavaScript逻辑（app.js）
// 获取复选框元素
const themeCheckbox = document.getElementById('checkbox');
/**
* 根据复选框状态切换主题
* @param {Event} e 触发事件对象
*/
function toggleTheme(e) {
if (e.target.checked) {
// 如果复选框被选中，设置data-theme为'dark'
document.documentElement.setAttribute('data-theme', 'dark');
} else {
// 如果复选框未被选中，设置data-theme为'light'
document.documentElement.setAttribute('data-theme', 'light');
}
}
// 监听复选框的change事件
themeCheckbox.addEventListener('change', toggleTheme, false);这段JavaScript代码非常简洁：它获取复选框，并监听其change事件。当复选框状态改变时，toggleTheme函数会根据复选框的checked状态，在<html>元素上添加或移除data-theme="dark"属性。
增强功能：主题偏好持久化
为了提供更好的用户体验，我们可以使用localStorage来记住用户的选择。当用户下次访问页面时，主题将自动加载上次选择的模式。
带有localStorage的JavaScript逻辑（app.js）
// 获取复选框元素
const themeCheckbox = document.getElementById('checkbox');
// 获取本地存储中的主题偏好，如果没有则默认为null
const savedTheme = localStorage.getItem('theme');
// 页面加载时检查并应用用户偏好主题
if (savedTheme) {
document.documentElement.setAttribute('data-theme', savedTheme);
// 如果保存的主题是暗色，则勾选复选框
if (savedTheme === 'dark') {
themeCheckbox.checked = true;
}
}
/**
* 根据复选框状态切换主题并保存偏好
* @param {Event} e 触发事件对象
*/
function toggleTheme(e) {
if (e.target.checked) {
// 设置data-theme为'dark'
document.documentElement.setAttribute('data-theme', 'dark');
// 将主题偏好保存到localStorage
localStorage.setItem('theme', 'dark');
} else {
// 设置data-theme为'light'
document.documentElement.setAttribute('data-theme', 'light');
// 将主题偏好保存到localStorage
localStorage.setItem('theme', 'light');
}
}
// 监听复选框的change事件
themeCheckbox.addEventListener('change', toggleTheme, false);在这段增强的代码中：
- 页面加载时，首先检查localStorage中是否存在名为theme的项。
- 如果存在，则根据savedTheme的值设置<html>元素的data-theme属性，并相应地更新复选框的checked状态。
- toggleTheme函数在切换主题的同时，也会将当前主题偏好存储到localStorage中。
总结与注意事项
-
优点：
- 简洁高效： 避免了直接操作复杂的CSS规则，通过修改一个HTML属性即可触发全局样式变化。
- 可维护性强： 主题样式集中在CSS中，通过变量管理，易于理解和修改。
- 性能优越： 浏览器可以高效地重新计算样式，无需复杂的DOM操作。
- 可扩展性： 轻松添加更多主题（如data-theme="sepia"），只需在CSS中定义对应的变量集即可。
- CSS变量命名： 建议使用清晰、一致的命名约定（例如--component-property），以提高可读性。
- 过渡效果： 为了提供更平滑的用户体验，可以在CSS中为涉及主题变化的属性添加transition效果，如transition: background-color 0.3s ease, color 0.3s ease;。
- 无障碍性： 确保主题切换不会影响网站的无障碍性。例如，亮色和暗色模式都应保持足够的颜色对比度。
- 默认主题： 始终定义一个默认主题（通常是亮色模式）在:root选择器中，以确保在JavaScript未加载或用户未设置偏好时，页面也能正常显示。
通过这种方法，您可以轻松地为您的网页应用添加动态主题切换功能，同时保持代码的整洁和高效。
