vue web深色模式

最新推荐文章于 2024-09-16 18:38:07 发布

不要一直敲门

最新推荐文章于 2024-09-16 18:38:07 发布

阅读量1.3k

点赞数 1

文章标签： javascript vue

本文链接：https://blog.csdn.net/qq_40600409/article/details/106040154

版权

深色模式demo

找到控制区域颜色的css文件

在这里插入图片描述
2. ## 在修改的页面添加按钮控制

这里引用了heyui的控件.

<div>深色:
          <!--trueValue选中的值 falseValue未选中的值  small 缩小版-->
          <h-switch v-model="black" trueValue="yes" falseValue="no" :small="true" @change="change_back()"></h-switch>
</div>

定义变量及函数

通过localStorage来保存用户的选择,第一次加载通过当前时间来判断是否使用深色模式

data(){
    return{
        //主题变量
        black: 'yes',
    }
},
mounted(){
    //主题保持
    this.get_theme();
},
methods:{
    get_theme() {
        //判断是否是第一次页面加载
        if (localStorage.getItem('theme') == null) {
          //第一次加载判断时间
          let date = new Date();
          //判断当前时间
          if (date.getHours() >= 6 && date.getHours() < 18) {
            localStorage.setItem('theme', 'no');
            this.black = localStorage.getItem('theme');
            this.change_back()
          } else {
            localStorage.setItem('theme', 'yes');
            this.black = localStorage.getItem('theme');
            this.change_back()
          }
        } else {
          this.black = localStorage.getItem('theme');
          this.change_back()
        }
      },
      //切换主题颜色
      change_back() {
        console.log(this.black);
        if (this.black === 'no') {
          //获取样式表
          var styles = getComputedStyle(document.documentElement);
          //修改背景颜色
          document.documentElement.style.setProperty('--bg-color', 'white');
          //修改字体颜色
          document.documentElement.style.setProperty('--a-color', '#292a2d');
          //主题状态保存
          localStorage.setItem('theme', this.black);
        } else {
          //修改背景颜色
          document.documentElement.style.setProperty('--bg-color', '#292a2d');
          //修改字体颜色
          document.documentElement.style.setProperty('--a-color', 'white');
          localStorage.setItem('theme', this.black);
        }
      }
}