1. 完善gitalk 在 dark mode下的顯示

2. 完善footer 有背景和無背景下，在dark mode下的顯示
3. 界面微調
4. 增加選項可關閉aside在手機上的顯示
5. 修復關閉夜間模式情況下，console報Uncaught ReferenceError: autoChangeMode is not defined 的bug

_config.yml

@@ -428,6 +428,9 @@ subtitle:
 
 ####    側邊欄    ####
 #-------------------------------------
+# 手機頁面（ 顯示寬度 < 768px ）是否顯示aside内容
+aside_mobile: true
+
 # 側邊欄顯示設置
 aside:
   position: right # left or right

layout/includes/layout.pug

@@ -70,7 +70,8 @@ html(lang=config.language data-theme=theme.display_mode)
               block content
       
       - var footer_bg = theme.footer_bg == false ? '' : bg_img
-      footer#footer(style=footer_bg)
+      - var is_bg = theme.footer_bg == false ? 'color' : 'photo'
+      footer#footer(style=footer_bg data-type=is_bg)
         include ./footer.pug    
     include ./rightside.pug
     each item in theme.CDN_USE.js

source/css/_layout/aside.styl

@@ -273,3 +273,9 @@
           margin-left: 15px
         else 
           margin-right: 15px
+
+if hexo-config('aside_mobile') == false
+  @media screen and (max-width: $sm)
+    #aside_content
+        display: none
+

source/css/_layout/footer.styl

@@ -15,13 +15,11 @@
       content: ''
       width: 100%
       height: 100%
-      opacity: 0.5
+      background-color: alpha($dark-black,0.5)
-      background-color: #394245
-      background-image: linear-gradient(234deg, #394245 0%, #000 100%)
 
 
 #footer-wrap
-  padding: 1.2rem 1rem 1rem
+  padding: 2rem 1rem
   color: $light-grey
   text-align: center
   position: relative

source/css/_layout/page.styl

@@ -319,7 +319,7 @@
   #tag,
   #category
     padding: 1.8rem 1.3rem
-    margin-top: 10px
+    margin: 0
  
   .category-lists
     padding: 0
@@ -344,7 +344,7 @@
           display: none
 
       &:first-child
-        margin-top: 10px
+        margin: 0
 
 @media screen and (min-width: 900px) 
   if hexo-config("aside.position") == "left"

source/css/_layout/post.styl

@@ -41,16 +41,14 @@ if hexo-config("post_beautify.enable")
   height: 19rem
 
   &:before
-    position: absolute;
+    position: absolute
-    top: 0;
+    top: 0
-    left: 0;
+    left: 0
-    display: block;
+    display: block
-    content: '';
+    content: ''
-    width: 100%;
+    width: 100%
-    height: 100%;
+    height: 100%
-    opacity: 0.5;
+    background-color: alpha($dark-black,0.5)
-    background-color: #394245;
-    background-image: linear-gradient(234deg, #394245 0%, #000 100%);
 
   a
     color: $light-grey
@@ -464,4 +462,4 @@ img
 @media screen and (max-width:768px)
   .layout_post
     padding: 1.8rem 1rem
-    margin: 30px 5px
+    margin: 0px 5px

source/css/_layout/z-darkmode.styl

@@ -181,13 +181,11 @@
   #category,
   #page,
   .flink,
-  .layout_post,
+  .layout_post
-  #footer-wrap
+    background: #2d3035
-    background:#2d3035
 
   #nav,
-  #top-container,
+  #top-container
-  #footer
     &::before
       content: ""
       position: absolute
@@ -195,7 +193,7 @@
       bottom: 0
       left: 0
       right: 0
-      background-color: rgba(0,0,0,0.7)
+      background-color: alpha($dark-black,0.7)
 
   #nav span,
   #nav i,
@@ -234,23 +232,19 @@
       border-top: 13px solid lighten(#2d3035,10) !important
     
 
-  #web_bg[data-type=color]
+  #web_bg[data-type=color],
+  #footer[data-type=color]
     background: #2d3032
 
-  #web_bg[data-type=photo]:before
+  #web_bg[data-type=photo]:before,
-    content: ""
+  #footer[data-type=photo]:before
-    position: absolute
+    background-color: alpha($dark-black,0.7)
-    top: 0
-    bottom: 0
-    left: 0
-    right: 0
-    background-color: rgba(0,0,0,0.8)
 
-  #hbe-security
+  #hexo-blog-encrypt
-    label
+    label,input
       color: #99a9bf !important
     input
-      background-color: #616a6b
+      background-color: #2d3035
 
 
   #mobile-sidebar
@@ -283,6 +277,15 @@
   
   .bookmark--animated:before
     background: lighten(#2d3035,20) !important
+  
+  if hexo-config('gitalk') && hexo-config('gitalk.enable')
+    #gitalk-container
+      .gt-header-textarea
+        background-color: #2d3035 !important
+        color: #99a9bf
+        border: 1px solid #99a9bf
+      .gt-comment-content
+        filter: brightness(0.7)
 
     
 

source/js/main.js

@@ -746,26 +746,30 @@ $(function () {
    * Darkmode
    */
 
-  // if (autoChangeMode == '1') {
+  if (typeof autoChangeMode !== "undefined") {
-  //   window.matchMedia("(prefers-color-scheme: dark)").addListener(function (e) {
+   
-  //     if (e.matches) {
-  //       activateDarkMode()
-  //       change_light_icon()
-  //       Cookies.remove('theme')
-  //     } else {
-  //       activateLightMode()
-  //       change_dark_icon()
-  //       Cookies.remove('theme')
-  //     }
-  
-  //   })
-  // }
 
-  if (autoChangeMode == '1' || autoChangeMode == '2') {
+    // if (autoChangeMode == '1') {
-    if (Cookies.get("theme") == "dark") {
+    //   window.matchMedia("(prefers-color-scheme: dark)").addListener(function (e) {
-      change_light_icon()
+    //     if (e.matches) {
-    } else {
+    //       activateDarkMode()
-      change_dark_icon()
+    //       change_light_icon()
+    //       Cookies.remove('theme')
+    //     } else {
+    //       activateLightMode()
+    //       change_dark_icon()
+    //       Cookies.remove('theme')
+    //     }
+  
+    //   })
+    // }
+
+    if (autoChangeMode == '1' || autoChangeMode == '2') {
+      if (Cookies.get("theme") == "dark") {
+        change_light_icon()
+      } else {
+        change_dark_icon()
+      }
     }
   }