前端换肤的N种方案，请收下 _前端

文章插图

作者：令夕
转发链接：
https://juejin.im/post/5e92ad7a518825736c5b91cd

?
最近在做网站换肤的需求，也就是主题切换。那么如何切换主题的颜色呢？以下是网站换肤的实现以及基于换肤拓展的一些方案分享给大家，希望大家在做类似需求的时候能够有所参考。
?

覆盖样式实现

// light$color-brand1: #ffcd32;$fill-1: #fff !default;$color-text: #3c3c3c;$color-text-1: #757575;$color-text-2: #222;// dark$dark-fill-1: #222 !default; // 品牌色$dark-color-text: #fff;$dark-color-text-1: rgba(255, 255, 255, 0.3);$dark-color-text-2: $color-brand1;复制代码

// 页面使用<style lang="scss">@import "./assets/scss/index.scss";[data-theme="dark"] {  body {    background: $dark-fill-1;  }  .reaconmend .reaconmend-list .item .name {    color: $dark-color-text;  }  .reaconmend .reaconmend-list .item .desc {    color: $dark-color-text-1;  }  .header .text {    color: $dark-color-text-2;  }}</style>复制代码

利用css优先级的原理覆盖掉原有样式的实现，每定义一套皮肤就要定义对应的sass变量，以及定义一套覆盖原有样式的皮肤样式。如果有多套皮肤的话，覆盖的代码量就会n套。
「缺点」
【前端换肤的N种方案，请收下】样式不易管理，查找样式复杂，开发效率低，拓展性差，维护成本高，多人协作沟通麻烦。
sass变量实现