feat: 增加日间/夜间模式自由切换功能

layout/_partial/header.ejs

@@ -26,8 +26,6 @@
 
         <div class="menu-bar">
             <div class="menu-bar-middle"></div>
-            <!--<i class="fa fa-bars"></i>-->
-            <!--<i class="fa fa-remove"></i>-->
         </div>
     </div>
 

layout/_partial/scripts.ejs

@@ -1 +1 @@
-<%- js(['js/main.js', "js/common.js"]) %>
+<%- js(['js/main.js', 'js/common.js', 'js/toggle-mode.js']) %>

layout/_partial/tools.ejs

@@ -1,6 +1,10 @@
 <div class="tools-container">
-    <ul>
+    <ul class="tools-list">
-        <li class="search-btn"><i class="fa fa-search"></i></li>
+        <li class="search-btn">
-        <li class="mode-toggle-btn"><i class="fa fa-sun-o"></i></li>
+            <i class="fa fa-search"></i>
+        </li>
+        <li class="mode-toggle-btn">
+            <i class="fa fa-moon-o"></i>
+        </li>
     </ul>
 </div>

source/css/layout/_partial/article-meta-info.styl

@@ -4,7 +4,7 @@ $article-meta-info-font-size = 12px;
 
 .article-meta-info {
 
-  color: var(--third-text-color);;
+  color: var(--third-text-color);
   font-size: $article-meta-info-font-size;
 
   .article-meta-item {
@@ -23,7 +23,7 @@ $article-meta-info-font-size = 12px;
     }
 
     a {
-      color: var(--third-text-color);;
+      color: var(--third-text-color);
 
       &:hover {
         color: $primary-color;

source/css/layout/_partial/footer.styl

@@ -1,10 +1,10 @@
 @require '../common/variables.styl'
 .footer {
 
-  color: var(--third-text-color);;
+  color: var(--third-text-color);
 
   a {
-    color: var(--third-text-color);;
+    color: var(--third-text-color);
 
     &:hover {
       color: $primary-color;

source/css/layout/_partial/header.styl

@@ -8,7 +8,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: height 0.5s ease, max-width 0.5s cubic-bezier(0, 0.2, 0.8, 1);
+  transition: all 0.5s ease;
 
   .header-content {
     display: flex;
@@ -47,7 +47,7 @@
 
           &:hover {
 
-            color: var(--normal-text-color);;
+            color: var(--normal-text-color);
 
             &::after {
               content: '';
@@ -66,7 +66,7 @@
 
 
         .active {
-          color: var(--second-text-color);;
+          color: var(--second-text-color);
           font-weight: bold;
           transition: all 0.5s ease;
 
@@ -97,7 +97,7 @@
         height: 2px;
         margin: 6px 0;
         position: relative;
-        background: var(--normal-text-color);;
+        background: var(--normal-text-color);
         transition: all 0.3s ease;
 
         &::before {
@@ -107,7 +107,7 @@
           left: 0;
           width: 100%;
           height: 2px;
-          background: var(--normal-text-color);;
+          background: var(--normal-text-color);
           transition: all 0.3s ease;
         }
 
@@ -118,7 +118,7 @@
           left: 0;
           width: 100%;
           height: 2px;
-          background: var(--normal-text-color);;
+          background: var(--normal-text-color);
           transition: all 0.3s ease;
         }
       }
@@ -134,7 +134,7 @@
     left: 0;
     transform: scaleY(0);
     transform-origin: top;
-    background: var(--background-color);;
+    background: var(--background-color);
     transition: all 0.5s ease;
     z-index: $z-index-2;
 
@@ -154,18 +154,18 @@
           border-radius: 20px;
           text-align: center;
           line-height: 34px;
-          color: var(--normal-text-color);;
+          color: var(--normal-text-color);
           transition: all 0.5s ease;
 
           &:hover {
-            color: var(--second-text-color);;
+            color: var(--second-text-color);
             font-weight: bold;
           }
         }
 
         .active {
           border: 1px solid $primary-color;
-          color: var(--second-text-color);;
+          color: var(--second-text-color);
           font-weight: bold;
         }
 
@@ -224,7 +224,7 @@
 
 
 .header-wrapper-shrink {
-  background: var(--background-color);;
+  background: var(--background-color);
   box-shadow: 0 1px 2px $border-color;
 
   .header-content {

source/css/layout/_partial/local-search.styl

@@ -27,7 +27,7 @@ $keyword-red = #ff2a2a;
   z-index: 1001;
 
   .search-icon, .popup-btn-close {
-    color: var(--normal-text-color);;
+    color: var(--normal-text-color);
     font-size: $icon-size;
     padding: 0 10px;
   }

source/css/layout/_partial/tools.styl

@@ -1,11 +1,34 @@
+@require '../common/variables.styl'
+
 .tools-container {
-  ul {
+
+  .tools-list {
     li {
       cursor: pointer;
-      i {
+      padding: 5px;
-        font-size: 20px;
+      border-radius: 50%;
-        margin: 6px 0;
+      border: 1px solid var(--border-color);
+      width: 26px;
+      height: 26px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      margin-bottom: 12px;
+
+      &:hover {
+        color: var(--primary-color);
+        border-color: var(--primary-color);
       }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      i {
+        transition: all 0.3s ease;
+      }
+
     }
   }
 

source/css/layout/archive-content.styl

@@ -12,7 +12,7 @@ $article-date-font-size = 14px;
     .archive-item-header {
       .archive-year {
         font-size: $archive-year-font-size;
-        color: var(--second-text-color);;
+        color: var(--second-text-color);
         font-weight: 600;
         margin-right: 20px;
       }
@@ -28,7 +28,7 @@ $article-date-font-size = 14px;
         font-size: $article-title-font-size;
 
         a.article-title {
-          color: var(--normal-text-color);;
+          color: var(--normal-text-color);
 
           &:hover {
             color: $primary-color;

source/css/layout/article-content.styl

@@ -11,7 +11,7 @@
     }
 
     a {
-      color: var(--second-text-color);;
+      color: var(--second-text-color);
     }
 
   }

source/css/layout/common/basic.styl

@@ -4,13 +4,14 @@
 html, body {
   margin: 0;
   padding: 0;
-  color: var(--normal-text-color);;
+  color: var(--normal-text-color);
-  background: var(--background-color);;
+  background: var(--background-color);
   font-size: $default-font-size;
   font-family: $default-font-family;
   font-weight: $default-font-weight;
   line-height: $default-font-line-height;
   -webkit-font-smoothing antialiased;
+  transition: all 0.5s ease;
 }
 
 ul, li, ol {
@@ -33,7 +34,7 @@ p {
 
 a {
   text-decoration: none;
-  color: var(--normal-text-color);;
+  color: var(--normal-text-color);
 }
 
 a:hover, a:active {
@@ -64,7 +65,7 @@ a:hover, a:active {
 .article-title-hover-animation {
   display: inline-block;
   position: relative;
-  color: var(--second-text-color);;
+  color: var(--second-text-color);
   border-bottom: none;
   line-height: 1.3;
   vertical-align: top;
@@ -76,7 +77,7 @@ a:hover, a:active {
     height: 2px;
     bottom: -4px;
     left: 0;
-    background-color: var(--second-text-color);;
+    background-color: var(--second-text-color);
     visibility: hidden;
     transform: scaleX(0);
     the-transition();
@@ -86,6 +87,7 @@ a:hover, a:active {
     visibility: visible;
     transform: scaleX(1);
   }
+
 }
 
 

source/css/layout/common/markdown.styl

@@ -3,7 +3,7 @@
 .markdown {
 
   blockquote {
-    border-left: 5px solid var(--normal-text-color);;
+    border-left: 5px solid var(--normal-text-color);
     margin: 0;
     padding: 0 0 0 10px;
     background: $border-color;
@@ -21,39 +21,39 @@
 
 
   h1 {
-    color: var(--second-text-color);;
+    color: var(--second-text-color);
     font-size: 2.2em;
     font-weight: 700;
   }
 
 
   h2 {
-    color: var(--second-text-color);;
+    color: var(--second-text-color);
     font-size: 2em;
     font-weight: 650;
   }
 
   h3 {
-    color: var(--second-text-color);;
+    color: var(--second-text-color);
     font-size: 1.8em;
     font-weight: 600;
   }
 
 
   h4 {
-    color: var(--second-text-color);;
+    color: var(--second-text-color);
     font-size: 1.6em;
     font-weight: 550;
   }
 
   h5 {
-    color: var(--second-text-color);;
+    color: var(--second-text-color);
     font-size: 1.4em;
     font-weight: 500;
   }
 
   h6 {
-    color: var(--second-text-color);;
+    color: var(--second-text-color);
     font-size: 1.2em;
     font-weight: 500;
   }

source/css/layout/common/variables.styl

@@ -31,6 +31,15 @@ $third-text-color = #9ca3ad; // 第三文本颜色
 $normal-text-color = #616161; // 通用文本颜色（默认字体颜色）
 $border-color = #ccc; // 边框颜色
 
+// dark mode color
+$dark-background-color = #333; // 背景颜色
+$dark-primary-color = #ce3e29; // 主题颜色
+$dark-first-text-color = #eee; // 第一文本颜色
+$dark-second-text-color = #ccc; // 第二文本颜色
+$dark-third-text-color = #aaa; // 第三文本颜色
+$dark-normal-text-color = #bbb; // 通用文本颜色（默认字体颜色）
+$dark-border-color = #888; // 边框颜色
+
 
 // ===============================
 // font
@@ -45,28 +54,44 @@ $default-font-weight = 400;
 
 
 :root {
-  --background-color: #fff;
+  --background-color: $background-color;
-  --first-text-color: #3e3d4f;
+  --primary-color: $primary-color;
-  --second-text-color: #525e6b;
+  --first-text-color: $first-text-color;
-  --third-text-color: #9ca3ad;
+  --second-text-color: $second-text-color;
-  --normal-text-color: #616161;
+  --third-text-color: $third-text-color;
+  --normal-text-color: $normal-text-color;
+  --border-color: $border-color;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background-color: #444;
+    --background-color: $dark-background-color;
-    --first-text-color: #edf2f9;
+    --primary-color: $dark-primary-color;
-    --second-text-color: #e0e3ec;
+    --first-text-color: $dark-first-text-color;
-    --third-text-color: #9ca3ad;
+    --second-text-color: $dark-second-text-color;
-    --normal-text-color: #f8f8f8;
+    --third-text-color: $dark-third-text-color;
+    --normal-text-color: $dark-normal-text-color;
+    --dark-border-color: $dark-border-color;
   }
 }
 
 
 .dark-mode {
-  --background-color: #444;
+  --background-color: $dark-background-color;
-  --first-text-color: #edf2f9;
+  --primary-color: $dark-primary-color;
-  --second-text-color: #e0e3ec;
+  --first-text-color: $dark-first-text-color;
-  --third-text-color: #9ca3ad;
+  --second-text-color: $dark-second-text-color;
-  --normal-text-color: #f8f8f8;
+  --third-text-color: $dark-third-text-color;
+  --normal-text-color: $dark-normal-text-color;
+  --dark-border-color: $dark-border-color;
+}
+
+.light-mode {
+  --background-color: $background-color;
+  --primary-color: $primary-color;
+  --first-text-color: $first-text-color;
+  --second-text-color: $second-text-color;
+  --third-text-color: $third-text-color;
+  --normal-text-color: $normal-text-color;
+  --border-color: $border-color;
 }

source/css/layout/home-content.styl

@@ -25,12 +25,12 @@
         }
 
         font-weight: 600;
-        color: var(--second-text-color);;
+        color: var(--second-text-color);
         font-size: 22px;
         margin: 0;
 
         a {
-          color: var(--second-text-color);;
+          color: var(--second-text-color);
         }
       }
 

source/css/layout/page.styl

@@ -30,7 +30,7 @@
 
     .sidebar-tools {
       position: fixed;
-      top: $header-height + 30px;
+      top: $header-height + 50px;
       right: 5%;
       transition: all 0.5s ease;
     }

source/js/common.js

@@ -31,17 +31,4 @@ windowMask.addEventListener('click', function (e) {
 
 const searchBtn = document.querySelector('.search-btn');
 searchBtn.addEventListener('click', function (e) {
-
-});
-
-const modeToggleBtn = document.querySelector('.mode-toggle-btn');
-modeToggleBtn.addEventListener('click', function (e) {
-    if (
-        window.matchMedia &&
-        window.matchMedia('(prefers-color-scheme: dark)').matches
-    ) {
-        console.log('dark mode');
-    } else {
-        document.body.classList.toggle('dark-mode');
-    }
 });

source/js/toggle-mode.js

@@ -0,0 +1,57 @@
+/**
+ * 日间/夜间 模式切换
+ */
+const modeToggleBtn = document.querySelector('.mode-toggle-btn');
+const iconDom = modeToggleBtn.querySelector('i');
+const modeConfig = JSON.parse(localStorage.getItem('ils_x'));
+if (modeConfig) {
+
+    if (modeConfig.prefersColorScheme === 'dark') {
+
+        if (modeConfig.isDark) {
+            document.body.classList.remove('light-mode');
+            iconDom.className = 'fa fa-lightbulb-o';
+        } else {
+            iconDom.className = 'fa fa-moon-o';
+            document.body.classList.add('light-mode');
+        }
+
+    } else {
+
+        if (modeConfig.isDark) {
+            document.body.classList.remove('dark-mode');
+            iconDom.className = 'fa fa-moon-o';
+        } else {
+            document.body.classList.add('dark-mode');
+            iconDom.className = 'fa fa-lightbulb-o';
+        }
+
+    }
+
+}
+
+const setItemUtil = (modeClass, prefersColorScheme) => {
+    document.body.classList.toggle(modeClass);
+    const isDark = document.body.className.indexOf(modeClass) === -1;
+    iconDom.className = isDark ? 'fa fa-moon-o' : 'fa fa-lightbulb-o';
+    localStorage.setItem('ils_x', JSON.stringify(
+        {
+            prefersColorScheme: prefersColorScheme,
+            isDark: isDark
+        }
+    ));
+
+
+};
+
+modeToggleBtn.addEventListener('click', function (e) {
+
+    if (
+        window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+    ) {
+        setItemUtil('light-mode', 'dark');
+    } else {
+        setItemUtil('dark-mode', 'light');
+    }
+
+});