发布于 由admin

JavaScript 与 CSS 变量交互：利用 setProperty 动态修改 CSS 变量实现主题切换

引言：动态样式的力量与CSS变量的崛起

在现代Web开发中，用户体验已成为核心竞争力。一个优秀的网站或应用不仅要功能强大，更要界面美观、响应迅速，并能适应用户的个性化需求。其中，界面的主题切换功能，例如经典的“亮色模式”与“暗色模式”，正是提升用户体验的重要一环。传统上，实现主题切换通常依赖于JavaScript动态修改元素的类名，然后通过CSS选择器匹配不同类名下的样式规则。这种方法虽然可行，但在处理复杂主题逻辑、多个可变属性以及需要高度灵活的自定义时，往往显得笨重且难以维护。

随着CSS自定义属性（Custom Properties），更广为人知的“CSS变量”的引入，前端样式管理迎来了一场革命。CSS变量允许开发者在CSS中定义可复用的值，并在整个样式表中引用这些值。更重要的是，这些变量遵循CSS的级联和继承规则，并且可以通过JavaScript进行读写。这为动态样式调整，特别是主题切换，提供了一种前所未有的优雅且强大的解决方案。

本讲座将深入探讨如何利用JavaScript与CSS变量进行交互，特别是聚焦于setProperty方法，来实现高效、灵活且易于维护的动态主题切换功能。我们将从CSS变量的基础知识讲起，逐步深入到JavaScript的API，最终构建一个完整的、具备持久化能力和平滑过渡效果的主题切换系统。

深入理解CSS变量：声明、作用域与回退

在深入JavaScript交互之前，我们必须对CSS变量本身有扎实的理解。CSS变量本质上是用户定义的CSS属性，它们以--开头命名，并可以存储任何有效的CSS值。

声明CSS变量

声明CSS变量非常简单，只需在任何CSS选择器中定义它：

/* 在根元素 :root 中声明全局CSS变量 */
:root {
  --primary-color: #007bff; /* 主题主色 */
  --secondary-color: #6c757d; /* 主题次色 */
  --background-color: #f8f9fa; /* 页面背景色 */
  --text-color: #212529; /* 文本颜色 */
  --border-radius: 5px; /* 边框圆角 */
}

/* 也可以在局部作用域中声明 */
.card {
  --card-background: #ffffff;
  --card-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

在上述代码中，我们通常会在:root伪类中声明全局变量。:root选择器代表文档的根元素（对于HTML文档而言就是<html>元素），在这里定义的变量可以在文档的任何地方被访问到。局部变量可以在特定元素或其后代元素中使用。

使用CSS变量

使用CSS变量时，需要通过var()函数来引用它们。var()函数接受至少一个参数：要引用的变量名。它还可以接受第二个可选参数，作为回退值，当引用的变量未定义时，将使用该回退值。

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: sans-serif;
}

h1 {
  color: var(--primary-color);
}

button {
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: var(--border-radius);
  cursor: pointer;
}

.card {
  background-color: var(--card-background, #eee); /* 如果 --card-background 未定义，则使用 #eee */
  box-shadow: var(--card-shadow);
  border-radius: var(--border-radius);
  padding: 20px;
  margin: 15px;
}

CSS变量的作用域、级联与继承机制

CSS变量与普通CSS属性一样，遵循级联和继承规则。

  • 作用域: 变量在其声明的选择器内部及其子元素中可见。这意味着在:root中声明的变量是全局的，因为所有元素都是<html>的子元素。在一个特定的类或ID中声明的变量，则只对该元素及其后代有效。
  • 级联: 如果同一个变量在不同地方被声明，那么优先级高的声明会覆盖优先级低的。例如，如果在:root中定义了--primary-color，然后在.button类中再次定义了--primary-color，那么.button元素及其子元素将使用.button中定义的--primary-color，而其他元素仍使用:root中定义的--primary-color。
  • 继承: 大部分CSS属性如color和font-size是可继承的，CSS变量也是如此。子元素会自动继承父元素上定义的CSS变量。

这种作用域和继承机制是CSS变量强大之处的关键，它允许我们通过在更高层级（如:root）重新定义变量来轻松实现全局主题切换，或者在组件级别实现局部样式定制。

代码示例：基本CSS变量使用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 变量基础示例</title>
    <style>
        /* 1. 在 :root 声明全局变量 */
        :root {
            --global-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            --global-text-color: #333;
            --global-background-color: #f4f4f4;
            --global-primary-color: #007bff;
            --global-secondary-color: #6c757d;
            --global-border-radius: 8px;
            --global-spacing: 16px;
        }

        /* 2. 在 body 中使用全局变量 */
        body {
            font-family: var(--global-font-family);
            color: var(--global-text-color);
            background-color: var(--global-background-color);
            margin: 0;
            padding: var(--global-spacing);
            line-height: 1.6;
        }

        h1, h2, h3 {
            color: var(--global-primary-color);
            margin-bottom: var(--global-spacing);
        }

        p {
            margin-bottom: var(--global-spacing);
        }

        /* 3. 定义一个卡片组件，并在其中声明和使用局部变量 */
        .card {
            /* 局部变量，只对 .card 及其子元素生效 */
            --card-background: #ffffff;
            --card-border: 1px solid #ddd;
            --card-padding: 20px;
            --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

            background-color: var(--card-background);
            border: var(--card-border);
            border-radius: var(--global-border-radius); /* 使用全局变量 */
            padding: var(--card-padding);
            margin-bottom: var(--global-spacing);
            box-shadow: var(--card-shadow);
        }

        .card h2 {
            color: var(--global-secondary-color); /* 卡片内部的标题使用全局次色 */
            margin-top: 0;
        }

        /* 4. 定义一个按钮样式，使用全局变量 */
        .button {
            display: inline-block;
            background-color: var(--global-primary-color);
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: var(--global-border-radius);
            cursor: pointer;
            text-decoration: none;
            font-size: 1rem;
            transition: background-color 0.3s ease;
        }

        .button:hover {
            background-color: darken(var(--global-primary-color), 10%); /* 这是一个伪代码，实际CSS不支持 darken 函数，但为了说明意图 */
            /* 实际CSS中需要预先定义 hover 颜色变量或使用 calc() / filter() */
            /* 例如：background-color: hsl(210, 100%, 25%); 如果 --global-primary-color 是 hsl(210, 100%, 35%) */
        }

        /* 覆盖局部变量以展示级联效果 */
        .special-card {
            --card-background: #e6f7ff; /* 覆盖 .card 的 --card-background */
            border-color: var(--global-primary-color);
        }
    </style>
</head>
<body>
    <h1>欢迎来到CSS变量的世界</h1>
    <p>这是一个使用CSS变量构建的基础页面布局。</p>

    <div class="card">
        <h2>普通卡片标题</h2>
        <p>这是卡片的内容。它使用了在<code>.card</code>选择器中定义的局部变量，同时也继承和使用了<code>:root</code>中定义的全局变量。</p>
        <a href="#" class="button">了解更多</a>
    </div>

    <div class="card special-card">
        <h2>特殊卡片标题</h2>
        <p>这是一个特殊的卡片。它覆盖了<code>.card</code>中定义的某些局部变量，展示了CSS变量的级联特性。</p>
        <a href="#" class="button">查看详情</a>
    </div>

    <button class="button">点击我</button>
</body>
</html>

上述示例清晰展示了CSS变量的声明、使用以及作用域和级联规则。这是我们进行JavaScript交互的基础。

JavaScript与CSS变量的桥梁：API概览

JavaScript与CSS变量的交互主要通过DOM元素的style属性及其背后的CSSStyleDeclaration接口实现。然而，直接操作element.style.property只能修改内联样式，无法直接读取或修改通过样式表定义的CSS变量。为此，我们需要借助window.getComputedStyle()方法。

获取计算样式：getComputedStyle()

window.getComputedStyle()方法返回一个CSSStyleDeclaration对象，其中包含了元素所有最终计算出的样式（包括通过样式表、内联样式以及用户代理样式表应用的所有样式），这些样式已经解析并准备好用于显示。

const rootElement = document.documentElement; // 获取 :root 元素 (即 <html>)
const computedStyles = getComputedStyle(rootElement);

console.log(computedStyles); // 包含了所有计算出的CSS属性和值

读取CSS变量：getPropertyValue()

一旦获取了元素的计算样式对象，我们就可以使用getPropertyValue()方法来读取CSS变量的值。getPropertyValue()接受一个参数：要读取的CSS属性名（包括自定义属性）。

const rootElement = document.documentElement;
const computedStyles = getComputedStyle(rootElement);

// 读取全局变量 --primary-color
const primaryColor = computedStyles.getPropertyValue('--primary-color');
console.log('当前主题主色:', primaryColor); // 输出: 当前主题主色: #007bff (假设在CSS中如此定义)

// 读取一个不存在的变量会返回空字符串
const nonExistentVar = computedStyles.getPropertyValue('--non-existent-var');
console.log('不存在的变量:', nonExistentVar); // 输出: 不存在的变量:

注意: getPropertyValue()返回的是字符串形式的原始值，不包含任何计算。例如，如果CSS中是var(--color-red)，它会返回var(--color-red)，而不是red。但对于--primary-color: #007bff;，它会直接返回#007bff。

修改CSS变量：setProperty()

这是本讲座的核心方法。setProperty()允许我们动态地设置元素的CSS属性，包括CSS变量。与直接设置element.style.propertyName不同，setProperty()可以设置任何CSS属性，而不仅仅是内联样式。当用于CSS变量时，它会修改该元素上该变量的定义。

setProperty()方法有三个参数：

  1. propertyName (字符串): 要设置的CSS属性名。对于CSS变量，这应该是完整的变量名，例如'--primary-color'。
  2. value (字符串): 要设置的新值。
  3. priority (可选字符串): 设置属性的优先级。如果设置为'important'，则会像CSS中的!important一样提升优先级。通常在修改CSS变量时不需要设置此参数。
const rootElement = document.documentElement;

// 修改全局变量 --primary-color 为新的值
rootElement.style.setProperty('--primary-color', '#dc3545'); // 将主色改为红色

// 再次读取以验证修改
const newPrimaryColor = getComputedStyle(rootElement).getPropertyValue('--primary-color');
console.log('修改后的主题主色:', newPrimaryColor); // 输出: 修改后的主题主色: #dc3545

当你在document.documentElement.style.setProperty()上调用此方法时，实际上是在<html>元素上设置了一个内联样式，例如<html style="--primary-color: #dc3545;">。由于内联样式具有最高的优先级，它会覆盖所有样式表中定义的--primary-color，从而实现全局主题的动态切换。

移除CSS变量：removeProperty()

removeProperty()方法用于移除元素上指定的CSS属性。当移除一个CSS变量时，该变量将不再在该元素上定义，此时将回退到其父元素或样式表中定义的该变量值，或者使用var()函数中指定的备用值。

const rootElement = document.documentElement;

// 假设之前设置了 --temp-color
rootElement.style.setProperty('--temp-color', 'purple');
console.log('设置的临时颜色:', getComputedStyle(rootElement).getPropertyValue('--temp-color'));

// 移除 --temp-color
rootElement.style.removeProperty('--temp-color');
console.log('移除后的临时颜色:', getComputedStyle(rootElement).getPropertyValue('--temp-color')); // 输出: 移除后的临时颜色: (空字符串)

代码示例：JS读取和修改单个CSS变量

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS与CSS变量交互示例</title>
    <style>
        :root {
            --primary-color: #007bff;
            --background-color: #f8f9fa;
            --text-color: #212529;
            --border-radius: 5px;
            --button-padding: 10px 20px;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: var(--background-color);
            color: var(--text-color);
            margin: 20px;
            transition: background-color 0.5s ease, color 0.5s ease; /* 添加过渡效果 */
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 30px;
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: var(--primary-color);
            text-align: center;
            margin-bottom: 20px;
            transition: color 0.5s ease; /* 添加过渡效果 */
        }

        .action-buttons {
            text-align: center;
            margin-top: 30px;
        }

        .action-buttons button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: var(--button-padding);
            border-radius: var(--border-radius);
            font-size: 1rem;
            cursor: pointer;
            margin: 0 10px;
            transition: background-color 0.3s ease;
        }

        .action-buttons button:hover {
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>动态主题颜色演示</h1>
        <p>通过点击下面的按钮，观察页面主色、背景色和文本颜色的变化。这展示了JavaScript如何通过<code>setProperty</code>方法动态修改CSS变量。</p>
        <p>当前主色: <span id="currentPrimaryColor">#007bff</span></p>

        <div class="action-buttons">
            <button id="setBlueBtn">设为蓝色</button>
            <button id="setGreenBtn">设为绿色</button>
            <button id="setRedBtn">设为红色</button>
            <button id="resetBtn">重置</button>
            <button id="toggleBgBtn">切换背景/文本</button>
        </div>
    </div>

    <script>
        // 获取根元素
        const rootElement = document.documentElement;
        // 获取显示当前颜色的span元素
        const currentPrimaryColorSpan = document.getElementById('currentPrimaryColor');

        // 更新显示当前主色的函数
        function updateCurrentPrimaryColorDisplay() {
            const computedStyles = getComputedStyle(rootElement);
            const primaryColor = computedStyles.getPropertyValue('--primary-color').trim();
            currentPrimaryColorSpan.textContent = primaryColor || '未定义';
        }

        // 初始化显示
        updateCurrentPrimaryColorDisplay();

        // 事件监听器：设置蓝色主色
        document.getElementById('setBlueBtn').addEventListener('click', () => {
            rootElement.style.setProperty('--primary-color', '#007bff');
            updateCurrentPrimaryColorDisplay();
        });

        // 事件监听器：设置绿色主色
        document.getElementById('setGreenBtn').addEventListener('click', () => {
            rootElement.style.setProperty('--primary-color', '#28a745');
            updateCurrentPrimaryColorDisplay();
        });

        // 事件监听器：设置红色主色
        document.getElementById('setRedBtn').addEventListener('click', () => {
            rootElement.style.setProperty('--primary-color', '#dc3545');
            updateCurrentPrimaryColorDisplay();
        });

        // 事件监听器：重置主色（移除内联设置，回退到CSS样式表定义的值）
        document.getElementById('resetBtn').addEventListener('click', () => {
            rootElement.style.removeProperty('--primary-color'); // 移除通过JS设置的内联变量
            updateCurrentPrimaryColorDisplay(); // 此时会回到CSS中定义的初始值
        });

        // 事件监听器：切换背景和文本颜色 (模拟简单主题切换)
        let isLightMode = true;
        document.getElementById('toggleBgBtn').addEventListener('click', () => {
            if (isLightMode) {
                rootElement.style.setProperty('--background-color', '#343a40'); // 暗色背景
                rootElement.style.setProperty('--text-color', '#f8f9fa');     // 亮色文本
                rootElement.style.setProperty('--primary-color', '#17a2b8');  // 切换主色以适应暗色模式
            } else {
                rootElement.style.setProperty('--background-color', '#f8f9fa'); // 亮色背景
                rootElement.style.setProperty('--text-color', '#212529');     // 暗色文本
                rootElement.style.setProperty('--primary-color', '#007bff');  // 恢复主色
            }
            isLightMode = !isLightMode;
            updateCurrentPrimaryColorDisplay();
        });

        // 页面加载时读取并显示初始颜色
        window.addEventListener('load', updateCurrentPrimaryColorDisplay);
    </script>
</body>
</html>

核心机制：setProperty的深度解析与实践

setProperty()是JavaScript与CSS变量交互的基石，尤其在动态主题切换场景中扮演着核心角色。理解其工作原理和优势至关重要。

setProperty(propertyName, value, priority) 方法签名

如前所述，setProperty()接受三个参数：

  • propertyName: 必须，一个字符串，表示要设置的CSS属性的名称。对于CSS变量，这总是以--开头的完整变量名，例如'--my-custom-color'。
  • value: 必须，一个字符串，表示要设置的属性值。这个值可以是任何有效的CSS值，例如'#ff0000'、'16px'、'bold'、'url("image.png")'等。
  • priority: 可选，一个字符串，表示该属性的优先级。目前唯一支持的值是'important'。如果设置为'important'，该属性的优先级将高于其他非!important的声明。在大多数动态主题切换场景中，我们通常不需要使用!important，因为通过JS设置在<html>元素上的内联样式已经具有足够高的优先级来覆盖样式表中的:root定义。

setProperty与直接设置style.property的区别和优势

在JavaScript中，我们也可以通过element.style.propertyName来设置元素的样式，例如element.style.backgroundColor = 'red'。那么，setProperty与这种方式有何不同和优势呢？

特性/方法 element.style.propertyName = value element.style.setProperty(propertyName, value, priority)
属性名格式 驼峰命名法（backgroundColor, fontSize） 原始CSS属性名（background-color, font-size）
支持CSS变量 不支持直接设置CSS变量（例如style.--primary-color会报错或无效） 支持设置CSS变量（例如setProperty('--primary-color', 'value')）
优先级 始终作为内联样式，优先级很高 始终作为内联样式，优先级很高；可选!important提升至最高
特殊字符 不支持包含连字符-的自定义属性名 支持包含连字符-的自定义属性名（如--my-var）
!important 无法直接设置 可以通过第三个参数设置为'important'
删除属性 通过设置为空字符串element.style.propertyName = '' 通过removeProperty(propertyName)方法

核心优势在于： setProperty()是唯一能够直接通过JavaScript操作CSS自定义属性（即CSS变量）的方法。这使得它成为动态主题切换和响应式设计的关键工具。通过修改CSS变量，我们可以间接影响大量依赖这些变量的CSS属性，而无需遍历和修改每一个具体的DOM元素样式。

动态修改CSS变量：深层影响

当我们在:root元素上（即document.documentElement）使用setProperty()修改一个CSS变量时，其影响是全局性的。所有在样式表中通过var()函数引用该变量的元素，都会立即响应这个变化。这正是实现主题切换魔法的关键。

示例：改变主题主色

假设我们有以下CSS：

:root {
  --theme-primary-color: #007bff;
}

body {
  font-family: sans-serif;
}

h1 {
  color: var(--theme-primary-color);
}

button {
  background-color: var(--theme-primary-color);
  color: white;
}

现在，通过JavaScript修改--theme-primary-color：

document.documentElement.style.setProperty('--theme-primary-color', 'green');

执行这行代码后，h1的文本颜色和button的背景颜色会立即变为绿色，因为它们都引用了--theme-primary-color。这种解耦的设计使得样式管理变得极其高效和灵活。

代码示例：使用setProperty动态修改样式

我们将构建一个更复杂的示例，演示如何通过setProperty修改多个CSS变量，从而实现更全面的主题切换。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>setProperty 深度实践</title>
    <style>
        /* 默认亮色主题变量 */
        :root {
            --theme-background-color: #f0f2f5;
            --theme-text-color: #333;
            --theme-primary-color: #007bff;
            --theme-secondary-color: #6c757d;
            --theme-card-background: #ffffff;
            --theme-card-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            --theme-border-radius: 8px;
            --theme-spacing: 15px;
            --theme-header-height: 60px;
        }

        /* 暗色主题变量覆盖 */
        [data-theme="dark"] {
            --theme-background-color: #2c3e50;
            --theme-text-color: #ecf0f1;
            --theme-primary-color: #3498db;
            --theme-secondary-color: #95a5a6;
            --theme-card-background: #3b5266;
            --theme-card-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        /* 全局样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--theme-background-color);
            color: var(--theme-text-color);
            line-height: 1.6;
            transition: background-color 0.5s ease, color 0.5s ease; /* 平滑过渡 */
        }

        .header {
            background-color: var(--theme-primary-color);
            color: white;
            padding: var(--theme-spacing) 0;
            text-align: center;
            height: var(--theme-header-height);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--theme-card-shadow);
            transition: background-color 0.5s ease, box-shadow 0.5s ease;
        }

        .container {
            max-width: 960px;
            margin: var(--theme-spacing) auto;
            padding: var(--theme-spacing);
        }

        .card {
            background-color: var(--theme-card-background);
            border-radius: var(--theme-border-radius);
            box-shadow: var(--theme-card-shadow);
            padding: calc(var(--theme-spacing) * 1.5);
            margin-bottom: var(--theme-spacing);
            transition: background-color 0.5s ease, box-shadow 0.5s ease;
        }

        h1, h2, h3 {
            color: var(--theme-primary-color);
            margin-top: 0;
            margin-bottom: var(--theme-spacing);
            transition: color 0.5s ease;
        }

        p {
            margin-bottom: var(--theme-spacing);
        }

        .button-group {
            display: flex;
            justify-content: center;
            gap: var(--theme-spacing);
            margin-top: 30px;
            margin-bottom: 30px;
        }

        .theme-button {
            background-color: var(--theme-primary-color);
            color: white;
            border: none;
            padding: 10px 25px;
            border-radius: var(--theme-border-radius);
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .theme-button:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }

        .color-picker-group {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }

        .color-picker-group label {
            min-width: 100px;
        }

        .color-picker-group input[type="color"] {
            width: 80px;
            height: 35px;
            border: none;
            padding: 0;
            cursor: pointer;
        }

        .color-picker-group input[type="text"] {
            flex-grow: 1;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: var(--theme-border-radius);
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>JavaScript & CSS 变量主题切换演示</h1>
    </div>

    <div class="container">
        <h2>主题控制面板</h2>
        <div class="button-group">
            <button class="theme-button" data-theme-name="light">亮色主题</button>
            <button class="theme-button" data-theme-name="dark">暗色主题</button>
            <button class="theme-button" data-theme-name="reset">重置主题</button>
        </div>

        <h3>实时自定义主题</h3>
        <p>调整下面的颜色选择器，立即预览自定义主题效果。</p>
        <div class="color-picker-group">
            <label for="customPrimaryColor">主色调:</label>
            <input type="color" id="customPrimaryColor" value="#007bff">
            <input type="text" id="customPrimaryColorText" value="#007bff">
        </div>
        <div class="color-picker-group">
            <label for="customBgColor">背景色:</label>
            <input type="color" id="customBgColor" value="#f0f2f5">
            <input type="text" id="customBgColorText" value="#f0f2f5">
        </div>
        <div class="color-picker-group">
            <label for="customTextColor">文本色:</label>
            <input type="color" id="customTextColor" value="#333">
            <input type="text" id="customTextColorText" value="#333">
        </div>

        <h2>页面内容</h2>
        <div class="card">
            <h3>卡片标题一</h3>
            <p>这是第一张卡片的内容。它会随着主题的变化而调整背景色、文本色和阴影。</p>
            <button class="theme-button">内部按钮</button>
        </div>

        <div class="card">
            <h3>卡片标题二</h3>
            <p>此卡片同样响应主题变化。通过修改根元素上的CSS变量，所有依赖这些变量的样式都会自动更新。</p>
            <p>无需遍历每个元素，大大简化了动态样式管理的复杂性。</p>
        </div>
    </div>

    <script>
        const rootElement = document.documentElement; // 获取根元素
        const themeButtons = document.querySelectorAll('.theme-button'); // 获取主题切换按钮

        // 定义主题配置对象
        const themes = {
            light: {
                '--theme-background-color': '#f0f2f5',
                '--theme-text-color': '#333',
                '--theme-primary-color': '#007bff',
                '--theme-secondary-color': '#6c757d',
                '--theme-card-background': '#ffffff',
                '--theme-card-shadow': '0 2px 5px rgba(0, 0, 0, 0.1)'
            },
            dark: {
                '--theme-background-color': '#2c3e50',
                '--theme-text-color': '#ecf0f1',
                '--theme-primary-color': '#3498db',
                '--theme-secondary-color': '#95a5a6',
                '--theme-card-background': '#3b5266',
                '--theme-card-shadow': '0 4px 8px rgba(0, 0, 0, 0.2)'
            },
            // 'reset'主题用于移除JS设置的变量，回退到CSS样式表中的定义
            reset: {}
        };

        /**
         * 应用指定主题到文档根元素。
         * @param {string} themeName - 要应用的主题名称（'light', 'dark', 'reset'或'custom'）。
         * @param {Object} [customVars={}] - 如果 themeName 为 'custom'，则为自定义变量对象。
         */
        function applyTheme(themeName, customVars = {}) {
            let currentThemeVars = {};

            if (themeName === 'custom') {
                currentThemeVars = customVars;
            } else if (themes[themeName]) {
                currentThemeVars = themes[themeName];
            } else {
                console.warn(`未知主题名称: ${themeName}`);
                return;
            }

            // 先移除所有之前通过JS设置的变量，确保回退到CSS定义或完全清除
            // 这种做法在切换到非自定义主题时尤其有用，防止残留自定义值
            // 或者，我们可以只覆盖当前主题中有的变量
            // 为了简化，这里我们假设每次切换都是完整的变量集合替换
            // 对于 'reset' 主题，我们不设置任何变量，而是依赖CSS文件中的 [data-theme="dark"] 规则
            // 所以对于 'light' 或 'dark'，我们通过设置 data-theme 属性来触发CSS规则
            // 而对于 'custom'，我们直接设置内联变量
            if (themeName === 'light' || themeName === 'dark') {
                rootElement.removeAttribute('style'); // 移除所有内联样式，包括JS设置的变量
                rootElement.setAttribute('data-theme', themeName);
            } else if (themeName === 'reset') {
                // 移除所有内联样式和data-theme属性，回退到 :root 默认值
                rootElement.removeAttribute('style');
                rootElement.removeAttribute('data-theme');
            } else if (themeName === 'custom') {
                rootElement.removeAttribute('data-theme'); // 自定义主题不依赖 data-theme 属性
                for (const [varName, varValue] of Object.entries(currentThemeVars)) {
                    rootElement.style.setProperty(varName, varValue);
                }
            }

            // 保存当前主题到 localStorage
            if (themeName !== 'custom') { // 自定义主题不直接保存为命名主题
                localStorage.setItem('selectedTheme', themeName);
            } else {
                localStorage.removeItem('selectedTheme'); // 如果是自定义主题，则清除上次保存的命名主题
                // 可以考虑保存自定义变量，但这里暂不实现
            }
        }

        // --- 主题切换按钮事件监听 ---
        themeButtons.forEach(button => {
            button.addEventListener('click', () => {
                const themeName = button.dataset.themeName;
                applyTheme(themeName);
            });
        });

        // --- 实时自定义主题逻辑 ---
        const customPrimaryColorInput = document.getElementById('customPrimaryColor');
        const customPrimaryColorText = document.getElementById('customPrimaryColorText');
        const customBgColorInput = document.getElementById('customBgColor');
        const customBgColorText = document.getElementById('customBgColorText');
        const customTextColorInput = document.getElementById('customTextColor');
        const customTextColorText = document.getElementById('customTextColorText');

        // 将颜色输入框和文本框的值同步
        function syncColorInputs(colorInput, textInput, varName) {
            colorInput.addEventListener('input', (event) => {
                const newColor = event.target.value;
                textInput.value = newColor;
                rootElement.style.setProperty(varName, newColor);
                localStorage.removeItem('selectedTheme'); // 切换到自定义模式，清除命名主题
            });
            textInput.addEventListener('input', (event) => {
                const newColor = event.target.value;
                // 简单的颜色格式验证 (可以更复杂)
                if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(newColor)) {
                    colorInput.value = newColor;
                    rootElement.style.setProperty(varName, newColor);
                    localStorage.removeItem('selectedTheme');
                }
            });
        }

        syncColorInputs(customPrimaryColorInput, customPrimaryColorText, '--theme-primary-color');
        syncColorInputs(customBgColorInput, customBgColorText, '--theme-background-color');
        syncColorInputs(customTextColorInput, customTextColorText, '--theme-text-color');

        // --- 页面加载时应用上次保存的主题或默认主题 ---
        function loadTheme() {
            const savedTheme = localStorage.getItem('selectedTheme');
            if (savedTheme && themes[savedTheme]) {
                // 对于 light/dark 主题，我们通过设置 data-theme 属性来触发CSS规则
                rootElement.setAttribute('data-theme', savedTheme);
            } else {
                // 默认应用亮色主题，或者根据系统偏好
                // 这里我们默认让CSS中的 :root 样式生效，即亮色主题
                rootElement.removeAttribute('data-theme');
                // 也可以根据 prefers-color-scheme 进行初始化
                // if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                //     applyTheme('dark');
                // } else {
                //     applyTheme('light');
                // }
            }
        }

        // 首次加载时调用
        loadTheme();

        // 当用户通过颜色选择器修改值时，更新文本框，并立即应用
        customPrimaryColorInput.addEventListener('change', (event) => {
            customPrimaryColorText.value = event.target.value;
            rootElement.style.setProperty('--theme-primary-color', event.target.value);
            localStorage.removeItem('selectedTheme'); // 用户自定义，不再是命名主题
        });
        customBgColorInput.addEventListener('change', (event) => {
            customBgColorText.value = event.target.value;
            rootElement.style.setProperty('--theme-background-color', event.target.value);
            localStorage.removeItem('selectedTheme');
        });
        customTextColorInput.addEventListener('change', (event) => {
            customTextColorText.value = event.target.value;
            rootElement.style.setProperty('--theme-text-color', event.target.value);
            localStorage.removeItem('selectedTheme');
        });

        // 将文本输入框的值同步到颜色选择器并应用
        customPrimaryColorText.addEventListener('input', (event) => {
            const val = event.target.value;
            if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(val)) {
                customPrimaryColorInput.value = val;
                rootElement.style.setProperty('--theme-primary-color', val);
                localStorage.removeItem('selectedTheme');
            }
        });
        customBgColorText.addEventListener('input', (event) => {
            const val = event.target.value;
            if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(val)) {
                customBgColorInput.value = val;
                rootElement.style.setProperty('--theme-background-color', val);
                localStorage.removeItem('selectedTheme');
            }
        });
        customTextColorText.addEventListener('input', (event) => {
            const val = event.target.value;
            if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(val)) {
                customTextColorInput.value = val;
                rootElement.style.setProperty('--theme-text-color', val);
                localStorage.removeItem('selectedTheme');
            }
        });
    </script>
</body>
</html>

这个示例展示了两种主题切换策略：

  1. 基于data-theme属性的CSS规则切换: 对于预定义的主题（亮色和暗色），我们通过JavaScript设置<html>元素的data-theme属性（例如data-theme="dark"）。CSS中定义了相应的选择器[data-theme="dark"]来覆盖:root中的默认变量。这种方式的好处是，主题的所有样式逻辑都保留在CSS中，JS只负责切换一个属性。
  2. 直接使用setProperty修改内联变量: 对于“重置主题”按钮，我们移除data-theme属性以及所有内联样式，使其回退到CSS中:root定义的默认值。对于实时自定义主题，我们直接使用setProperty在<html>元素上设置内联CSS变量，从而覆盖任何通过样式表定义的变量。

两种策略各有优劣，在实际项目中可以根据具体需求混合使用。对于复杂且固定的主题，data-attribute策略可以使CSS更易读；对于高度动态和用户自定义的场景，setProperty直接修改变量则更为灵活。

构建主题切换系统：从概念到实现

现在，我们将把之前学到的知识整合起来，构建一个健壮、用户友好且可持久化的主题切换系统。

A. 定义主题变量：结构化与语义化

一个好的主题切换系统始于清晰、语义化的CSS变量命名。变量名应该描述其用途，而不是其当前的值。例如，--primary-color比--blue更好，因为主色可能在不同主题中变为红色或绿色。

我们将定义一组核心变量，这些变量足以覆盖常见UI元素的基础样式：

/* base-theme.css (或直接放在 style 标签中) */
:root {
  /* 颜色 */
  --theme-background: #ffffff;          /* 页面背景 */
  --theme-text-color: #333333;           /* 主要文本颜色 */
  --theme-primary-color: #007bff;        /* 主操作色/品牌色 */
  --theme-secondary-color: #6c757d;      /* 次要操作色 */
  --theme-accent-color: #28a745;         /* 强调色 */
  --theme-border-color: #dddddd;         /* 边框颜色 */
  --theme-card-background: #f8f9fa;      /* 卡片背景 */
  --theme-code-background: #f0f0f0;      /* 代码块背景 */
  --theme-link-color: var(--theme-primary-color); /* 链接颜色 */

  /* 字体 */
  --theme-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --theme-font-size-base: 16px;
  --theme-line-height: 1.6;

  /* 间距 */
  --theme-spacing-sm: 8px;
  --theme-spacing-md: 16px;
  --theme-spacing-lg: 24px;

  /* 尺寸/形状 */
  --theme-border-radius: 4px;
  --theme-header-height: 60px;
  --theme-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

  /* 过渡 */
  --theme-transition-duration: 0.3s;
  --theme-transition-timing-function: ease-in-out;
}

变量命名约定建议：

  • 前缀：所有主题相关的变量都以--theme-开头，这样可以清楚地识别它们是可主题化的。
  • 语义化：--theme-primary-color比--blue更有意义。
  • 分类：将变量按照颜色、字体、间距等进行分组，提高可读性。

B. 实现多主题：Light, Dark 与 Custom

我们将实现三种主题：默认的亮色、暗色以及用户自定义主题。

Light Theme (默认/基础主题)

亮色主题通常作为默认样式，其变量直接定义在:root中。

/* 默认的亮色主题变量已在上面 :root 中定义 */

Dark Theme (暗色模式)

为了实现暗色模式，我们将定义一组覆盖亮色主题变量的选择器。最常见的做法是使用[data-theme="dark"]属性选择器。

[data-theme="dark"] {
  --theme-background: #2c3e50;
  --theme-text-color: #ecf0f1;
  --theme-primary-color: #3498db;
  --theme-secondary-color: #95a5a6;
  --theme-accent-color: #2ecc71;
  --theme-border-color: #4a6572;
  --theme-card-background: #3b5266;
  --theme-code-background: #232f3e;
  --theme-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

当JavaScript将<html>元素的data-theme属性设置为"dark"时，这些变量就会生效，覆盖:root中定义的同名变量。

Custom Theme (自定义主题)

自定义主题允许用户选择任意颜色。在这种情况下，我们将不再依赖data-theme属性，而是直接通过JavaScript的setProperty方法在<html>元素上设置内联样式。这些内联样式具有最高的优先级，会覆盖所有样式表中定义的CSS变量。

C. JavaScript主题切换逻辑

核心的JavaScript逻辑将包括一个函数来应用主题，以及事件监听器来触发这个函数。

// 获取根元素
const rootElement = document.documentElement;

// 定义主题变量集合
const themeVariables = {
    light: {
        '--theme-background': '#ffffff',
        '--theme-text-color': '#333333',
        '--theme-primary-color': '#007bff',
        '--theme-secondary-color': '#6c757d',
        '--theme-accent-color': '#28a745',
        '--theme-border-color': '#dddddd',
        '--theme-card-background': '#f8f9fa',
        '--theme-code-background': '#f0f0f0',
        '--theme-link-color': '#007bff',
        '--theme-box-shadow': '0 2px 5px rgba(0, 0, 0, 0.1)'
    },
    dark: {
        '--theme-background': '#2c3e50',
        '--theme-text-color': '#ecf0f1',
        '--theme-primary-color': '#3498db',
        '--theme-secondary-color': '#95a5a6',
        '--theme-accent-color': '#2ecc71',
        '--theme-border-color': '#4a6572',
        '--theme-card-background': '#3b5266',
        '--theme-code-background': '#232f3e',
        '--theme-link-color': '#3498db',
        '--theme-box-shadow': '0 4px 10px rgba(0, 0, 0, 0.3)'
    }
    // 注意：这里不再包含自定义主题的变量，因为它们是动态生成的
};

/**
 * 应用指定主题到文档根元素。
 * @param {string} themeName - 要应用的主题名称（'light', 'dark', 'custom'）。
 * @param {Object} [customColors={}] - 如果 themeName 为 'custom'，则为自定义颜色对象。
 */
function applyTheme(themeName, customColors = {}) {
    // 1. 清除所有通过JS设置的内联变量和 data-theme 属性
    rootElement.removeAttribute('style'); // 移除所有内联样式
    rootElement.removeAttribute('data-theme'); // 移除 data-theme 属性

    if (themeName === 'light' || themeName === 'dark') {
        // 对于预定义主题，通过设置 data-theme 属性来激活CSS规则
        rootElement.setAttribute('data-theme', themeName);
        // 保存到 localStorage
        localStorage.setItem('selectedTheme', themeName);
        localStorage.removeItem('customThemeColors'); // 清除自定义主题数据
    } else if (themeName === 'custom') {
        // 对于自定义主题，直接使用 setProperty 设置变量
        for (const [varName, varValue] of Object.entries(customColors)) {
            rootElement.style.setProperty(varName, varValue);
        }
        // 保存自定义主题的颜色值
        localStorage.setItem('customThemeColors', JSON.stringify(customColors));
        localStorage.setItem('selectedTheme', 'custom'); // 标记为自定义主题
    } else {
        console.warn(`未知主题名称: ${themeName}，将回退到默认主题。`);
        localStorage.removeItem('selectedTheme');
        localStorage.removeItem('customThemeColors');
    }
}

// 模拟页面中的主题切换按钮
// <button data-theme-name="light">亮色</button>
// <button data-theme-name="dark">暗色</button>
// <button data-theme-name="custom">应用自定义</button>
document.querySelectorAll('[data-theme-name]').forEach(button => {
    button.addEventListener('click', () => {
        const themeName = button.dataset.themeName;
        if (themeName === 'custom') {
            // 假设我们有用户输入的自定义颜色
            const customColors = {
                '--theme-primary-color': document.getElementById('customPrimaryColor').value,
                '--theme-background': document.getElementById('customBgColor').value,
                '--theme-text-color': document.getElementById('customTextColor').value
                // ... 其他自定义颜色
            };
            applyTheme('custom', customColors);
        } else {
            applyTheme(themeName);
        }
    });
});

D. 用户偏好持久化：localStorage的应用

为了让用户在下次访问时仍能看到他们选择的主题，我们需要将主题设置存储在浏览器中。localStorage是实现这一目标最简单、最常用的Web存储API。

/**
 * 页面加载时加载并应用用户偏好主题。
 */
function loadUserTheme() {
    const savedTheme = localStorage.getItem('selectedTheme');
    const customColorsJSON = localStorage.getItem('customThemeColors');

    if (savedTheme === 'custom' && customColorsJSON) {
        try {
            const customColors = JSON.parse(customColorsJSON);
            applyTheme('custom', customColors);
            // 还需要更新页面上的颜色选择器和文本框以反映加载的自定义颜色
            document.getElementById('customPrimaryColor').value = customColors['--theme-primary-color'] || '';
            document.getElementById('customPrimaryColorText').value = customColors['--theme-primary-color'] || '';
            document.getElementById('customBgColor').value = customColors['--theme-background'] || '';
            document.getElementById('customBgColorText').value = customColors['--theme-background'] || '';
            document.getElementById('customTextColor').value = customColors['--theme-text-color'] || '';
            document.getElementById('customTextColorText').value = customColors['--theme-text-color'] || '';
        } catch (e) {
            console.error("解析自定义主题颜色失败:", e);
            applyTheme('light'); // 出错时回退到默认亮色主题
        }
    } else if (savedTheme && (savedTheme === 'light' || savedTheme === 'dark')) {
        applyTheme(savedTheme);
    } else {
        // 如果没有保存的主题，可以根据系统偏好设置默认主题
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            applyTheme('dark');
        } else {
            applyTheme('light');
        }
    }
}

// 页面DOM加载完成后调用
document.addEventListener('DOMContentLoaded', loadUserTheme);

E. 平滑过渡与用户体验

为了避免主题切换时样式突兀地跳变，我们可以利用CSS的transition属性。在:root中定义一个全局的过渡变量，并将其应用到受主题影响的元素上。

:root {
  /* ... 其他变量 ... */
  --theme-transition-duration: 0.3s;
  --theme-transition-timing-function: ease-in-out;
}

body, h1, h2, h3, .card, .header {
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing-function),
    color var(--theme-transition-duration) var(--theme-transition-timing-function),
    border-color var(--theme-transition-duration) var(--theme-transition-timing-function),
    box-shadow var(--theme-transition-duration) var(--theme-transition-timing-function);
  /* 针对需要过渡的属性添加 transition */
}

通过在CSS中设置这些过渡，当--theme-开头的变量值改变时，所有引用这些变量的属性都会平滑地过渡到新值，极大地提升用户体验。

F. 高级主题切换：动态自定义与实时预览

在之前的setProperty深度实践示例中，我们已经包含了实时自定义主题的逻辑。用户通过颜色选择器（<input type="color">）选择颜色，JavaScript监听input事件，并立即调用rootElement.style.setProperty()来更新对应的CSS变量。这种方式提供了即时反馈，是优秀用户体验的关键。

// 假设这些元素已经存在于HTML中
const customPrimaryColorInput = document.getElementById('customPrimaryColor');
const customBgColorInput = document.getElementById('customBgColor');
const customTextColorInput = document.getElementById('customTextColor');

customPrimaryColorInput.addEventListener('input', (event) => {
    rootElement.style.setProperty('--theme-primary-color', event.target.value);
    // 同时更新文本框的值，如果需要
    document.getElementById('customPrimaryColorText').value = event.target.value;
    localStorage.setItem('selectedTheme', 'custom'); // 标记为自定义主题
    // 保存自定义颜色到 localStorage
    const currentCustomColors = {
        '--theme-primary-color': event.target.value,
        '--theme-background': customBgColorInput.value,
        '--theme-text-color': customTextColorInput.value
    };
    localStorage.setItem('customThemeColors', JSON.stringify(currentCustomColors));
});

// 类似地为 customBgColorInput 和 customTextColorInput 添加事件监听器

这种方式使得用户能够完全自由地定制界面，并通过localStorage将他们的选择持久化。

性能、可访问性与最佳实践

性能考量

  • 频繁修改的优化: 尽管现代浏览器对CSS变量的修改进行了高度优化，但如果JavaScript在短时间内非常频繁地修改大量CSS变量（例如在mousemove事件中），仍然可能导致性能问题。对于此类场景，可以考虑使用节流（throttling）或防抖（debouncing）技术来限制函数调用的频率。
  • 初始加载: 确保在页面加载时尽快应用用户首选的主题。将主题加载逻辑放在DOMContentLoaded事件监听器中，或更早地在<head>中的<script>标签中执行，可以减少“闪屏”（Flash of Unstyled Content, FOUC）效应。对于SSR/SSG应用，可以在服务器端预渲染HTML时注入正确的data-theme属性或内联样式，以避免客户端JS加载前的样式跳变。

可访问性

  • 对比度: 确保所有主题（尤其是暗色主题）的文本颜色和背景颜色之间有足够的对比度，以满足WCAG（Web内容可访问性指南）标准。这对于视力障碍用户至关重要。可以使用在线工具或库来检查颜色对比度。
  • 高对比度模式: 考虑提供一个“高对比度”主题选项，以满足有特定视觉需求的用户。
  • 对色盲用户的考虑: 避免仅通过颜色来传达信息。如果颜色是关键信息的一部分，应提供额外的视觉或文本提示。
  • prefers-color-scheme: 利用@media (prefers-color-scheme: dark) CSS媒体查询，可以根据用户的系统偏好设置默认主题，这是一种良好的可访问性实践。
/* 优先处理用户系统偏好 */
@media (prefers-color-scheme: dark) {
  :root {
    /* 默认的暗色主题变量，如果用户系统偏好是暗色 */
    --theme-background: #2c3e50;
    --theme-text-color: #ecf0f1;
    /* ... 其他暗色变量 ... */
  }
}

/* 用户明确选择 'light' 或 'dark' 时覆盖系统偏好 */
[data-theme="light"] {
  /* 亮色主题变量 */
  --theme-background: #ffffff;
  --theme-text-color: #333333;
  /* ... */
}

[data-theme="dark"] {
  /* 暗色主题变量 */
  --theme-background: #2c3e50;
  --theme-text-color: #ecf0f1;
  /* ... */
}

通过这种方式，用户可以先获得系统偏好主题，然后再通过UI进行手动覆盖。

代码组织与维护

  • CSS变量命名规范: 遵循一致、语义化的命名规范，如--theme-component-property，这有助于团队协作和长期维护。
  • JS主题配置对象: 将主题的所有变量集中到一个JavaScript对象中，如themeVariables，提高代码的可读性和可维护性。
  • 模块化: 如果项目较大，可以将主题切换的JavaScript逻辑封装成一个独立的模块或类，使其可复用且易于测试。
  • 文档: 对CSS变量和JS主题切换逻辑进行充分的文档说明，方便新成员快速理解。

SSR/SSG环境下的考量

在服务器端渲染（SSR）或静态站点生成（SSG）的环境中，客户端JavaScript的执行会晚于初始HTML的渲染。这意味着如果完全依赖客户端JS来设置主题，用户可能会看到短暂的默认主题，然后才切换到他们偏好的主题（FOUC）。

  • 预注入主题: 最佳实践是在服务器端根据用户的Cookie或User-Agent（尽管不推荐根据User-Agent猜测主题）或其他持久化机制，直接在渲染的<html>标签上注入data-theme属性或内联style属性。
    例如，如果用户上次选择了暗色主题，服务器可以渲染出：<html data-theme="dark"> 或 <html style="--theme-background: #2c3e50; ...">。
  • CSS Only Fallback: 确保即使JS失败，页面也能以一个可用的默认主题（如亮色主题）显示。

框架集成

在React、Vue等现代前端框架中，管理CSS变量的方式可以更加集成。

  • React: 可以使用useState或useContext来管理当前主题状态，并通过useEffect来监听主题变化并调用document.documentElement.style.setProperty()。也可以利用JSX的style属性直接设置CSS变量（虽然通常不推荐直接在JSX中设置大量变量，但对于少量动态变量是可行的）。
  • Vue: 可以使用data属性或Vuex来管理主题状态，并通过计算属性或watch来响应主题变化，同样调用document.documentElement.style.setProperty()。Vue的v-bind:style也可以动态设置CSS变量。

无论使用何种框架，核心原理都是相同的：通过JavaScript获取主题数据，然后利用setProperty或data-attribute策略来动态修改CSS变量，从而影响全局样式。

动态样式管理的未来

JavaScript与CSS变量的交互为前端开发带来了前所未有的动态样式能力。它不仅极大地简化了主题切换的实现，还为构建更具响应性、更个性化、更具互动性的用户界面打开了大门。从简单的颜色调整到复杂的布局响应，CSS变量与JavaScript的结合提供了一个强大且优雅的解决方案。

随着Web平台能力的不断增强，以及对用户体验要求的日益提高，这种动态样式管理模式将变得越来越普遍和重要。鼓励开发者深入探索CSS变量的潜力，将其融入到日常开发实践中，以构建更灵活、更易维护、更符合用户期待的Web应用。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注