通过 :root 伪类和属性选择器实现全局颜色更改

:root 是 CSS 的伪类，它与 html 选择器相同。:root表示 元素，优先级非常地高，所以非常适合在这里声明 CSS 变量。

属性选择器可以允许以某种规则匹配元素。匹配对象是元素属性的值。

关于更多 CSS 属性选择器的信息，请查看。

在本篇博文中，实现一个一键式切换所有颜色的按钮的例子。

编写基本的 HTML 骨架：

Theme Color.
切换

编写基本的 CSS 样式，这里要运用 :root 和属性选择器：

:root[type='a'] {
	--theme-color: rgb(44, 127, 204);
}

:root[type='b'] {
	--theme-color: rgb(163, 39, 39);
}

.theme {
	color: var(--theme-color);
}

编写 JavaScript 代码，操控样式的切换，引入了 JQuery 库：

let switchFlag = false;
function change() {
	if (switchFlag) {
		switchFlag = false;
		$('html').attr('type', 'a');
	} else {
		$('html').attr('type', 'b');
		switchFlag = true;
	}
}

实现效果：

注意看，在没有点击之前，html 元素没有出现 type 这一个属性，当我们点击之后出现了一个新的属性 type。此时 html 拥有了属性 type，在 CSS 中我们有两个属性选择器的样式，匹配成功之后，就运用了对应的样式。

也就是说，$('html').attr('type', 'a');是为 html 添加了一个新的属性 type。比如，:root[type='a']（也就是 html[type='a']）匹配了对应的属性，Theme Color 字符就变色了。