Matery主题添加暗色模式

<!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fas fa-arrow-up"></i>
    </a>
</div>

<!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fas fa-arrow-up"></i>
    </a>
</div>
<a onclick="switchNightMode()" id="sma" title="模式切换">
    <i class="fa fa-moon-o" id="nightMode" aria-hidden="true"></i>
</a>

/* 深色模式按钮设置 */
#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";
}

/* 深色模式按钮设置 */
if (localStorage.getItem("dark") === "1") {
    document.body.classList.add("dark")
} else {
    /*定时开启暗色模式<默认晚22点至早6点默认开启>*/
    if (new Date().getHours() >= 22 || new Date().getHours() < 6) {
        document.body.classList.add("dark");
        $("#nightMode").removeClass("fa-moon-o").addClass("fa-lightbulb")
    } else {
        if (matchMedia("(prefers-color-scheme: dark)").matches) {
            document.body.classList.add("dark")
        }
    }
}

/*提醒开启功能*/
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);

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

/*暗色模式按钮样式*/
#sma {
    box-shadow: #aaa 2px 5px 10px;
    background: #000;
    width: 38px;
    height: 38px;
    display: block;
    position: fixed;
    border-radius: 50%;
    right: 15px;
    bottom: 100px;
    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 {
    position: absolute;
    right: 11px;
    bottom: 8px;
    font-size: 1.5rem !important
}

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

.fa-comments:before {
    content: "\f086"
}
/* 背景颜色变灰色 */
.dark tbody, body.dark #artDetail .post-info .post-date, body.dark #info_user_pool .moments_chart, body.dark .bg-cover .post-title, body.dark .biaotis span, body.dark .card .card-content p, body.dark .card .card-image .card-title, body.dark .card .toc-title, body.dark .card-content .categories-title, body.dark .card-content .de, body.dark .category-content a, body.dark .chip-container .tag-title, body.dark .fa-lightbulb:before, body.dark .fa-moon-o:before, body.dark .fab, body.dark .fas, body.dark .friends-container .tag-title, body.dark .frind-ship .title h1, body.dark .moments-item-info .moments-item-time, body.dark .moments_load_button, body.dark .notice, body.dark .panel-info, body.dark .post-info .info-break-policy, body.dark .publish-info .post-category, body.dark .publish-info .publish-date, body.dark .row .text, body.dark .statis .name, body.dark .supervise_details, body.dark .title, body.dark .v[data-class=v] .vcount, body.dark .v[data-class=v] .vcount .vnum, body.dark .valine-card .comment_headling, body.dark a body.dark table, body.dark article .article-content .summary, body.dark article .article-tags .chip, body.dark div.jqcloud a, body.dark footer .copy-right, body.dark footer a, body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6, body.dark header .side-nav .menu-list a, body.dark header .side-nav .mobile-head .logo-desc, body.dark header .side-nav .mobile-head .logo-name, body.dark li, body.dark p, body.dark pre code {
    color: rgba(255, 255, 255, .85)/*.85为透明度，可依据需求修改*/
}
/* 背景颜色变黑色 */
body.dark, body.dark #rewardModal .modal-content, body.dark .archive-container, body.dark .modal, body.dark .v[data-class=v] .vcount, body.dark header .side-nav, body.dark header .side-nav .menu-list .m-nav-show {
    background-color: #12121c
}
/*首页文章滑动卡片文字*/
body.dark #thisTime, body.dark .card-image-V .box-content .title {
    color: #8a2be2
}
/*音乐播放器*/
body.dark .aplayer {
    background: #2f3742 !important
}
/*图片滤镜*/
body.dark img, body.dark strong {
    filter: brightness(.7)
}
/*统计图表暗色样式*/
body.dark #categories-chart, body.dark #category-radar, body.dark #post-calendar, body.dark #posts-chart, body.dark #tags-chart {
    filter: invert(1)
}

/*toc目录滤镜*/
body.dark .skillbar .skill-bar-percent {
    color: #000
}

/*加载动画（吃豆豆）文字颜色*/
body.dark .loading-text {
    color: #000
}
/*一些细节背景*/
body.dark .block-with-text:after, body.dark .card, body.dark .collapsible-header, body.dark .wxgzh, body.dark table tr:nth-child(2n), body.dark thead {
    background-color: #282c34
}

/*about页面细节*/
body.dark .profile .author .title {
    color: #faebd7
}
body.dark .my-projects .info .info-title a {
    color: tomato
}

/*外挂标签*/
.swbk .label {
    color: currentColor
}

/*给暗黑模式下的.test添加字体颜色变红样式*/
body.dark .test{
    color: red;
}

body.dark .test{
    color: red !important;
}