CorePress主题添加夜间模式功能

效果

实现

主题设置-插入代码-页脚代码

<!--移动端侧边栏-->
<div class="mobile-side">
        <div class="other-project"><svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#icon-system"></use></svg></div>
        <div class="return-top"><i class="fa fa-arrow-up" aria-hidden="true"></i></div>
    </div>
<script>
        var listPlaneTitle = document.querySelector('.list-plane-title');
        var returnTop = document.querySelector('.return-top');
        var otherProject = document.querySelector('.other-project');
        document.addEventListener('scroll', function() {
            if (window.pageYOffset >= 150) {
                returnTop.style.display = 'block';
            } else {
                returnTop.style.display = 'none';
            }
        })
returnTop.addEventListener('click', function() {
    animate(window, 0);
});
function animate(obj, target, callback) {
            // 给不同的元素指定不同的定时器obj.timer
            // 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
            // 解决方案，让元素只有一个定时器执行
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                // 步长值写到定时器里面
                // 把步长值改为整数，不要出现小数的问题
                // var step = Math.ceil((target - obj.offsetLeft) / 10);
                var step = (target - window.pageYOffset) / 10;
                // 如果step是正值，往大了取，负值，往小了取
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (window.pageYOffset == target) {
                    // 停止动画效果(清除动画)
                    clearInterval(timer);
                    // 回调函数写到定时器结束里面
                    if (callback) {
                        callback();
                    }
                }
                // 把每次加1 这个步长值改为一个慢慢变小的值 步长公式： （目标值 - 现在的位置） / 10
                // obj.style.left = window.pageYOffset + step + 'px';
                window.scroll(0, window.pageYOffset + step);
            }, 15); //推荐秒数为15毫秒
        }
        otherProject.addEventListener('click', function() {
switchNightMode();
});
    </script>
<!-- 夜间模式-->
<script>
(function(){
    if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
        if(new Date().getHours() > 20 || new Date().getHours() < 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>

主题设置-插入代码-自定义CSS

.mobile-side {
    display: none;
}
@media screen and (max-width:800px){
    .mobile-side {
        display: block;
        z-index: 999999;
    }
    .mobile-side {
            position: fixed;
            bottom: 20%;
            right: 10px;
            width: 50px;
            height: 102px;
            background-color: transparent;
        }
        .return-top {
            display: none;
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 50px;
            border-radius: 5px;
            background-color: #e8eaeb;
            text-align: center;
            line-height: 50px;
        }
        .other-project {
            position: absolute;
            top: 0;
            width: 100%;
            height: 50px;
            margin-bottom: 2px;
            border-radius: 5px;
            background-color: #e8eaeb;
            text-align: center;
            line-height: 50px;
        }
}
/*  夜间模式样式*/

body.night header, body.night .menu-header-list,body.night .aside-box ,body.night .dialog-plane,body.night .crumbs-plane,body.night .footer-plane,body.night .drawer-menu-list,body.night .login-main{
            background-color: #191616!important;
color: #E3E3E3!important;
        }
        body.night .post-list-page-plane, body.night .post-item, body.night .frinds-links, body.night .search-keyword, body.night .widger-comment-excerpt ,body.night .widger-comment-excerpt::before,body.night .user-sub-menu,body.night .index-top-postcard-main,body.night .sub-menu,body.night .catalog-close,body.night .comment_form_textarea,body.night .conment-face-plane{
            background-color: #232425!important;
color:#757575;
        }
        body.night .list-plane-title, body.night .pages {
            background-color: #1D1E1F;
color: #E3E3E3!important;
        }
        body.night .post-list {
            background-color: #1d1e1f!important;
        }
body.night img {
    filter: brightness(90%);
}
body.night a, body.night a:link, body.night a:visited {
    color: #989292;
}
body.night .index-load-more-btn ,body.night .search-submit,body.night .button,body.night .c-downbtn-btn,body.night .login-btn-header,body.night .login-button{
background-color:#34495E!important;
}
body.night .post-item-main {
color:#232425!important;
}
body.night .post-content, body.night #post-catalog ,body.night .relevant-plane,body.night .responsesWrapper,body.night .post-title{
background-color:#171616!important;
color:#FFFFFF;
}
body.night .post-copyright {
background-color:#0B0C0C!important;
color:#555555;
}
body.night .popover-btn popover-btn-face{
background-color:#ccc;
}
body.night .author_name,body.night .widget-title {
color:#FFFFFF;
}

参考：

Ethan's blog
RiPro演示站