官网论坛看到有人再问有没有这个主题,感觉这个主题蛮帅

今天又加个护眼模式,其实这个功能很鸡肋,因为大部分浏览器都有护眼模式,再有,谁大半夜没事看你博客,别想太多!

但是博客加上这个按钮真的很酷,最起码自己看起来舒服,本来还想在POST页面两边设计两个大括号显示上下页,感觉没用的东西又多了还是放弃了,就这样了吧!

有什么好的建议说下,后面看到好玩的也许会再折腾。

自动模式

放在页面头部文件中

<?php
      date_default_timezone_set('PRC'); 
      $hour = date('H');   
      if($hour > 6 && $hour <= 22){   
        echo '<link href="night.css" rel="stylesheet"/>';   
      }else{
        echo '<link href="night.css" rel="stylesheet"/>';   
    }
?>

手动模式

两种模式显示两种图标

图标两个

<span class="icon-brightness-contrast"></span>
<span class="icon-sun" ></span>

关灯按钮

<div class="btn-read-mode" title="关灯"><span class="icon-brightness-contrast <?php getReadMode();?>" ></span></div>

获取cookie

function getReadMode($icon=false){
    $class = $_COOKIE['read-mode'];
    if($icon){
        $class = $class == 'night' ? 'fa icon-brightness-contrast' : 'fa icon-sun';
    }else{
        $class = 'night' == $class ? 'night-mode' : '';
    }
    echo $class;

}

JS代码

<script type="text/javascript">

function switchReadMode() { //切换显示模式
    var btn = $('.btn-read-mode');
    var next_mode = $('body').hasClass('night-mode') ? 'day': 'night';
    var mode = next_mode == 'day' ? '': 'night-mode';
    var icon = next_mode == 'day' ? 'fa icon-brightness-contrast': 'fa icon-sun';
    if (next_mode == 'day') {
        $('body').removeClass('night-mode');
    } else {
        $('body').addClass('night-mode');
    }
    btn.find('span').attr('class', icon);
    setCookie("read-mode", next_mode);
}

$('.btn-read-mode').click(function(e) {
    e.preventDefault();//阻止点击打开超链接"#"事件
    switchReadMode();
});//这个触发事件主体


function setCookie(name,value) 
{ 
    var Days = 30; 
    var exp = new Date(); 
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    var path = ';path=/'; 
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString() + path; 
} 
</script>

修改body

<body class="<?php getReadMode();?>">

CSS样式

body.night-mode {
    background-color:#282828;
    color:rgba(155,186,206,.8);
}
body.night-mode a {
    color:#bdcadb;
}
body.night-mode a:hover,a:active {
    color:#4990E2;
}