夜间模式实现的效果是:点击按钮,项目所有页面切换为夜间模式;再次点击按钮,项目所有页面切换为白天模式。
(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步骤即可。