网站设置开灯(亮模式/白天)和关灯(暗模式/黑夜)效果
在很早之前,这个效果叫做开灯/关灯,现在叫做白天/黑夜,曾经有那么一段时间没有看到过这种效果,现在又很多网站/APP都喜欢这种切换白天/黑夜模式。
实现效果:设置2套或者多套色调模板,和之前的那种换皮肤大差不差。所以博客新主题也设置了这么一个效果,样式布局基本没怎么改变,后台设置页升级了一下,很多东西都不再“写死”,可以自由设置!
白天模式效果:
黑夜模式效果:
感觉黑夜的色调比较好看。
总体涉及到的原理:
1、设计2套或者多套CSS样式,可以在body里添加一个class,后面保留class/ID样式名称不变,在不同的样式里给设计一个区域,通过body里的class名调用不同的样式CSS。
2、JQ/JS,涉及到一个点击却换的问题,点击按钮,更换body里的Class名称,实现变色。
3、防刷新,就是刷新时保留之前的颜色选择,这里涉及到一个缓存/cookies的问题,一般使用cookies来保存选择的数据,也可以使用Local Storage保存数据,但是,似乎Local Storage只支持JS。通过测试,刷新的时候会有一段时间的卡顿,可能是设计的问题,调试很久没有调试过来,之后就使用cookies,这样PHP也可以直接操作cookies!JQ/JS点击按钮的时候,也可以操作cookies