动态修改css中:root定义的变量-换肤、主题色

前端中有用到需要设置主题颜色，根据用户喜欢实现换肤的可以使用css中:root定义变量的方式，或者使用动态切换引入的外部css样式表实现，这里着重记录下动态修改css中:root定义的变量实现换肤：

创建variable.scss，定义颜色变量：

:root {
    --light: red;
    --dark: black;
}

这里定义变量必须是以'--'开头，然后其他页面的样式表就可以直接引用这个变量了

引用variable中定义的变量：

.title{
    font-size: 20px;
    color: var(--light);
}

动态修改:root变量中的值：

document.documentElement.style.setProperty(`--light`, 'red');

至此就完成了动态修改:root变量实现换肤了，具体的应用场景中我们应该是在页面上操作，选中需要的肤色然后修改:root定义的变量值，考虑到浏览器刷新会重置原始状态的值，这里要结合本地存储方式记住选中的肤色，具体的实现参考：

const title = document.getElementsByClassName("title")[0]
title.onclick = function() {
     document.documentElement.style.setProperty(`--light`, 'blue');
     window.localStorage.setItem('style', 'blue')
}

window.onload = function() {
    const style = window.localStorage.getItem('style')
    if(style) {
        document.documentElement.style.setProperty(`--light`, style);
    }else {
        document.documentElement.style.setProperty(`--light`, 'red');
    }
}