嘘~ 正在从服务器偷取页面 . . .

深色模式配置说明文档


参考文档1:hexo-matery添加深色模式 | FanHeart (hesifan.top)

参考文档2:hexo-matery主题css样式文件

参考文档3:hexo-matery主题toc样式文件

实现原理

利用 js 给全局 HTML 的body标签增加一个 class 为DarkMode的属性控制开启深色模式,再通过这个全局属性值重新写一个深色模式需要用到的 CSS 就可以实现点击深色模式按钮进行切换。

添加按钮

在主题的_partial文件夹下新建一个nightMode.ejs,文件夹相对路径:themes\hexo-theme-matery\layout\_partial

在新建的 ejs 文件夹中填入以下代码:

<!-- 深色模式按钮 -->
<div onclick="switchNightMode()" class="icon-V hidden" title="切换主题">
    <a class="btn-floating btn-large waves-effect waves-light"> 
        <i id="modeicon" class="fas fa-moon"></i> 
    </a> 
</div>

<script>
    function checkNightMode() {
        '1' === localStorage.getItem('isDark') ? ($('body').addClass('DarkMode'), $('#changeMode-top').removeClass('fa-moon').addClass('fa-sun'), $('#modeicon').attr('class', 'fas fa-lightbulb')) : '0' === localStorage.getItem('isDark') ? $('#modeicon').attr('class', 'fas fa-moon') : new Date().getHours() >= 20 || new Date().getHours() < 7 ? ($('body').addClass('DarkMode'), $('#changeMode-top').removeClass('fa-moon').addClass('fa-sun'), $('#modeicon').attr('class', 'fas fa-lightbulb')) : matchMedia('(prefers-color-scheme: dark)').matches ? ($('body').addClass('DarkMode'), $('#changeMode-top').removeClass('fa-moon').addClass('fa-sun'), $('#modeicon').attr('class', 'fas fa-lightbulb')) : $('#modeicon').attr('class', 'fas fa-moon')
    }

    function switchNightMode() {
        $('<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"></div></div>').appendTo($('body')), setTimeout(function () {
            $('body').hasClass('DarkMode') ? ($('body').removeClass('DarkMode'), localStorage.setItem('isDark', '0'), $('#changeMode-top').removeClass('fa-sun').addClass('fa-moon'), $('#modeicon').attr('class', 'fas fa-moon')) : ($('body').addClass('DarkMode'), localStorage.setItem('isDark', '1'), $('#changeMode-top').removeClass('fa-moon').addClass('fa-sun'), $('#modeicon').attr('class', 'fas fa-lightbulb')), setTimeout(function () {
                $('.Cuteen_DarkSky').fadeOut(1e3, function () {
                    $(this).remove()
                })
            }, 2e3)
        })
    }

    function switchNightModeTop() {
        $('body').hasClass('DarkMode') ? ($('body').removeClass('DarkMode'), localStorage.setItem('isDark', '0'), $('#changeMode-top').removeClass('fa-sun').addClass('fa-moon'), $('#modeicon').attr('class', 'fas fa-moon')) : ($('body').addClass('DarkMode'), localStorage.setItem('isDark', '1'), $('#changeMode-top').removeClass('fa-moon').addClass('fa-sun'), $('#modeicon').attr('class', 'fas fa-lightbulb'))
    }
</script>

然后在layout.ejs文件中修改以下代码:

/*修改前*/

<%- partial('_partial/footer') %>

<%- partial('_partial/search') %>
<%- partial('_partial/back-top') %>

/*修改后*/

<%- partial('_partial/footer') %>
<%- partial('_partial/nightMode') %>
<%- partial('_partial/search') %>
<%- partial('_partial/back-top') %>

css 代码添加

按钮样式及切换动画 CSS

在主题文件夹下matery.css中添加如下代码:

/* 深色模式动画 */
.Cuteen_DarkSky, .Cuteen_DarkSky:before {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
}

.Cuteen_DarkSky {
    background: linear-gradient(#feb8b0, #fef9db);
}

.Cuteen_DarkSky:before {
    transition: 2s ease all;
    opacity: 0;
    background: linear-gradient(#4c3f6d, #6c62bb, #93b1ed);
}

.DarkMode .Cuteen_DarkSky:before {
    opacity: 1;
}

.Cuteen_DarkPlanet {
    z-index: 999;
    position: fixed;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    -webkit-animation: CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1);
    animation: CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1);
    transform-origin: center bottom;
}

@-webkit-keyframes CuteenPlanetMove {
    0% {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes CuteenPlanetMove {
    0% {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

.Cuteen_DarkPlanet:after {
    position: absolute;
    left: 35%;
    top: 40%;
    width: 9.375rem;
    height: 9.375rem;
    border-radius: 50%;
    content: '';
    background: linear-gradient(#fefefe, #fffbe8);
}

/*深色模式按钮*/

.icon-V {
    background: rgb(101, 190, 206);
    box-shadow: 0 0 4px 1px rgb(0 0 0 / 12%) !important;
    border-radius: 48px !important;
    width: 48px;
    height: 48px;
    padding: 15px;
    border-radius: 48px;
    overflow: hidden;
    position: fixed;
    bottom: 196px;
    padding-top: 15px;
    /*用于调整按钮位置*/
    right: 15px;
    transition: 1.3s cubic-bezier(0.53, 0, 0.15, 1.3);
    z-index: 998;
}

.icon-V .btn-floating {
    background: linear-gradient(to bottom right, #3a8fff 0%, #FF2A68 100%);
    width: 48px;
    height: 48px;
    position: absolute;
    bottom: 0px;
    margin: auto;
    right: 0px;
}

.icon-V .btn-floating i {
    line-height: 48px;
    font-size: 1.8rem;
}

深色模式颜色覆盖样式

同样在matery.css中添加如下代码:

/* 字体颜色变灰白色 */

body.DarkMode .fas, body.DarkMode .title, body.DarkMode .row .text, body.DarkMode article .article-content .summary, body.DarkMode .card .card-image .card-title, body.DarkMode .fa-moon-o:before, body.DarkMode .fa-lightbulb-o:before, body.DarkMode article .article-tags .chip, body.DarkMode .chip-container .tag-title, body.DarkMode div.jqcloud a, body.DarkMode .friends-container .tag-title, body.DarkMode .frind-ship .title h1, body.DarkMode .card .card-content p, body.DarkMode .card .card-content .dss, body.DarkMode .v[data-class='v'] .vcount, body.DarkMode .v[data-class='v'] .vcount .vnum, body.DarkMode pre code, body.DarkMode h1, body.DarkMode h2, body.DarkMode h3, body.DarkMode h4, body.DarkMode h5, body.DarkMode h6, body.DarkMode li, body.DarkMode p, body.DarkMode header .side-nav .mobile-head .logo-name, body.DarkMode header .side-nav .mobile-head .logo-desc, body.DarkMode header .side-nav .menu-list a, body.DarkMode .bg-cover .post-title, body.DarkMode.read .bg-cover .description {
    color: rgba(255, 255, 255, 0.6);
}

/* 背景颜色变灰色 */

body.DarkMode .card, body.DarkMode .block-with-text:after {
    background-color: #282c34;
}

/* 背景颜色变黑色 */

body.DarkMode, body.DarkMode .v[data-class='v'] .vcount, body.DarkMode #rewardModal .modal-content, body.DarkMode .modal, body.DarkMode header .side-nav, body.DarkMode header .side-nav .menu-list .m-nav-show {
    background-color: #12121c;
}

/* 改变透明度 */

body.DarkMode .aplayer {
    background: #2f3742 !important;
}

body.DarkMode img, body.DarkMode strong {
    filter: brightness(0.7);
}

/* 统计图滤镜 */

body.DarkMode #post-calendar, body.DarkMode #category-radar, body.DarkMode #tags-chart, body.DarkMode #categories-chart, body.DarkMode #posts-chart {
    filter: invert(1);
}

/*toc目录滤镜*/

body.DarkMode .toc-widget {
    filter: invert(1);
}

/* Skill bar text color */

body.DarkMode .skillbar .skill-bar-percent {
    color: #000;
}

TOC 样式修改


打开 post-detail-toc.ejs 相对路径:themes\hexo-theme-matery\layout\_partial\post-detail-toc.ejs,修改以下代码

/*修改前代码*/

.toc-widget {
        width: 345px;
        padding-left: 20px;
}

/*修改后代码*/

.toc-widget {
        width: 345px;
        padding-left: 20px;
        background-color: rgb(255, 255, 255, 0.7);
        border-radius: 10px;
        box-shadow: 0 10px 35px 2px rgb(0 0 0 / 15%), 0 5px 15px rgb(0 0 0 / 7%), 0 2px 5px -5px rgb(0 0 0 / 10%) !important;
}

然后在下面大概 100 行左右的位置,修改如下代码:

<!--修改前代码-->

<div class="toc-widget card" style="background-color: white;">

<!--修改后代码-->

<div class="toc-widget card">

定时开启深色模式

matery.js中添加如下js代码以实现定时开启和提示开启深色模式功能:

    //提醒开启功能 
    setTimeout(function () {
        if ((new Date().getHours() >= 19 || new Date().getHours() < 7) && !$('body').hasClass('DarkMode')) {
            let toastHTML = '<span style="color:#97b8b2;border-radius: 10px;>' + '<i class="fa fa-bell" aria-hidden="true"></i>晚上使用深色模式阅读更好哦。(゚▽゚)/</span>'
            M.toast({
                html: toastHTML
            })
        }
    }, 2200)
    //定时开启功能,到时间会强制深色模式
    if (new Date().getHours() >= 22 || new Date().getHours() < 6) {
    document.body.classList.add('DarkMode');
    }

下面是主题样式文件下的关于回顶按钮的 css 配置(大概在1873行左右):

/*回到顶部按钮样式*/

.top-scroll {
    display: none;
    position: fixed;
    right: 15px;
    bottom: 15px;
    padding-top: 15px;
    margin-bottom: 0;
    z-index: 998;
}

.top-scroll .btn-floating {
    background: linear-gradient(to bottom right, #FF5E3A 0%, #FF2A68 100%);
    width: 48px;
    height: 48px;
}

.top-scroll .btn-floating i {
    line-height: 48px;
    font-size: 1.8rem;
}

文章作者: 目棃
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 目棃 !
评论
  目录