🚀 feat: Dark Mode

README.md

@@ -153,6 +153,9 @@ search: true
 # RSS
 rss: /atom.xml
 
+# DarkMode
+darkmode: true
+
 # Comment：1、Valine (recommended)；2、Gitalk
 
 # 1、Valine [A fast, simple & powerful comment system](https://github.com/xCss/Valine)

_config.yml

@@ -100,6 +100,9 @@ search: true
 # RSS订阅(先安装hexo-generator-feed插件，再去博客根目录config进行配置)
 rss: /atom.xml
 
+# 是否启用黑夜模式开关
+darkmode: true
+
 # 评论：1、Valine(推荐)；2、Gitalk
 
 # 1、Valine[一款快速、简洁且高效的无后端评论系统](https://github.com/xCss/Valine)

layout/_partial/totop.ejs

@@ -1,3 +1,8 @@
 <div class="totop" id="totop">
   <i class="ri-arrow-up-line"></i>
 </div>
+<% if (theme.darkmode){ %>
+<div class="todark" id="todark">
+  <i class="ri-moon-line"></i>
+</div>
+<% } %>

layout/layout.ejs

@@ -5,7 +5,7 @@
     <main class="content">
       <%- body %>
       <%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
-      <div class="to_top">
+      <div class="float_btns">
         <%- partial('_partial/totop') %>
       </div>
     </main>

source-src/css/_partial/ayer.styl

@@ -55,11 +55,11 @@
     &:hover
       color sea
 
-.to_top
+.float_btns
   position fixed
   bottom 10rem
   right 50px
-  z-index 9
+  z-index 9996
   text-align center
   transform scale(1.2)
 
@@ -89,5 +89,5 @@
     #subtitle-box
       font-size 2rem
   
-  .to_top
+  .float_btns
     right 10px

source-src/css/_partial/reward.styl

@@ -13,8 +13,7 @@
     margin-left 50%
     transform translateX(-50%)
     box-shadow 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
-    -webkit-transition .4s ease-in-out
-    transition .4s ease-in-out
+    transition(.4s ease-in-out)
     cursor pointer
     &:hover,
     &:active

source-src/css/_partial/totop.styl

@@ -18,14 +18,21 @@
   }
 }
 
-.totop
+.totop,.todark
   position relative
-  display inline-block
+  display block
   overflow hidden
   cursor pointer
   rounded-circle(3.2rem)
-  background-color froth-light
+  background-color darken(froth-light,2%)
   line-height 3rem
+  opacity .6
+  transition(opacity 1s ease)
+  &:hover
+    opacity 1
+  
+.totop
+  margin-bottom .8rem
   &:hover > i {
     animation rocket .3s ease-in-out
   }

source-src/css/style.styl

@@ -32,16 +32,20 @@ body
   &.darkmode
     background: rgba(0,0,0,.6)
     *
-      color darken(#fff,10%)
-    .ri-arrow-up-line
-      color #333 !important
-    .article-entry
-      code
-        background: darken(#999,20%)
-    .article-header .article-title,.share-outer i
+      color: darken(#fff,10%)
+    .article-entry code
+      background: darken(#ddd,10%) !important
+      color: #c7254e !important
+    .article-header .article-title,.share-outer i,.category-list .category-list-item i,.category-list a:hover .category-list-item,.article-date, .article-category .article-category-link, .archive-year-wrap .archive-year, .archive-article-date,a.toc-link,.tag-list > .tag-list-item:before,.article-tag-list:before
       color: darken(#fff,10%) !important
-    .share-icons a i,#reward .reward-p,#reward .reward-p i
+    .share-icons a i,.float_btns i,#reward .reward-p,#reward .reward-p i,.local-search-input
       color: darken(#999,20%) !important
+    .v *
+      color: #555 !important
+    .tag-list > .tag-list-item .tag-list-link,.article-tag-list .article-tag-list-link
+      background: darken(#fff,10%) !important
+      color: #555 !important
+
 a
   color link-color
   &:hover

source/js/ayer.js

@@ -99,9 +99,9 @@
     $('.content').scroll(function () {
       var scrollTop = $('.content').scrollTop();
       if (scrollTop > upperLimit) {
-        $(scrollElem).stop().fadeTo(300, 1); // fade back in
+        $(scrollElem).stop().fadeTo(200, .6); // fade back in
       } else {
-        $(scrollElem).stop().fadeTo(300, 0); // fade out
+        $(scrollElem).stop().fadeTo(200, 0); // fade out
       }
     });
 
@@ -139,6 +139,26 @@
     $('#mask').fadeOut(100)
     $('#reward').fadeOut(100)
   })
+
+  // darkmode
+  if(sessionStorage.getItem('darkmode')==1){
+    $('body').addClass('darkmode')
+    $('#todark i').removeClass('ri-moon-line').addClass('ri-sun-line')
+  }else{
+    $('body').removeClass('darkmode')
+    $('#todark i').removeClass('ri-sun-line').addClass('ri-moon-line')
+  }
+  $('#todark').click(()=>{
+    if(sessionStorage.getItem('darkmode')==1){
+      $('body').removeClass('darkmode')
+      $('#todark i').removeClass('ri-sun-line').addClass('ri-moon-line')
+      sessionStorage.removeItem('darkmode')
+    }else{
+      $('body').addClass('darkmode')
+      $('#todark i').removeClass('ri-moon-line').addClass('ri-sun-line')
+      sessionStorage.setItem('darkmode',1)
+    }
+  })
 })(jQuery);