feat: add dark mode(part.4)

Author: reco_luan

components/Mode/modeOptions.js

@@ -12,7 +12,7 @@ const modeOptions = {
     '--box-shadow': '0 1px 6px 0 rgba(0, 0, 0, .9)',
     '--box-shadow-hover': '0 2px 26px 0 rgba(0, 0, 0, .9)',
     '--text-color': '#aaa',
-    '--border-color': 'rgba(0, 0, 0, .9)',
+    '--border-color': 'rgba(0, 0, 0, .3)',
     '--bgm-bg-color': 'rgba(0, 0, 0, .7)'
   }
 }

components/SearchBox.vue

@@ -165,6 +165,7 @@ export default {
     position absolute
     top 0
     bottom 0
+    z-index 0
     left .6rem
     margin auto
   input
@@ -173,20 +174,20 @@ export default {
     height: 2rem
     color lighten($textColor, 25%)
     display inline-block
-    border 1px solid darken($borderColor, 10%)
-    border-radius 2rem
+    border 1px solid $accentColor
+    border-radius $borderRadius
     font-size 0.9rem
     line-height 2rem
     padding 0 0.5rem 0 2rem
     outline none
     transition all .2s ease
-    background #fff
+    background transparent
     background-size 1rem
     &:focus
       cursor auto
       border-color $accentColor
   .suggestions
-    background #fff
+    background var(--background-color)
     width 20rem
     position absolute
     top 1.5rem
@@ -203,14 +204,14 @@ export default {
     cursor pointer
     a
       white-space normal
-      color lighten($textColor, 35%)
+      color var(--text-color)
       .page-title
         font-weight 600
       .header
         font-size 0.9em
         margin-left 0.25em
     &.focused
-      background-color #f3f4f5
+      background-color var(--border-color)
       a
         color $accentColor
 @media (max-width: $MQNarrow)
@@ -235,8 +236,6 @@ export default {
 @media (max-width: $MQMobile)
   .search-box
     margin-right 0
-    input
-      left 1rem
     .suggestions
       right 0
 @media (max-width: $MQMobileNarrow)

layouts/Category.vue

@@ -11,7 +11,7 @@
           :key="index">
           <router-link :to="item.path">
             <span class="category-name">{{ item.name }}</span>
-            <span class="post-num">{{ item.pages.length }}</span>
+            <span class="post-num" :style="{ 'backgroundColor': _tagColor() }">{{ item.pages.length }}</span>
           </router-link>
         </li>
       </ul>
@@ -146,8 +146,8 @@ export default {
           text-align center
           line-height 1.2rem
           border-radius $borderRadius
-          background #eee
           font-size .7rem
+          color #fff
         }
       }
     }

styles/colorMixin.styl

@@ -7,14 +7,14 @@ $backgroundColorDark ?= #25272a
 
 $boxShadow = 0 1px 6px 0 rgba(0, 0, 0, 0.2)
 $boxShadowHover = 0 2px 16px 0 rgba(0, 0, 0, 0.2)
-$boxShadowDark = 0 1px 6px 0 rgba(0, 0, 0, .9)
-$boxShadowHoverDark = 0 2px 26px 0 rgba(0, 0, 0, .9)
+$boxShadowDark = 0 1px 6px 0 rgba(0, 0, 0, .6)
+$boxShadowHoverDark = 0 2px 16px 0 rgba(0, 0, 0, .6)
 
 $textColor ?= #2c3e50
 $textColorDark ?= #aaa
 
 $borderColor ?= #eaecef
-$borderColorDark ?= rgba(0, 0, 0, .9)
+$borderColorDark ?= rgba(0, 0, 0, .3)
 
 $bgmBgColor ?= rgba(255, 255, 255, .7)
 $bgmBgColorDark ?= rgba(0, 0, 0, .7)

styles/palette.styl

@@ -4,7 +4,6 @@
 @require './arrow'
 @require './wrapper'
 @require './toc'
-@require './colorMixin'
 @require './iconfont.css'
 
 html, body
@@ -297,13 +296,6 @@ th, td
   background-color: var(--background-color)!important
   box-shadow: var(--box-shadow)!important
 
-/************** 搜索框 **************/
-
-.search-box input
-  border-radius: $borderRadius
-  background: var(--background-color) url(/assets/img/search.svg) 0.6rem 0.6rem no-repeat
-  border-color: var(--border-color)
-
 /********* 悬浮卡片背景颜色 **********/
 
 .navbar