需求背景
开源应用内嵌个人博客，由于应用做了深色主题兼容，然而当前博客不支持深色主题，导致夜间查看时屏幕很刺眼。遂研究Hexo Matery主题博客支持深色主题模式。最终效果可参考个人博客：卓技卓品
实现过程
第一步，在Web界面添加切换深色主题按钮，找到文件：\blog\themes\matery\layout\layout.ejs。在末尾添加：
<script>
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'),$('#nightMode').removeClass('fa-moon-o').addClass('fa-lightbulb-o')): ($('body').addClass('DarkMode'), localStorage.setItem('isDark', '1'), $('#nightMode').removeClass('fa-lightbulb-o').addClass('fa-moon-o')),
setTimeout(function () {
$('.Cuteen_DarkSky').fadeOut(1e3, function () {
$(this).remove()
})
}, 2e3)
})
}
function switchNightModeTop() {
$('body').hasClass('DarkMode') ? ($('body').removeClass('DarkMode'), localStorage.setItem('isDark', '0'),$('#nightMode').removeClass('fa-moon-o').addClass('fa-lightbulb-o')) : ($('body').addClass('DarkMode'), localStorage.setItem('isDark', '1'), $('#nightMode').removeClass('fa-lightbulb-o').addClass('fa-moon-o'))
}
</script>
<script>
if (localStorage.getItem('isDark') === '1') {
('body').addClass('DarkMode');
}
else if (new Date().getHours() >= 22 || new Date().getHours() < 7) {
('body').addClass('DarkMode');
}
else if (matchMedia('(prefers-color-scheme: dark)').matches) {
('body').addClass('DarkMode');
}
</script>
<a onclick="switchNightMode()" id="sma" title="切换主题">
<i class="fa fa-lightbulb-o" id="nightMode" aria-hidden="false"></i>
</a>
第二步，设置按钮显示和点击切换效果。找到：\blog\themes\matery\source\css\my.css文件或\blog\themes\matery\source\css\matery.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";
}
第三步，设置深色主题的配色及对应控件。继续在第二步选中的文件中添加：
/* 深色主题配色 */
/* 字体颜色变灰白色 */
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;
}
第四步，添加切换页面时，读取缓存主题配置。在文件：\blog\themes\matery\source\js\matery.js中，修改fixStyles方法：
let checkNightMode = function() {
'1' === localStorage.getItem('isDark') ? ($('body').addClass('DarkMode'), $('#nightMode').removeClass('fa-lightbulb-o').addClass('fa-moon-o')) : ($('#nightMode').removeClass('fa-moon-o').addClass('fa-lightbulb-o'))
}
/**
* 修复样式.
*/
let fixStyles = function () {
fixPostCardWidth('navContainer', 'articles');
fixPostCardWidth('artDetail', 'prenext-posts');
fixFooterPosition();
checkNightMode();
};
fixStyles();
此时功能修改完成。
实现优化
以上完成后，发现切换主题功能已经正常实现了。但是发现切换主题按钮会一直显示在Web界面中。在大屏幕电脑上效果还可以，但是在手机、平板这类小屏幕设备上，该按钮会遮挡文字。并且考虑到切换主题不是一个频繁操作的按钮，所以把该功能迁移到导航栏。迁移步骤如下： 首先将第一步中添加按钮移除。 然后找到\blog\themes\matery\layout_partial\navigation.ejs文件，在对应部分添加切换按钮，注意对应class的配置，该配置会影响按钮在不同尺寸屏幕的显示效果：
<li>
<a href="javascript:void(0)" onclick="switchNightMode()" class="hide-on-med-and-down waves-effect waves-light">
<i class="fa fa-lightbulb-o" id="nightMode"> 切换主题</i>
</a>
<a href="#searchModal" class="modal-trigger waves-effect waves-light">
<i id="searchIcon" class="fa fa-search" title="<%= __('search') %>"></i>
</a>
</li>
并在在该文件最后添加点击执行的script方法：
<script>
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'),$('#nightMode').removeClass('fa-moon-o').addClass('fa-lightbulb-o')): ($('body').addClass('DarkMode'), localStorage.setItem('isDark', '1'), $('#nightMode').removeClass('fa-lightbulb-o').addClass('fa-moon-o')),
setTimeout(function () {
$('.Cuteen_DarkSky').fadeOut(1e3, function () {
$(this).remove()
})
}, 2e3)
})
}
</script>
然后找到文件\blog\themes\matery\layout_partial\mobile-nav.ejs，在对应位置添加如下代码。设置小屏幕设备显示效果：
<li>
<a href="javascript:void(0)" onclick="switchNightMode()" class="waves-effect waves-light">
<i class="fa fa-lightbulb-o" id="nightMode" title=" 切换主题"></i>切换主题
</a>
</li>
<% if (theme.githubLink && theme.githubLink.enable) { %>
<li><div class="divider"></div></li>
<li>
<a href="<%- theme.githubLink.url %>" class="waves-effect waves-light" target="_blank">
<i class="fa fa-github-square fa-fw"></i><%- theme.githubLink.title %>
</a>
</li>
此时主题切换功能已经全部完成了。
实现过程中参考博客如下：
hexo-matery主题魔改日记（2）深色模式
网友评论