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

本教程详细介绍了如何利用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;
}

当元素没有data-theme="dark"属性时，将应用:root中定义的默认（亮色）主题变量。当data-theme="dark"属性存在时，其定义的变量会覆盖:root中的同名变量，从而实现暗色主题。

问小白

免费使用DeepSeek满血版

下载

实现主题切换功能

我们将使用一个简单的HTML结构，包含一个用于切换主题的复选框。

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状态，在元素上添加或移除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);

在这段增强的代码中：

1. 页面加载时，首先检查localStorage中是否存在名为theme的项。
2. 如果存在，则根据savedTheme的值设置元素的data-theme属性，并相应地更新复选框的checked状态。
3. 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未加载或用户未设置偏好时，页面也能正常显示。

通过这种方法，您可以轻松地为您的网页应用添加动态主题切换功能，同时保持代码的整洁和高效。