给自己的博客添加夜间模式

其实这个功能很久前我就在hexo上实现了，但是为什么要在这里再写一下呢？很简单，因为要水一发啊2333

目前，我和该问童鞋一共研究出两种方法，来记录夜间模式的状态，该问童鞋采用的是cookie技术，这种方法可以精细的设定存储的时间，适用于wordpress，感兴趣的童鞋欢迎前去萌萌哒该问的设置夜间模式的相关文章查看，而我当初使用的则是hexo，cookies值会重复记录，经过研究，我发现了一种新的方法：H5的Web存储方法，并且经过今天的实践，在wordpress和hexo上均可使用，但是时间只有两种选择（具体哪两种请往下看）~

在W3School中，HTML5的Web存储方法是这么定义的：

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：

  • localStorage – 没有时间限制的数据存储
  • sessionStorage – 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除

具体的应用例子请前往HTML 5 Web 存储查看，下面就贴下自己的代码辣：

首先修改夜间模式的按钮：

<a class="set-view-mode" href="javascript:void(0)" title="夜间模式">
    <i class="fa fa-moon-o"></i>
</a>

然后在你初始化的js函数中添加以下方法：

$(function(){
    btn = $('.set-view-mode');
    if(sessionStorage.mode=="night"){
        $('body').addClass('night-mode');
        btn.find('i').attr('class','fa fa-sun-o');
    }
    $('.set-view-mode').click(function(){
        var next_mode = $('body').hasClass('night-mode') ? 'day':'night';
        if(next_mode!='day'){
            $('body').addClass('night-mode');
            btn.find('i').attr('class','fa fa-sun-o');
            sessionStorage.mode="night";   
        }else{
            $('body').removeClass('night-mode');
            btn.find('i').attr('class','fa fa-moon-o');
            sessionStorage.mode="day";
        }
    });			
});

然后就是夜间模式的样式，也有两种方法，一种是直接在页面最上层添加了一个半透明黑色遮罩（该问），还有种就是像我这种比较精细的修改，下面分别贴下代码：

.cover{
    position:fixed;
    top: 0px;
    left: 0px;
    outline:5000px solid rgba(0, 0, 0, 0.5);
    z-index: 999999999999;
}

.set-view-mode {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 300;
    background: #E6E6EB;
    width: 45px;
    height: 45px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    color: #FFF;
    opacity: .8;
    text-align: center;
}

.set-view-mode i {
    width: 100%;
    height: 100%;
    display: block;
    line-height: 45px;
    font-size: 24px;
    color: #999;
}

.night-mode {
    background-image: none!important;
    background-color: #3F3F3F!important;
    color:#999!important;
}
.night-mode a:hover {
    color: #3f3f3f!important; 
}
.night-mode #header_menu > li > a ,
.night-mode #header .logo a,
.night-mode #footer,
.night-mode #footer a,
.night-mode .widget_recent_comments li .comment-text {
    color: #999;
}
.night-mode .panel .panel-header h1,
.night-mode .panel .panel-header h2,
.night-mode .panel .panel-header h3,
.night-mode .panel .panel-header h4,
.night-mode .panel .panel-header h1 .dashicons, 
.night-mode .panel .panel-header h2 .dashicons, 
.night-mode .panel .panel-header h3 .dashicons, 
.night-mode .panel .panel-header h4 .dashicons,
.night-mode .ca-body p,
.night-mode .comments-list li .right-box > p,
.night-mode .context span,
.night-mode .context a {
    color: #333;
}
.night-mode #commentform #comment {
    background: #999;
}
.night-mode #commentform .comment-form-smiley {
    background: #3f3f3f;
}
.night-mode input[type=submit],.night-mode button {
    background: #3f3f3f;
    color: #999;
}
.night-mode .dashicons-smiley:before {
    color: #999;
}
.night-mode #header .search-form .search-submit {
    background: #333;
    color: #999;
}
.night-mode .panel,.night-mode .panel .panel-header,.night-mode .ca-container {
    background: rgba(255,255,255,0.2);
}
.night-mode .panel-header .post-meta-box {
    background: #606060!important;
}
.night-mode #post-box .post-title {
    background: #999;
    border-color: #999;
}
.night-mode #header .search-form .search-text {
    background: #584b4b;
}

大功告成！放一张预览图：（当然，我只改了一些主要的样式，欢迎大家补充~）
PS：由于后来数据丢失只好放一个简单的夜间模式的图了○|￣|_