js + css 自动/手工开启网站白天/黑夜模式
3年前
超过1174天
温馨提示
本文最后更新于2021年07月03日，已超过1174天没有更新，若内容或图片失效，请留言反馈。
我采用的是最普通的js+css的模式，代码也是参考网上的，所以就分享出来。
一、JS部分代码
<script type = "text/javascript" >
function switchNightMode(){
var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
if(night == '0'){
document.body.classList.add("night");
document.querySelector('link[title="dark"]').disabled = false;
document.cookie = "night=1;path=/"
console.log('夜间模式开启');
}else{
document.body.classList.remove("night");
document.querySelector('link[title="dark"]').disabled = true;
document.cookie = "night=0;path=/"
console.log('夜间模式关闭');
}
}
//指定时间进入夜间模式
(function(){
if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
if(new Date().getHours() > 19 || new Date().getHours() < 6){
document.body.classList.add("night");
document.querySelector('link[title="dark"]').disabled = false;
document.cookie = "night=1;path=/"
console.log('夜间模式开启');
}else{
document.body.classList.remove("night");
document.cookie = "night=0;path=/"
console.log('夜间模式关闭');
}
}else{
var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
if(night == '0'){
document.body.classList.remove("night");
document.querySelector('link[title="dark"]').disabled = true;
console.log('夜间模式关闭');
}else if(night == '1'){
document.body.classList.add("night");
document.querySelector('link[title="dark"]').disabled = false;
console.log('夜间模式开启');
}
}
})();
</script>
建议放在页面底部，我这里用的是Typecho搭建的网站，其它里面有部分PHP代码需要修改一下。
二、CSS代码部分
<link href="<?php $this->options->themeUrl('statics/dark.css'); ?>" rel="<?php if($_COOKIE['night'] != '1'){echo 'alternate ';} ?>stylesheet" type="text/css" title="dark">
在header.php里面加上上面的代码，夜晚模式就让dark.css生效，所以呢，接下来就是在statics文件夹里面创建这个css文件，里面写暗黑模式的相关样式即可。
三、PHP代码部分
在body里面加个cookie,代码如下(方便查看值是否变化)：
<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>
四、效果演示
可以去我的网站看看效果，在网站右上角有个切换开关，代码如下：
<a href="javascript:switchNightMode()" target="_self" class="darkmode">开启夜间模式</a>
本作品采用知识共享许可协议知识共享署名-非商业性使用-禁止演绎 3.0 中国大陆许可协议进行许可授权。即要求您在需要转载、引用本文全文或者部分时，请按照协议要求署名，并在保证不进行任何修改、续写等演绎形式，并不用于商业性项目的情况下使用。如果本文有侵犯到您的权益，请直接向我们留言反馈。
0 赞
or 打赏
喜欢就打赏一点
上一篇
.png "往往免费的还不如收费的")
.png "走失两天的狗子终于找到它的家了")
.png "顶着三十几度的天气去钓鱼了")
.png "\"微博客\"一款自己开发自己用的垃圾源码（慢慢更新中）")
