在前端开发中，主题更换是一个常见的需求。传统的实现方式是通过修改样式表来改变网站的主题，但这种方式有一定的局限性，例如需要重新加载样式表，无法实现动态切换等。而使用 CSS 自定义属性则可以轻松地实现主题更换，同时也具有更好的可维护性和扩展性。
CSS 自定义属性
CSS 自定义属性是 CSS3 中引入的一项新特性，它可以让开发者定义自己的属性，然后在样式中使用这些属性。与普通的 CSS 属性不同，自定义属性以两个连字符（--）开头，例如：
:root {
--primary-color: #007bff;
}
.button {
color: var(--primary-color);
}在上面的示例中，我们定义了一个名为 --primary-color 的自定义属性，并将其赋值为 #007bff。然后在 .button 类中使用了这个属性作为颜色值。注意到我们使用了 var() 函数来引用这个属性，这是因为 CSS 自定义属性只有在使用 var() 函数引用时才会被解析。
CSS 自定义属性还支持继承和计算，例如：
-- -------------------- ---- ------- ----- - ---------------- -------- ------------------ -------- - ----- - ------------- ----------------------- ----------------- ------------------ - ----------- - ------------- --------------------- -
在上面的示例中，我们定义了一个名为 --card-color 的自定义属性，并将其赋值为 var(--secondary-color)。然后在 .card 类中使用了这个属性作为背景颜色。注意到我们使用了 var() 函数引用另一个自定义属性 --secondary-color。然后在 .card:hover 类中重新定义了 --card-color 的值，将其赋值为 var(--primary-color)，这样在鼠标悬停时 .card 类的背景颜色会变成主色调。
自定义元素
自定义元素是 HTML5 中引入的一项新特性，它可以让开发者定义自己的 HTML 元素。通过自定义元素，我们可以将一些常用的 UI 组件封装成标准的 HTML 元素，例如：
<my-button>Click me</my-button>
在上面的示例中，我们定义了一个名为 my-button 的自定义元素，并在元素内部包含了一个按钮文本。然后在 JavaScript 中可以通过 customElements.define() 方法将这个元素注册为自定义元素：
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- ------ - ---------------------------------
------------------ - -----------------
---------------------------
-
-
---------------------------------- ----------在上面的示例中，我们定义了一个名为 MyButton 的类，继承自 HTMLElement。在构造函数中，我们使用 attachShadow() 方法创建了一个影子 DOM，并在影子 DOM 中创建了一个按钮。然后通过 customElements.define() 方法将 MyButton 类注册为自定义元素，并指定元素名称为 my-button。
主题更换
将 CSS 自定义属性和自定义元素结合起来，我们可以轻松地实现主题更换。例如，我们可以定义一个名为 --theme-color 的自定义属性，并将其赋值为主题颜色，然后在自定义元素的样式中使用这个属性：
-- -------------------- ---- ------- ----- - ---------------- -------- ------------------ -------- - ---------- - ----------------- ------------------ ---------------------- ------ ----- -------- --- ----- -------------- ---- ------- ----- ------- -------- -
在上面的示例中，我们定义了一个名为 --theme-color 的自定义属性，并将其默认值设为 var(--primary-color)。然后在 .my-button 类中使用了这个属性作为背景颜色，这样我们就可以通过修改 --theme-color 的值来实现主题更换了。
假设我们有两个主题，一个是蓝色主题，一个是灰色主题，我们可以通过 JavaScript 来动态修改 --theme-color 的值来实现主题更换：
-- -------------------- ---- ------- ----- ---------- - --------------------------------------- ----- ---------- - --------------------------------------- ------------------------------------ -- -- - ----------------------------------------------------------- ----------- --- ------------------------------------ -- -- - ----------------------------------------------------------- ----------- ---
在上面的示例中，我们分别获取了两个按钮元素 #blue-button 和 #gray-button，然后为它们分别添加了点击事件监听器。当点击蓝色按钮时，我们使用 document.documentElement.style.setProperty() 方法将 --theme-color 的值修改为 #007bff，从而实现蓝色主题。当点击灰色按钮时，我们将 --theme-color 的值修改为 #6c757d，从而实现灰色主题。
总结
通过使用 CSS 自定义属性和自定义元素，我们可以轻松地实现主题更换，并且具有更好的可维护性和扩展性。在实际开发中，我们可以将常用的 UI 组件封装成自定义元素，然后使用 CSS 自定义属性来实现主题更换。这样不仅可以提高开发效率，还可以提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6619ee6ad10417a222aa50a0