vue web深色模式_vue的网页是深色模式

深色模式demo

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

2. ## 在修改的页面添加按钮控制

这里引用了heyui的控件.

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

3. 定义变量及函数

   通过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);
           }
         }
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52

4. 最终效果