使用CSS变量和JavaScript实现动态主题切换

花韻仙語

发布时间：2025-11-23 12:23:01

426人浏览过

来源于php中文网

原创

使用CSS变量和JavaScript实现动态主题切换

本教程详细介绍了如何利用css变量和html的data属性结合javascript，实现网页的动态主题切换功能，例如深色模式与浅色模式。相比直接操作document.stylesheets，这种方法更加简洁、高效且易于维护。文章还进一步探讨了如何使用localstorage来持久化用户的主题偏好，确保用户下次访问时能保留其选择。

动态主题切换的核心原理

在现代网页开发中，为用户提供自定义主题（如深色模式）已成为一项常见需求。传统的做法可能涉及通过JavaScript直接修改CSS规则，例如使用document.styleSheets API。然而，这种方法在处理复杂样式或频繁切换时，容易导致规则冲突、性能问题，甚至意外删除现有样式，正如原始问题中所遇到的情况。

一种更优雅、更推荐的解决方案是结合CSS变量（Custom Properties）和HTML元素的data属性。其核心思想是：

在CSS中定义一套默认的全局变量（通常在:root选择器下）。
为不同的主题（如深色模式）定义另一套变量，并通过特定的data属性选择器（例如[data-theme="dark"]）进行覆盖。
使用JavaScript动态地添加或移除HTML根元素（document.documentElement）上的data属性，从而触发CSS变量的切换，实现主题的即时更新。

实现步骤

1. 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>

请注意，JavaScript文件（app.js）应在</body>标签之前引入，以确保DOM元素加载完毕。

立即学习“Java免费学习笔记（深入）”；

2. CSS变量定义

在style.css文件中，我们将定义主题相关的CSS变量。首先是默认（浅色）主题的变量，然后在[data-theme="dark"]选择器下定义深色主题的变量，它们将覆盖默认值。

/* 默认主题 (浅色模式) */
:root {
  --m-background: #ffffff; /* 主背景色 */
  --m-fontcolor: #000000;   /* 主字体颜色 */
  --m-boxcolor: #acacac;    /* 盒子背景色 */
}

/* 深色模式变量覆盖 */
[data-theme="dark"] {
  --m-background: #262626;
  --m-fontcolor: #ffffff;
  --m-boxcolor: #404040;
}

/* 应用CSS变量到页面元素 */
body {
  height: 100vh;
  display: flex;
  flex-direction: column; /* 调整为列方向，使内容居中 */
  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;
  margin-bottom: 20px; /* 添加一些间距 */
  transition: background-color 0.3s ease; /* 添加过渡效果 */
}

这里，body和#box的样式直接引用了CSS变量。当<html>元素上存在data-theme="dark"属性时，深色模式的变量就会生效，覆盖掉:root中定义的默认变量。

3. JavaScript逻辑实现

现在，我们编写app.js来处理主题切换的逻辑。

// 获取主题切换复选框
const themeToggleCheckbox = document.getElementById('checkbox');

/**
 * 处理主题切换事件
 * @param {Event} e - 触发事件的对象
 */
function handleThemeChange(e) {
    if (e.target.checked) {
        // 如果复选框被选中，则设置为深色模式
        document.documentElement.setAttribute('data-theme', 'dark');
    } else {
        // 如果复选框未选中，则设置为浅色模式
        document.documentElement.setAttribute('data-theme', 'light');
    }
}

// 监听复选框的change事件
themeToggleCheckbox.addEventListener('change', handleThemeChange, false);

这段JavaScript代码非常简洁：

歌者PPT

歌者PPT，AI 写 PPT 永久免费

下载

它首先获取到ID为checkbox的复选框元素。
handleThemeChange函数根据复选框的checked状态，来决定在<html>元素上设置data-theme="dark"还是data-theme="light"。
最后，通过addEventListener将handleThemeChange函数绑定到复选框的change事件上。

至此，一个基本的主题切换功能已经完成。

增强：使用LocalStorage持久化主题偏好

用户可能希望他们的主题选择在下次访问网站时依然有效。这可以通过使用localStorage来实现。localStorage允许我们在用户的浏览器中存储键值对数据，即使浏览器关闭后数据也不会丢失。

1. 更新JavaScript代码

我们将修改app.js，在页面加载时检查localStorage中是否有保存的主题偏好，并在用户切换主题时保存新的偏好。

// 获取主题切换复选框
const themeToggleCheckbox = document.getElementById('checkbox');
// 获取当前保存的主题偏好，如果没有则默认为null
const savedTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;

// 在页面加载时检查并应用用户保存的主题偏好
if (savedTheme) {
    document.documentElement.setAttribute('data-theme', savedTheme);
    // 如果保存的主题是深色模式，则将复选框设置为选中状态
    if (savedTheme === 'dark') {
        themeToggleCheckbox.checked = true;
    }
}

/**
 * 处理主题切换事件，并保存偏好到LocalStorage
 * @param {Event} e - 触发事件的对象
 */
function handleThemeChange(e) {
    if (e.target.checked) {
        // 设置为深色模式
        document.documentElement.setAttribute('data-theme', 'dark');
        // 保存偏好到LocalStorage
        localStorage.setItem('theme', 'dark');
    } else {
        // 设置为浅色模式
        document.documentElement.setAttribute('data-theme', 'light');
        // 保存偏好到LocalStorage
        localStorage.setItem('theme', 'light');
    }
}

// 监听复选框的change事件
themeToggleCheckbox.addEventListener('change', handleThemeChange, false);

代码解释：

在脚本开始时，我们尝试从localStorage中获取名为theme的值。
如果savedTheme存在，我们就将<html>元素的data-theme属性设置为这个值。同时，如果savedTheme是dark，我们还会将复选框设置为checked状态，以同步UI。
在handleThemeChange函数中，除了设置data-theme属性外，我们还增加了localStorage.setItem('theme', 'dark')或localStorage.setItem('theme', 'light')来保存用户的选择。