css前端主题切换方案(三种)

第一种：提前引入所有样式，用类名切换

// dark.css/* dark样式主题 */body.dark .box {  color: #eee;  background: #333;}

// day.css/* day样式主题 */body.day .box {  color: #f90;  background: #fff;}

// html                              theme                      白天        夜晚                    提前引入所有主题样式，做类名切换                  做法:
          需要切换主题的时候将指定的根元素类名更换                          优点：不用重新加载样式index.php/tags-522.html" >文件，在样式切换时不会有卡顿                          缺点：首屏加载时会牺牲一些时间加载样式资源
          如果主题样式表内定义不当，也会有优先级问题
          各个主题样式是写***的，后续针对某一主题样式表修改或者新增主题也很麻烦                          document.body.className = 'day';    document.getElementsByClassName('btn-day')[0].onclick = ()=>{      document.body.className = 'day';    }    document.getElementsByClassName('btn-dark')[0].onclick = ()=>{      document.body.className = 'dark';    }  

第二种：link标签动态引入

// default.css.text {  color: #999;}

// blue.css.text {  color: blue;}

// green.css.text {  color: green;}

                  theme                      默认        蓝色        绿色                    link标签动态引入                  做法:
          提前准备好几套CSS主题样式文件
          在需要的时候，创建link标签动态加载到head标签中，或者是动态改变link标签的href属性。                          优点：实现了按需加载，提高了首屏加载时的性能                          缺点：动态加载样式文件，如果文件过大网络情况不佳的情况下可能会有加载延迟，导致样式切换不流畅
          如果主题样式表内定义不当，会有优先级问题
          各个主题样式是写***的，后续针对某一主题样式表修改或者新增主题也很麻烦
                          function createLink(cssURL){      var head = document.getElementsByTagName('head')[0],      linkTag = null;      if(!cssURL){        return false;      }      // 判断link是否存在，存在时，改变href,不存在时创建      if (document.getElementsByTagName('link').length > 0) {        document.getElementsByTagName('link')[0].href = cssURL;      } else {        linkTag = document.createElement('link');        linkTag.setAttribute('rel','stylesheet');        linkTag.setAttribute('type','text/css');        linkTag.href = cssURL;        head.appendChild(linkTag);      }    }    createLink(`default.css`);    document.getElementsByClassName('default')[0].onclick = ()=>{      createLink(`default.css`);    }    document.getElementsByClassName('blue')[0].onclick = ()=>{      createLink(`blue.css`);    }    document.getElementsByClassName('green')[0].onclick = ()=>{      createLink(`green.css`);    }  

第三种：CSS变量+类名切换

// dark.css/* dark样式主题 */.dark {  --theme-color: #fff;  --theme-background: #333;}

// day.css/* day样式主题 */.day {  --theme-color: #999;  --theme-background: #fff;}

// public.css@import "dark.css";@import "day.css";.box {  height: 400px;  border: 1px solid #000;  padding: 10px;  color: var(--theme-color);  background: var(--theme-background);}

// html                  白天        夜晚                    CSS变量+类名切换                  做法:
          依然是提前将样式文件载入，切换时将指定的根元素类名更换。                          优点：不用重新加载样式文件，在样式切换时不会有卡顿
          在需要切换主题的地方利用var()绑定变量即可，不存在优先级问题
          新增或修改主题方便灵活，仅需新增或修改CSS变量即可，在var()绑定样式变量的地方就会自动更换
                          缺点：首屏加载时会牺牲一些时间加载样式资源
          IE兼容性（IE9以下不兼容）                          document.body.className = "day";    document.getElementsByClassName("btn-day")[0].onclick = () => {      document.body.className = "day";    };    document.getElementsByClassName("btn-dark")[0].onclick = () => {      document.body.className = "dark";    };