之前一直想给主题添加一个夜间模式的,苦于身患懒癌一直没有动手= =
在昨天晚上完成一个网易云音乐云打卡项目之后突然想起来这件事,于是就有了这个功能


注意:此文章提供的文件仅适配handsome 6.0.0 版本的 纯白样式,其他主题或本主题的其他风格请勿照搬css样式代码,请根据自身情况来修改样式,理论所有主题都能根据此思路来增加夜间模式!

实现原理

编写一套适用于夜间模式的css,利用css选择器的权重效果来覆盖原先的css样式。
关于替换样式我想了两种方法,都是使用cookie:
第一种:使用PHP判断cookie是否存在,存在则引入css文件
第二种:使用JS判断cookie是否存在,存在则在html和body上新增一个样式,用于使用新的css样式并覆盖旧样式
最终选则使用了第二种,因为第一种在切换模式时会重新刷新页面,第二种则是无刷新效果


实现过程

第一步:添加切换部件

在footer.php文件中新增如下代码(放在</footer>前面)

 <div id="darkNight" class="darkNight " onclick="dark(this)">
         <div class="chack">?</div>
  </div>

然后在handsome.min.css样式文件中添加新样式,代码如下:

.darkNight{
    cursor:pointer;
    position: fixed;
    bottom: 150px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    z-index: 1050;
    background-color: #333;
}
.darkNight .chack{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);

}

这样一个小部件就添加完成了

添加小部件


第二步:编写新的css样式

在assets/css文件夹新建dark.css样式文件
第一版css样式文件下载链接:https://lanzous.com/ic42q2b


第三步:编写js文件用于切换模式

在assets/js文件夹新建dark.js样式文件
第一版js文件下载链接:https://lanzous.com/ic42ryj


第四部:引入css和js文件

打开header.php文件,在head部分分别引入dark.js和dark.css文件
css文件引入方法: <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/dark.css" type="text/css">
js文件引入方法:<script src="<?php echo STATIC_PATH ?>js/dark.js"></script>

引入资源注意事项:

  • css文件引入代码加在本地css静态资源那一块
  • js文件引入代码必须加在全站jQuery后面

效果图

首页
首页
正文
正文
时光鸡
时光鸡
留言板
留言板
文章归档
文章归档
阅读模式PC
阅读模式PC
移动端正文
移动端正文
移动端时光鸡
移动端时光鸡
移动端留言板
移动端留言板
移动端阅读模式
移动端阅读模式
移动端文章归档
移动端文章归档


参考资料:Darkmode.Js

如果你发现了上面bug/样式不完整、错误,恳请您及时联系我
可在评论区留言,或加入QQ群@小弟点击加入群聊

微信扫一扫体验微信小程序
Last modification:September 21, 2022
If you think my article is useful to you, please feel free to appreciate