喜迎
春节

关于给hexo博客适配全局深色模式


前言:目前,主流系统无论是Windows、MacOS、各大手机厂商系统都支持主题全局深色模式了,所以萌生了这个想法,将博客也配备全局深色模式。

首先,选择适合自己主题的方案

目前,比较主流的方案有两种:

  • prefers-color-scheme 媒体查询
  • 给body加class
    基于我的matery主题,我选择了第二种,主要思想就是加上一个”body.dark”来限制深色模式下的样式。

制作深色模式按钮

在主题的layout.ejs文件中找到body标签的开始标签在后面加上这些js和html代码,这里我放的位置为:/layout/layout.ejs

    <script>
        if (localStorage.getItem('dark') === '1') {
        document.body.classList.add('dark');
        }
        else if (new Date().getHours() >= 22 || new Date().getHours() < 7) {
        document.body.classList.add('dark');
        } 
        else if (matchMedia('(prefers-color-scheme: dark)').matches) {
        document.body.classList.add('dark');
        }
    </script>
    <a onclick="switchNightMode()" id="sma">
        <i class="fa fa-moon-o" id="nightMode" aria-hidden="true"></i>
    </a>

按钮的css样式:

    /* 深色模式按钮设置 */
    #sma {
        background: #000;
        width: 38px;
        height: 38px;
        display: block;
        position: fixed;
        border-radius: 50%;
        right: 15px;
        bottom: 170px;
        padding-top: 15px;
        margin-bottom: 0;
        z-index: 998;
        cursor: pointer;
    }

    #sma .fa-moon-o {
        position: absolute;
        right: 8px;
        bottom: 8px;
        font-size: 1.48rem!important;
    }
    #sma .fa-lightbulb-o  {
        position: absolute;
        right: 13px;
        bottom: 8px;
        font-size: 1.5rem!important;
    }

    .fa-moon-o:before {
        content: "\f186";
    }
    .fa-comments:before {
        content: "\f086";
    }

按钮的js代码

放在独立的js文件里即可,这里我放在/souce/js/matery.js里面

    // 深色模式设置
    function switchNightMode() {
        var body = document.body;
        if(body.classList.contains('dark')){
        document.body.classList.remove('dark');
        localStorage.setItem('dark','0');
        $('#nightMode').removeClass("fa-lightbulb-o").addClass("fa-moon-o");
        return;
        } else {
        document.body.classList.add('dark');
        localStorage.setItem('dark','1');
        $('#nightMode').removeClass("fa-moon-o").addClass("fa-lightbulb-o");
        return;
        }
    }

最后,加上覆盖样式

原理:就是在你觉得深色模式下需要变色的css 选择器前面加上一个body.dark选择器
需要改变:

  • 字体颜色变灰/黑色 color: rgba(255, 255, 255, 0.75);
  • 背景颜色变灰/黑色 background-color: #282c34;
  • 图片加一个暗色遮罩 filter: brightness(.7);
注意:以下css覆盖样式代码是根据我自己喜好修改的,若需要可直接复制粘贴,大体上原理就是这样,你也可以根据自己喜好改变需要变色的地方和颜色。
    /* 深色模式设置 */
    /* 字体颜色变灰白色 */ 
    body.dark .fas,
    body.dark .title,
    body.dark .row .text,
    body.dark article .article-content .summary,
    body.dark .card .card-image .card-title,
    body.dark .fa-moon-o:before,
    body.dark .fa-lightbulb-o:before,
    body.dark article .article-tags .chip,
    body.dark .chip-container .tag-title,
    body.dark div.jqcloud a,
    body.dark .friends-container .tag-title,
    body.dark .frind-ship .title h1,
    body.dark .card .card-content p,
    body.dark .v[data-class=v] .vcount,
    body.dark .v[data-class=v] .vcount .vnum,
    body.dark pre code,
    body.dark h1,
    body.dark h2,
    body.dark h3,
    body.dark h4,
    body.dark h5,
    body.dark h6,
    body.dark li,
    body.dark p,
    body.dark header .side-nav .mobile-head .logo-name,
    body.dark header .side-nav .mobile-head .logo-desc,
    body.dark header .side-nav .menu-list a,
    body.dark .bg-cover .post-title,
    body.dark a
    {
        color: rgba(255, 255, 255, 0.6);
    }

    /* 背景颜色变灰色 */
    body.dark .card,
    body.dark .block-with-text:after
    {
        background-color: #282c34;
    }

    /* 背景颜色变黑色 */
    body.dark,
    body.dark .v[data-class=v] .vcount,
    body.dark #rewardModal .modal-content,
    body.dark .modal,
    body.dark header .side-nav,
    body.dark header .side-nav .menu-list .m-nav-show
    {
        background-color: #12121c;
    }

    /* 改变透明度 */
    body.dark .aplayer{background: #2f3742!important;}
    body.dark img, body.dark strong {
        filter: brightness(.7);
    }
本文参考了以下两篇文章:如果你使用的是和我一样的matery主题,则可以直接复制上面代码,再做酌情修改样式即可,其他主题的也一样,逻辑都是一样的。

给博客适配全局深色模式
面向小白的Hexo添加暗色模式教程


文章作者: NekoDeng
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 NekoDeng !
评 论
 上一篇
关于给hexo博客增加每日一言(诗句,影视名句,网易云热评等)
关于给hexo博客增加每日一言(诗句,影视名句,网易云热评等)
前言:看到很多个人博客都带有每日一言功能,所以决定也弄一个,挺好看的。基于matery主题设置的,其他主题原理也一样可参考。 每日一言API 一言网(hitokoto.cn)创立于 2016 年,隶属于萌创团队,目前网站主要提供一句话服务
2020-09-23
下一篇 
关于hexo博客的note标签美化
关于hexo博客的note标签美化
前言:为了美化hexo博客文章,所以加入note标签并加以美化 引入FontAwesome v4.7.0 版本的 CSS 文件<link type='text/css' rel="stylesheet&qu
2020-09-20
  目录