您现在的位置是：首页 > WEB开发 > 正文

WEB开发

Matery主题自定义(一)黑夜模式

1987web2024-03-25WEB开发130

黑夜模式作为一个前端学习者，自然懂得黑夜模式的重要性，可惜主题原生未提供，那就自己弄吧个人博客作为效果参考：https://jieniyou.github.io/设置

黑夜模式作为一个前端学习者，自然懂得黑夜模式的重要性，可惜主题原生未提供，那就自己弄吧个人博客作为效果参考：https://jieniyou.github.io/ 设置基础样式参考其他优秀产品的黑夜模式，得出共性：那就是黑夜模式的背景一般不会是纯黑（#000）；而是淡黑色，字体也不是纯白（# ...

黑夜模式

作为一个前端学习者，自然懂得黑夜模式的重要性，可惜主题原生未提供，那就自己弄吧

个人博客作为效果参考：https://jieniyou.github.io/

设置基础样式

参考其他优秀产品的黑夜模式，得出共性：

那就是黑夜模式的背景一般不会是纯黑（#000）；而是淡黑色，字体也不是纯白（#fff）而浅白色图片亮度降低

下面就开始贴代码了

在themes>hexo-theme-matery>source>css>matery.css中加上下面的代码

/* 字体颜色变灰白色 */body.DarkMode.fas,body.DarkMode.title,body.DarkMode.row.text,body.DarkModearticle.article-content.summary,body.DarkMode.card.card-image.card-title,body.DarkMode.fa-moon-o:before,body.DarkMode.fa-lightbulb-o:before,body.DarkModearticle.article-tags.chip,body.DarkMode.chip-container.tag-title,body.DarkModediv.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.DarkModepre code,body.DarkModeh1,body.DarkModeh2,body.DarkModeh3,body.DarkModeh4,body.DarkModeh5,body.DarkModeh6,body.DarkModeli,body.DarkModep,body.DarkModeheader.side-nav.mobile-head.logo-name,body.DarkModeheader.side-nav.mobile-head.logo-desc,body.DarkModeheader.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.DarkModeheader.side-nav,body.DarkModeheader.side-nav.menu-list.m-nav-show{background-color:#12121c;}/* 改变透明度 */body.DarkMode.aplayer{background:#2f3742 !important;}body.DarkModeimg,body.DarkModestrong{filter:brightness(0.7);}/*toc目录滤镜*/body.DarkMode.toc-widget{filter:invert(0.8);}body.DarkMode.toc-widget.toc-list-item{color:#000}/* Skill bar text color */body.DarkMode.skillbar.skill-bar-percent{color:#000;}

切换按钮

完成了背景、字体、图片的样式，就需要黑夜白天切换按钮了

在themes>hexo-theme-matery>layout>_widget中创建一个新的文件day-night.ejs，在新建的文件中加入下面的代码

class="sum-moon-box"> class="btn-floating btn-large waves-effect waves-light"onclick="switchNightMode()"title="切换主题"> id="sum-moon-icon"class="fas fa-sun">

再在themes>hexo-theme-matery>layout>layout.ejs文件中引用一下

需要在 body 标签内部插入下面代码

<%-partial(_widget/day-night.ejs)%>

按钮样式

完成上面操作以后，就需要添加按钮样式和切换动画了，同样是在themes>hexo-theme-matery>source>css>matery.css中

/* 黑夜模式动画 */.Cuteen_DarkSky,.Cuteen_DarkSky:before{content:;position:fixed;left:0;right:0;top:0;bottom:0;z-index:8888;}.Cuteen_DarkSky{background:linear-gradient(#feb8b0,#fef9db);}.Cuteen_DarkSky:before{transition:2sease all;opacity:0;background:linear-gradient(#4c3f6d,#6c62bb, #93b1ed);}.DarkMode.Cuteen_DarkSky:before{opacity:1;}.Cuteen_DarkPlanet{z-index:9999;position:fixed;left:-50%;top:-50%;width:200%;height:200%;-webkit-animation:CuteenPlanetMove2scubic-bezier(0.7,0,0,1);animation:CuteenPlanetMove2scubic-bezier(0.7,0,0,1);transform-origin:center bottom;}@-webkit-keyframesCuteenPlanetMove{0%{transform:rotate(0);}to{transform:rotate(360deg);}}@keyframesCuteenPlanetMove{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);}/*黑夜模式按钮*/.sum-moon-box{width:48px;height:48px;text-align:center;border-radius:50%;position:fixed;right:15px;bottom:195px;margin-bottom:0;z-index:900;}.sum-moon-box.btn-floating{width:48px;height:48px;}.sum-moon-box i{font-size:1.8rem;line-height:48px!important;}

定时提示切换黑夜模式

在themes>hexo-theme-matery>source>js>matery.js中添加下列代码

//黑夜模式提醒开启功能setTimeout(function(){if((newDate().getHours()>=19||newDate().getHours()<7)&&!$(body).hasClass(DarkMode)){let toastHTML=晚上使用黑夜模式阅读能够减轻视觉疲劳。M.toast({html:toastHTML})}},2000)

黑夜模式持久化

在themes>hexo-theme-matery>layout>layout.ejs中添加下列代码（最好插入在<%- partial(_partial/day-night.ejs) %>下面）

/* 模式判断 */<script>/* 模式判断 */if(localStorage.getItem(isDark)===1){document.body.classList.add(DarkMode);$(#sum-moon-icon).addClass("fa-sun").removeClass(fa-moon)}else{document.body.classList.remove(DarkMode);$(#sum-moon-icon).removeleClass("fa-sun").addClass(fa-moon)}