黑夜暗黑模式网上的大部分都是简单的css代码,不能完全被css渲染,就会显得特别的乱而且没啥效果,下面整理了一下一套B2专用的暗黑代码
教程开始
首先加入js代码,你可以扔footer页脚:
<script type="text/javascript">
//夜间模式
(function(){
if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
if(new Date().getHours() > 22 || new Date().getHours() < 6){//只要客户端时间是22点到6点之间,就自动切换到夜间模式。
document.body.classList.add('night');
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');
}else if(night == '1'){
document.body.classList.add('night');
}
}
})();
//夜间模式切换
function switchNightMode(){
var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
if(night == '0'){
document.body.classList.add('night');
document.cookie = "night=1;path=/"
console.log('夜间模式开启');
}else{
document.body.classList.remove('night');
document.cookie = "night=0;path=/"
console.log('夜间模式关闭');
}
}
</script>
其次在header页头的body加入php判断
检测到cookie相关字段直接输出body class为night,防止页面闪烁。
<body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">
最后调试CSS 代码放到子主题根目录的style.cc文件里头
body.night xxx ,xxx覆盖替换的css样式,body.night img 是把图片降低亮度,有些地方图片如果没有降低亮度,那么也像前面那样加入。
按钮调节
这个按钮看个人喜欢建议放在顶部菜单栏或者侧边栏
<a href=”javascript:switchNightMode()” target=”_self”>查看效果</a>
无意侵害您的权益,请发送邮件至 aqiang-212@qq.com 或点击右侧 私信:wpbkw 反馈,我们将尽快处理。
黑夜无论怎样悠长,白昼总会到来
dasdadamk
测试
就会激发几号放假啊
从撒旦发射点
但是发给我