现在很多网站都已经实现了夜间模式,这样可以在夜间的时候保护我们的眼睛呢?

于是,就有了给自己博客添加夜间模式的想法。

一、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>