完善阅读模式

docs/.vuepress/config.js

@@ -67,7 +67,7 @@ module.exports = {
     footer:{ // 页脚信息
       createYear: 2019, // 博客创建年份
       copyrightInfo: 'Evan Xu', // 博客版权信息，支持html标签
-      footerBgImg: '/img/footer.png' // 可选的，页脚背景图，只在首页显示
+      // footerBgImg: '/img/footer.png' // 可选的，页脚背景图，只在首页显示
     }
   },
   plugins: [ // 插件

docs/.vuepress/styles/index.styl

@@ -62,23 +62,25 @@ table
 .sidebar
   z-index 11
   background rgba(220,220,220,.1)
-  @media (max-width: $MQNarrow)
-    background #fbfbfb
 .sidebar-mask // 侧边栏蒙版
   background rgba(0,0,0,.2)
 
 // 评论区颜色重置
 .gt-container
+  .gt-header-textarea
+    background rgba(180,180,180,0.1)!important
   .gt-btn
     border-color $accentColor!important
     background-color $accentColor!important
   .gt-btn-preview
-    background-color #fff!important
+    background-color rgba(255,255,255,0)!important
     color $accentColor!important
   a
     color $accentColor!important
   .gt-svg svg
     fill $accentColor!important
+.read-mode .gt-container .gt-comment-admin .gt-comment-content
+  background-color lighten($readModeColor, 50%)!important
 
 // qq徽章
 .qq

docs/.vuepress/styles/palette.styl

@@ -23,7 +23,10 @@ $textColor = #004050
 $borderColor = rgba(80,80,80,.1)
 $badgeTipColor = #11A8CD
 
-$readModeColor = #f5f5d5
+// 阅读模式
+$readModeColor = #f5f5d5 // 杏仁黄
+// $readModeColor = #c7edcc // 绿豆色
+// $readModeColor = #FFF2E2 // 秋叶褐
 
 
 // 布局

docs/.vuepress/theme/components/Buttons.vue

@@ -136,7 +136,7 @@ export default {
       margin-top .9rem
       text-align center
       cursor pointer
-      background rgba(255,255,255,0.8)
+      background rgba(255,255,255,0.6)
       // color #666
       &:hover
         color $accentColor

docs/.vuepress/theme/layouts/Layout.vue

@@ -59,6 +59,7 @@ import Page from '@theme/components/Page.vue'
 import Sidebar from '@theme/components/Sidebar.vue'
 import Buttons from '@theme/components/Buttons.vue'
 import { resolveSidebarItems } from '../util'
+import storage from 'good-storage' // 本地存储
 
 const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
 
@@ -72,7 +73,6 @@ export default {
       readMode: false
     }
   },
-
   computed: {
     showRightMenu() {
       const { headers } = this.$page
@@ -134,6 +134,9 @@ export default {
   },
   beforeMount() {
     this.isSidebarOpenOfclientWidth()
+    if(storage.get('mode')) {
+      this.readMode = true
+    } 
   },
   mounted () {
     this.showSidebar = true // 解决移动端初始化页面时侧边栏闪现的问题
@@ -154,6 +157,7 @@ export default {
     },
     toggleReadMode (){
       this.readMode = !this.readMode
+      storage.set('mode', this.readMode)
       if (document.documentElement.clientWidth > MOBILE_DESKTOP_BREAKPOINT) {
         this.isSidebarOpen = !this.readMode
       }
@@ -182,22 +186,31 @@ export default {
 </script>
 
 <style lang="stylus">
+  // 阅读模式样式
   .read-mode
     background $readModeColor
-    .i-body
+    .i-body // 首页
       background-color $readModeColor
       .main-wrapper >*
         background-color lighten($readModeColor, 50%)!important
-    .navbar
+    .sidebar // 侧边栏
+      @media (max-width: $MQNarrow)
+        background-color lighten($readModeColor, 30%)!important
+    .navbar // 导航栏
       background $readModeColor
       .dropdown-wrapper .nav-dropdown
         background lighten($readModeColor, 50%)
-    .suggestions
+    .suggestions // 搜索结果
       background lighten($readModeColor, 50%)
-    .read-mode
-      background lighten($accentColor, 30%)
+    .read-mode // 阅读模式按钮
+      background lighten($accentColor, 35%)
       color #fff
       &:hover
         color #fff
-    
+    tr // 表格
+      &:nth-child(2n)
+        background-color lighten($readModeColor, 50%)
+    // 时间轴页面
+    .timeline-wrapper .timeline ul .desc:before, .timeline-wrapper .timeline ul .year:before,.timeline-wrapper .timeline ul .year-wrapper a .date:before
+      background-color $readModeColor!important
 </style>

package.json

@@ -26,6 +26,7 @@
   "dependencies": {
     "@better-scroll/core": "^2.0.0-beta.4",
     "@better-scroll/slide": "^2.0.0-beta.4",
+    "good-storage": "^1.1.1",
     "vuepress-plugin-comment": "^0.7.2"
   }
 }