之前一直想给主题添加一个夜间模式的，苦于身患懒癌一直没有动手= =
在昨天晚上完成一个网易云音乐云打卡项目之后突然想起来这件事，于是就有了这个功能
实现原理
编写一套适用于夜间模式的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后面
效果图
参考资料:Darkmode.Js
如果你发现了上面bug/样式不完整、错误，恳请您及时联系我
可在评论区留言，或加入QQ群@小弟点击加入群聊
版权属于：Citrons
本文链接：https://www.citrons.cn/typecho/278.html
转载时须注明出处及本声明
5 comments
请问自动切换黑夜模式是怎样实现的
根据时间切换就行了|´・ω・)ノ
这个博客居然还在
有个问题，就是刷新页面的时候会从白天模式变成夜间模式。而不是打开页面就直接夜间模式
这篇文章呢，就是判断cookies，然后引入文件，的确会发生你说的那种现象，其他方法请移步插件那个文章