夜间模式

themes/yilia/source-src/css/article-inner.scss

@@ -81,8 +81,6 @@
     font-size: 14px;
   }
   blockquote {
-    background: #ddd;
-    border-left: 5px solid #ccc;
     padding: 15px 20px;
     margin-top: 10px;
     border-left: 5px solid #657b83;

themes/yilia/source-src/css/article-main.scss

@@ -57,9 +57,9 @@
 .article {
   margin: 30px;
   position: relative;
-  border: 1px solid #ddd;
-  border-top: 1px solid #fff;
-  border-bottom: 1px solid #fff;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #fff #ddd;
   background: $colorBg;
   transition: all 0.2s ease-in;
   img{

themes/yilia/source-src/css/grid.scss

@@ -24,6 +24,7 @@ html, body, #container {
 		display: none;
 	}
 	&.show {
+		background: linear-gradient(200deg,#a0cfe4,#e8c37e);
 		.anm-canvas {
 			display: block;
 			position: fixed;

themes/yilia/source-src/css/left.scss

@@ -13,6 +13,7 @@
 		width: 100%;
 		height: 150px;
 		position: absolute;
+		background: #4d4d4d;
 	}
 
 	.intrude-less {

themes/yilia/source-src/css/main.scss

@@ -18,6 +18,7 @@
 @import "./tooltip";
 @import "./footer";
 @import "./waifu";
+@import "./night";
 @media screen and (max-width: 800px) {
   @import "./mobile";
   @import "./mobile-slider";

themes/yilia/source-src/css/mobile.scss

@@ -145,7 +145,6 @@ html, body, #container {
   margin: 10px 0;
   border: 0;
   font-size: 16px;
-  color: #555;
   .article-more-link {
     margin: 0;
   }

themes/yilia/source-src/css/night.scss

@@ -0,0 +1,54 @@
+/*
+* 夜间模式配色
+*/
+$mainBg_night: #1f2e3c; // 主背景色
+$articleBg_night: #15202b; // 文章背景色
+$textColor_night: #d5d5d5; // 文字颜色
+
+body.night {
+  background: $mainBg_night;
+  // 展开菜单之后的背景
+  #container.show {
+    background: none;
+  }
+  // 主背景
+  .mid-col {
+    background: $mainBg_night;
+  }
+  // 文章区域
+  .article{
+    background: $articleBg_night;
+    border-color: rgb(56, 68, 77);
+    color: $textColor_night;
+    .article-title { // 主标题
+      color: $colorF;
+    }
+    .article-entry blockquote{ // 引用
+      background: #2c2c2c;
+    }
+    h1,h2,h3,h4,h5,h6 { // 章节标题
+      color: #b8a7a7;
+    }
+  }
+  // 左侧栏
+  .left-col {
+    background: $articleBg_night;
+    .overlay {
+      background: none;
+    }
+    .profilepic { // 头像
+      filter: brightness(30%);
+    }
+  }
+  // 看板娘
+  .waifu {
+    filter: brightness(30%);
+  }
+  // 评论
+  #comments {
+    background: none;
+  }
+  #footer {
+    color: $textColor_night;
+  }
+}

themes/yilia/source-src/js/slider.js

@@ -109,8 +109,15 @@ new Vue({
     })
     this.showMessage(welcomeMessage(), 6000)
     document.addEventListener('copy', () => {
-      this.showMessage('你都复制了些什么呀，转载要记得加上出处哦');
+      this.showMessage('你都复制了些什么呀，转载要记得加上出处哦')
     })
+  },
+  created() {
+    // 夜间模式
+    let night = localStorage.getItem('night')
+    try {
+      if(night && eval(night)) document.querySelector('body').classList.add('night')
+    } catch (e){}
   }
 })
 
@@ -171,16 +178,20 @@ function welcomeMessage() {
 
 const waifuTools = {
   "tools.photo"() {
+    // 生成canvas快照
     window.Live2D.captureName = 'Kesshouban.png'
     window.Live2D.captureFrame = true
   },
   "tools.close"() {
+    // 隐藏看板娘
     setTimeout(function() {
-      document.querySelector('.waifu').style.display = 'none';
+      document.querySelector('.waifu').style.display = 'none'
     }, 1300);
   },
   "tools.eye"() {
-    //TODO  切换到夜间模式
+    // 切换到夜间模式
+    let night = document.querySelector('body').classList.toggle('night')
+    localStorage.setItem('night', night)
   },
   "tools.chart"() {
     // 一言