夜间模式

1. 实现效果

夜间模式实现的效果是:点击按钮,项目所有页面切换为夜间模式;再次点击按钮,项目所有页面切换为白天模式。

2. 操作步骤

(1) 在页面上添加一个模式层,并在模式层中插入“本地存储”元素(通常此元素无需显示在页面),效果如下图:

(2) 在“本地存储”元素上右键,选择“本地存储设置”,进入本元素的设置页面。对本元素的设置,如下图:

(3) 在页面内添加一个按钮,如下图:

对按钮进行逻辑设置:按钮上右键→逻辑→逻辑→产生某效果:绑定数据编程,填入相应代码,如下图:

_vm.localstorage_night(_vm.localstorage_night() ? "" : "1");

(4) 点击页面的黄色编辑按钮进入编辑页面,在页面的最外层的div元素上进行css类绑定,如下图:

{"night":localstorage_night}

(5) 页面样式类文件加入如下样式:

.night div{
	background-color: #333 !important;
  color: #eee !important;
}

(6) 其它页面重复1、2、4、5步骤即可。

3. 视频演示