夜间模式

themes/yilia/_config.yml

@@ -98,13 +98,6 @@ valine:
   appId: 40jq6uO51rpVT4PEEcayYkda-gzGzoHsz
   appKey: nBOoOEDP4EBUfgpSJAF6idKi
 
-# 样式定制 - 一般不需要修改，除非有很强的定制欲望…
-style:
-  # 头像上面的背景颜色
-  header: '#4d4d4d'
-  # 右滑板块背景
-  slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'
-
 # 智能菜单
 # 如不需要，将该对应项置为false
 # 比如

themes/yilia/layout/_partial/aside.ejs

@@ -5,7 +5,7 @@
             <a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
                 <i class="icon-font icon-back"></i>
             </a>
-            <div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
+            <div id="js-jump-plan-container" class="jump-plan-container">
                 <i class="icon-font icon-plane jump-plane"></i>
             </div>
         </div>

themes/yilia/layout/_partial/head.ejs

@@ -30,11 +30,6 @@
     <link rel="icon" href="<%- theme.favicon %>">
   <% } %>
   <%- partial('css') %>
-  <style type="text/css">
-  #container.show {
-    background: <%= theme.style && theme.style.slider ? theme.style.slider : 'linear-gradient(200deg,#a0cfe4,#e8c37e)' %>;
-  }
-  </style>
   <%- partial('google-analytics') %>
   <%- partial('baidu-analytics') %>
 </head>

themes/yilia/layout/_partial/left-col.ejs

@@ -1,5 +1,5 @@
 <% var defaultBg = '#4d4d4d'; %>
-<div class="overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>"></div>
+<div class="overlay" ></div>
 <div class="intrude-less">
 	<header id="header" class="inner">
 		<a href="<%=config.root%>" @mouseover="linkMouseover('home')" class="profilepic">

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-width: 1px;
-  border-top: 1px solid #fff;
+  border-style: solid;
-  border-bottom: 1px solid #fff;
+  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"() {
     // 一言