document.body.style.setProperty('--黑色主题', '#7F583F');
document.body.style.getPropertyValue('--黑色主题').trim();
document.body.style.removeProperty('--黑色主题');
在构建大型站点时，网页中 所使用的 CSS 的数量是非常庞大的，并且在许多场合大量的信息会重复使用。例如，在网页中维护一个配色方案，意味着一些颜色在CSS文件中多次出现，并被重复使用。当你修改配色方案时，不论是调整某个颜色或完全修改整个配色，都会成为一个复杂的问题，不容出错，而单纯查找替换是远远不够的。
CSS变量为我们带来一些预处理器的便利，并且不需要像Less或Sass等额外的编译。
这些变量的第二个优势就是名称本身就包含了语义的信息。
其次JS可以获取CSS变量也可以设置CSS变量，大大增加了JS和CSS之间的联系。
CSS变量之var()函数的应用——动态修改样式 & :root的使用一、css变量body { --foo: #7F593F; --urls: './img/xxx.jpg';}如上述代码，意思为：在body选择器里面声明了两个变量：–foo 和 –bar；css声明变量不像Less的@foo， 也不像sass的$foo，而是采取了不同形式的–foo，声明出来的变量和color、background-url 等正式属性没有什么不同 ，所以 CSS 变量又叫做**“CSS 自定义
#app {
/* font-family: 'Avenir', Helvetica, Arial, sans-serif; */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* text-align: center;
color: #2c3e50;
margin-top: 60px; */
html, body, div, h1, h2, h3,.
在CSS中，可以使用CSS变量（CSS Variables）来定义和使用动态变量。
CSS变量的定义以`--`开头，后面跟着变量名和变量值。例如：
```css
:root {
--main-color: #ff0000;
在定义CSS变量时，需要将其放在`:root`伪类中，`:root`伪类表示文档的根元素（HTML元素）。
在使用CSS变量时，可以通过`var()`函数来引用变量。例如：
```css
div {
background-color: var(--main-color);
上面的代码中，`var(--main-color)`表示引用`--main-color`变量的值作为`background-color`的值。
在JavaScript中，可以通过`document.documentElement.style.setProperty()`方法来动态设置CSS变量的值。例如：
```javascript
document.documentElement.style.setProperty('--main-color', '#00ff00');
上面的代码中，将`--main-color`变量的值设置为`#00ff00`。
需要注意的是，CSS变量的兼容性不是非常好，需要在使用时注意浏览器的兼容性。
