现在很多网站都已经实现了夜间模式,这样可以在夜间的时候保护我们的眼睛呢?
于是,就有了给自己博客添加夜间模式的想法。
一、css样式
1.将博客主题 Blue 修改为 Black ,并开启定时打开功能(调用black.css):
此处设置的是晚上18点 - 早上6点 为夜间模式
<?php
date_default_timezone_set('PRC'); //设定时区,PRC就是中国
$hour = date('H');
if($hour > 5 && $hour < 18){ //设定时间段
echo 'sun.css'; //设定白天css
}else{
echo '<link href="black.css" rel="stylesheet"/>'; //设定夜间css
}
?>
2.将 Black 主题内部图片暗夜化(图片css添加):
filter: brightness(80%);
二、js样式
<script type="text/javascript">
var d= new Date();
var h= d.getHours();
if(h >8&&h<18) {
document.write('<link type="text/css" rel="stylesheet" href="/css/style1.css" />');
}
else {
document.write('<link type="text/css" rel="stylesheet" href="/css/style2.css" />');
}
</script>