css变量设置主题色切换

除了scss和less,css也可以使用变量,但是要新版本浏览器才行,微软edge浏览器也支持;想支持旧版本浏览器.可以使用插件: css-vars-ponyfill

下面是支持浏览器列表(绿色是支持的,红色不支持),详情请看: https://www.caniuse.com/?search=var()

 

--name 声明变量,  var(--name)使用变量

 

声明变量:

//全局css变量,可以在所有地方使用(权重最小,相当于 *选择器)
:root{
  --main-color:#333;
  --main-bg:#fff;
  --mc: #06c;
  --fc:var(--mc);
}
//body是标签选择器,会覆盖:root内的变量
body{
  --mc: #409EFF;
}
//只有在#app内的元素可以使用到--pt变量
#app{
  --pt:10px;//带单位的不能使用引号
}
.title{
  --size:20;
  --content:"hello";
}

使用变量:

.main{
  color: var(--main-color);
}
//可以使用拼接,变量是数值时要使用calc计算,是字符串时可以直接拼接
.title p{
  font-size:calc(var(--size) * 1px)
}
.title p:after{
  content:var(--content)' world';
}

//也可以直接在html标签内联样式使用:
<div class="demo" style="color:var(--mc)">666</div>

使用js新增修改删除查询变量:

document.body.style.setProperty('--mc','red') //修改
document.body.style.setProperty('--mb','#fff') //新增
document.body.style.setProperty('--mp','10px') //新增
let s=document.body.style.getPropertyValue('--mc').trim() //查询
console.log(s)
document.body.style.removeProperty('--mp'); //删除

使用js操作css变量后就可以去配置项目中的主题色。然后配合颜色选择插件,用户可以任意设置主题色,下面举个vue的例子:

<template>
  <div class="other">
    <h1 style="color:var(--mc)">This is an other page</h1>
    elementUI的选择主题色:<el-color-picker v-model="color" show-alpha></el-color-picker>
  </div>
</template>

<script>
export default {
  name:'other',
  data() {
    return {
      color: localStorage.getItem('mc')
    }
  },
  watch: {
    color(n){
      document.body.style.setProperty('--mc',n);//这里改变会实时更改css,其他页面用到这个变量也会实时更改
      localStorage.setItem('mc',n)
    }
  },
}
</script>

 

详情请看阮一峰的专门介绍:传送门