网站更换主题色

根据地址栏携带参数修改网站的logo、背景图、基准色

首先你的项目要是scss文件形式，这样可以使用一些函数形式进行定制

scss 文件

$yu-color: pink; /* 主题颜色 */

$yu-black: black; /* 换肤颜色 */
@mixin change_color($color) { /*通过该函数设置字体颜色，后期方便统一管理；*/ 
 color: $color;  
 [data-theme= 'yu-theme' ] & {    
     color: $yu-black;  }
}

js

window.document.documentElement.setAttribute('data-theme', 'yu-theme');

yu-theme 一定要在scss中进行对应

在scss 文件中应用，页面使用 类名就可以了。

.change-theme {
    @include change-color ( $yu-color )
}

总结：

需要预先知道所有的主题色，然后根据不同参数分场景赋值；

在页面中设置自定义属性，属性值在scss文件中一定要可以匹配；

使用时候注意使函数式方式调用css 

注意函数的命名与调用要保持一致

参考链接