网页html+css+js简单实现夜晚模式切换

前言

有时候浏览别人的网站，发现可以自由切换夜晚主题，感觉非常的方便，于是准备实现一个比较简单的切换夜晚模式

1，创建一个按钮开关，绑定点击事件

这里用上了element的switch开关组件，实际上用普通按钮也行

<span @click="switchNightMode()">
  <el-switch
      v-model="value"
      active-color="#C0C4CC"
      inactive-color="#E4E7ED">
  </el-switch>
</span>

2，点击按钮触发js函数

这里value变量的值是true或false,用来判断应该切换夜晚模式或白天模式，切换成夜晚时，为body添加class:'night',切换成白天时，

就移除该class，还有为了使跳转页面时也能维持效果，用cookie保存night的值，以实现持久化

switchNightMode(){
    let body = $('body')
    let night = this.value.toString()
    if(this.value){
        body.addClass('night')
    }else {
        body.removeClass('night')
    }
    $.cookie('night',night, {path:'/'});
},

这样可以在每次进入页面时先读取cookie的值，如果是夜晚模式，就直接调用函数

let night = $.cookie('night')
if(night=='true'){
    this.value = true
}
this.switchNightMode()

3，css部分

白天模式就维持原样，夜晚模式就自定义有class:'night'下的样式，样式就自由发挥啦，改变背景颜色，字体颜色，或者各种元素的背景

body.night{
    background: rgba(58, 58, 58, 1);
    color: #d2d2d2;
}

body.night #header{
    background: #505050;
}

body.night img {
    filter: brightness(60%);
}

body.night #page,body.night .Card{
    background: #282828;
}

body.night .el-menu,
body.night .el-card,
body.night input,
body.night .w-e-text-container,
body.night .w-e-toolbar{
    background: none!important;
    color: #eae3d7;
}

body.night .el-dialog,body.night #wangEditor code{
    background: #474747;
}

body.night textarea {
    background: #666464!important;
    color: #eae3d7;
}

4，最后：

虽然没想象中的美观，不过也够用啦😋