本教程详细介绍了如何利用css自定义属性和html的`data-theme`属性，结合javascript实现网页的动态主题切换功能，例如深色模式和浅色模式。文章首先分析了直接操作`document.stylesheets`的潜在问题，随后提供了一种更健壮、易维护的解决方案，并进一步展示了如何使用`localstorage`来持久化用户的选择，确保主题在页面刷新后依然保持。
在现代网页设计中，提供用户自定义主题（如深色模式和浅色模式）已成为提升用户体验的重要功能。本文将深入探讨一种高效且易于维护的动态主题切换实现方案，该方案利用CSS自定义属性（CSS Variables）和HTML的data-*属性，并通过JavaScript进行控制。
传统CSS规则操作的局限性
一些开发者在尝试动态改变主题时，可能会考虑直接通过JavaScript操作document.styleSheets来删除或插入CSS规则。例如：
function themechange(){
var sheet = document.styleSheets[0];
var theme = document.getElementById("theme-input").value;
if (theme == 'Dark'){
sheet.deleteRule(".root", 1); // 这里的".root"实际上是无效的选择器，应为:root
sheet.insertRule(":root{--m-background: #262626; --m-fontcolor: #ffffff; --m-boxcolor: #404040}", 1);
}else{
if (theme == 'Light'){
sheet.deleteRule(".root", 1); // 同样的问题
sheet.insertRule(":root{--m-background: #ffffff; --m-fontcolor: #000000; --m-boxcolor: #acacac}", 1);
}}
}这种方法存在几个问题：
- 复杂性与维护难度： 直接操作CSS规则字符串容易出错，且在规则较多时维护起来非常复杂。
- 潜在的副作用： 不正确的规则删除或插入索引可能导致意想不到的样式丢失，例如在某些浏览器或特定CSS结构下，可能会错误地删除其他关键样式。
- 性能开销： 频繁地删除和插入CSS规则可能不如简单地切换类名或属性效率高。
因此，更推荐使用一种声明式、基于属性的方案。
立即学习“Java免费学习笔记（深入）”；
推荐方案：CSS自定义属性与data-theme属性
此方案的核心思想是：
- 在:root选择器中定义一组默认的CSS自定义属性（变量），作为浅色主题的颜色值。
- 为深色主题定义另一组CSS自定义属性，并将其作用域限制在一个特定的HTML属性上，例如[data-theme="dark"]。
- 通过JavaScript动态地向元素添加或移除data-theme="dark"属性，从而切换主题。
1. CSS样式定义
首先，在CSS文件中定义主题相关的自定义属性。
/* 默认主题 (浅色模式) */
:root {
--m-background: #ffffff;
--m-fontcolor: #000000;
--m-boxcolor: #acacac;
}
/* 深色主题：当html元素具有data-theme="dark"属性时生效 */
[data-theme="dark"] {
--m-background: #262626;
--m-fontcolor: #ffffff;
--m-boxcolor: #404040;
}
/* 其他通用样式，使用自定义属性 */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--m-background); /* 使用变量 */
color: var(--m-fontcolor); /* 使用变量 */
transition: background-color 0.3s ease, color 0.3s ease; /* 添加平滑过渡 */
}
#box {
height: 10rem;
width: 15rem;
background-color: var(--m-boxcolor); /* 使用变量 */
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}解释：
- :root选择器定义了全局的CSS变量，它们是默认的浅色主题值。
- [data-theme="dark"]选择器在元素（或任何带有此属性的祖先元素）被赋予data-theme="dark"时，会覆盖:root中定义的同名变量，从而应用深色主题的颜色。
- 页面中的元素（如body和#box）通过var(--variable-name)来引用这些变量，无需直接修改元素的具体颜色值。
2. HTML结构
为了方便用户切换主题，我们可以使用一个复选框（checkbox）作为主题切换器。
动态主题切换
这是一段示例文本
注意事项：
3. JavaScript逻辑实现
JavaScript负责监听用户操作，并根据操作结果修改元素的data-theme属性。
// 获取主题切换的复选框
const getChk = document.querySelector('.theme-input input[type="checkbox"]');
// 定义主题切换函数
function themeChange(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事件
getChk.addEventListener('change', themeChange, false);解释：
- document.querySelector()用于获取页面中的复选框元素。
- document.documentElement指向元素。
- setAttribute('data-theme', 'dark')或setAttribute('data-theme', 'light')会动态地改变元素的data-theme属性。当属性值变为dark时，CSS中[data-theme="dark"]的规则就会生效，覆盖默认的:root变量。
增强功能：持久化用户主题偏好
为了在用户刷新页面或下次访问时仍能记住其选择的主题，我们可以利用localStorage来存储用户的偏好。
1. 更新JavaScript逻辑
// 获取主题切换的复选框
const getChk = document.querySelector('.theme-input input[type="checkbox"]');
// 获取存储在localStorage中的主题偏好
const savedTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
// 页面加载时检查并应用用户偏好
if (savedTheme) {
document.documentElement.setAttribute('data-theme', savedTheme);
// 如果保存的主题是'dark'，则将复选框设为选中状态
if (savedTheme === 'dark') {
getChk.checked = true;
}
}
// 定义主题切换函数
function themeChange(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事件
getChk.addEventListener('change', themeChange, false);解释：
- 在脚本开始时，localStorage.getItem('theme')尝试从本地存储中读取名为'theme'的值。
- 如果存在已保存的主题，则立即将其应用到元素的data-theme属性上，并相应地设置复选框的状态。
- 在themeChange函数中，每次主题切换时，除了更新data-theme属性，还会通过localStorage.setItem('theme', 'dark')或'light'来更新本地存储中的主题偏好。
总结
通过CSS自定义属性和data-theme属性结合JavaScript，我们可以实现一个功能强大、易于管理且具有持久化能力的主题切换系统。这种方法避免了直接操作CSS规则的复杂性和潜在问题，使得主题逻辑更加清晰，代码更易于维护和扩展。同时，利用localStorage确保了用户体验的一致性，使得用户的个性化设置在多次访问间得以保留。
