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

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

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

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

// html


  
    
    
    
    
    
    

    
  
  
    

      

        白天
        夜晚
      
      

        
提前引入所有主题样式，做类名切换
        

          做法:

          需要切换主题的时候将指定的根元素类名更换
        
        

          优点：不用重新加载样式文件，在样式切换时不会有卡顿
        
        

          缺点：首屏加载时会牺牲一些时间加载样式资源

          如果主题样式表内定义不当，也会有优先级问题

          各个主题样式是写死的，后续针对某一主题样式表修改或者新增主题也很麻烦
        
      
    
  
  

第二种：link标签动态引入

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

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

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

  
    
    
    
    
  
  
    

      

        默认
        蓝色
        绿色
      
      

        
link标签动态引入
        

          做法:

          提前准备好几套CSS主题样式文件

          在需要的时候，创建link标签动态加载到head标签中，或者是动态改变link标签的href属性。
        
        

          优点：实现了按需加载，提高了首屏加载时的性能
        
        

          缺点：动态加载样式文件，如果文件过大网络情况不佳的情况下可能会有加载延迟，导致样式切换不流畅

          如果主题样式表内定义不当，会有优先级问题

          各个主题样式是写死的，后续针对某一主题样式表修改或者新增主题也很麻烦

        
      
    
  
  

第三种：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以下不兼容）