[ web前端 ] 使用 CSS Variables 实现主题切换

本文介绍了另一种实现主题功能的思路,简洁,使用原生Css实现。但是请注意兼容性!

CSS Variables

变量声明使用两根连词线"--"表示变量,"$color"是属于Sass的语法,"@color"是属于Less的语法,为避免冲突css原生变量使用"--"

// 声明变量
--color:#000;

// 读取变量
var(--color)

兼容性 

[ web前端 ] 使用 CSS Variables 实现主题切换_第1张图片

效果展示

[ web前端 ] 使用 CSS Variables 实现主题切换_第2张图片

源代码



  
    
    
    主题切换
    
  
  
  

 

你可能感兴趣的:(JavaScript,CSS,笔记,css,html,javascript,web)