文章目录[隐藏]
首先简单的思路就是给主题样式表适配写一套黑色模板的css,主要是背景,图片和文字等适配。css是最复杂工程量最大的。
然后使用js控制切换,当切换至暗黑模式后class 调用适配暗黑的css,由于css层级优先关系就达到了暗黑的效果。
首先加入js代码:
你可以扔footer页脚,或创建js文件
其次在header页头的body加入php判断
检测到cookie相关字段直接输出body class为night,防止页面闪烁。
最后,调试CSS,body.night xxx ,xxx覆盖替换的css样式,body.night img 是把图片降低亮度,有些地方图片如果没有降低亮度,那么也像前面那样加入。
因为本站使用了div全局所以过滤了body我的css修改例子,看一下应该就懂了。
OK,只要客户端时间是22点到6点之间,就自动切换到夜间模式,你也可以用下面的代码来弄一个按钮在页面上,方便随时切换。
评论