css变量（主题切换）
css文件
:root.light {
--background--main: rgba(245, 245, 245, 1);
}
:root.dark {
--background--main: rgba(15, 15, 15, 1);
}
body {
background-color: var(--background--main);
}
:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。
html文件
<html lang="en" class="light">
<head>
<meta charset="utf-8" />
</head>
<body>1</body>
</html>
js文件
const html = document.querySelector(':root');
// 获取--background--main变量的内容
console.log(getComputedStyle(html).getPropertyValue('--background--main'));
setTimeout(() => {
// 设置html也就是:root的class为dark
html.className = 'dark';
// 获取--background--main变量的内容
console.log(getComputedStyle(html).getPropertyValue('--background--main'));
}, 1000);
