在前端开发中，我们经常需要为网站或应用程序设计多个主题，以便用户可以根据自己的喜好选择一个合适的主题。但是，在使用传统的 CSS 样式表进行主题选择时，需要复制和粘贴大量的样式规则，并且维护和更新这些规则可能会变得非常困难。
CSS 自定义属性（CSS 变量）是一种新的功能，它允许您在 CSS 中定义命名值，并在整个样式表中引用它们。这种方式使得创建可重用的样式规则变得更加容易，并允许动态地修改这些值，从而实现高级 CSS 主题切换。
CSS 自定义属性简介
CSS 自定义属性（CSS 变量）是一种允许在整个样式表中使用命名值的机制。您可以将它们看作是在 CSS 中定义的常量。定义 CSS 变量时，使用 "--" 前缀，然后是变量名称，例如：
:root { --primary-color: #007bff; }
这里，":root" 是 CSS 中的伪类选择器，表示文档树的根元素。因此，定义的 "--primary-color" 变量将在整个样式表中可用，并且可以在其他规则中引用它，例如：
a { color: var(--primary-color); }
这里，"var()" 函数用于引用 "--primary-color" 变量的值。如果您想要更改主题颜色，只需要在 ":root" 规则中更新变量值即可。
JavaScript 实现高级 CSS 主题切换
使用 CSS 自定义属性可以轻松地实现基本的主题切换，但是，当您需要应对复杂的样式表时，可能需要使用 JavaScript 来实现更高级的主题切换。
下面是一个示例，演示了如何使用 JavaScript 来切换主题。在这个示例中，我们将使用三个不同的颜色主题：红色、绿色和蓝色。每个主题都有一个不同的 CSS 变量值，用于控制文本和背景颜色。
首先，我们需要为所有主题定义 CSS 变量：
-- -------------------- ---- ------- ----- - ------------- ------ ------------------- ------ - ------------------ - ------------- ------ ------------------- ---- - -------------------- - ------------- ------ ------------------- ------ - ------------------- - ------------- ------ ------------------- ----- -展开代码
这里，我们使用 "[data-theme]" 属性选择器来指定三个不同的主题，并且在每个主题中定义不同的变量值。
接下来，我们需要编写一个 JavaScript 函数来切换主题：
function setTheme(theme) { document.documentElement.setAttribute("data-theme", theme); }
这个函数接受一个表示要设置的主题的字符串参数，然后使用 "setAttribute()" 方法将 "[data-theme]" 属性设置为相应的值。
最后，我们需要为用户提供一种切换主题的方法。在本例中，我们将创建三个按钮，并将它们与相应的主题相关联：
<button onclick="setTheme('red')">Red</button> <button onclick="setTheme('green')">Green</button> <button onclick="setTheme('blue')">Blue</button>
当用户单击一个按钮时，JavaScript 将调用 "setTheme()" 函数并传递相应的主题名称作为参数。然后，新的主题将应用于文档树的根元素，并且所有使用 CSS 变量的样式规则都将自动更新。
总结
通过 CSS 自
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/41279
