feat: add dark mode(part.5)

Author: reco_luan

components/AlgoliaSearchBox.vue

@@ -4,6 +4,7 @@
     class="algolia-search-wrapper search-box"
     role="search"
   >
+    <i class="iconfont reco-search"></i>
     <input
       id="algolia-search-input"
       class="search-query"
@@ -77,7 +78,7 @@ export default {
   .algolia-autocomplete
     line-height normal
     .ds-dropdown-menu
-      background-color #fff
+      background-color var(--background-color)
       border-radius $borderRadius
       font-size 15px
       margin 6px 0 0
@@ -87,16 +88,17 @@ export default {
       &:before
         display none
       [class*=ds-dataset-]
+        background-color var(--background-color)
         border none
         padding 0
       .ds-suggestions
         margin-top 0
       .ds-suggestion
-        border-bottom 1px solid $borderColor
+        border-bottom 1px solid var(--border-color)
     .algolia-docsearch-suggestion--highlight
-      color #2c815b
+      color $accentColor
     .algolia-docsearch-suggestion
-      border-color $borderColor
+      border-color var(--border-color)
       padding 0
       .algolia-docsearch-suggestion--category-header
         padding 5px 10px
@@ -107,22 +109,24 @@ export default {
         .algolia-docsearch-suggestion--highlight
           background rgba(255, 255, 255, 0.6)
       .algolia-docsearch-suggestion--wrapper
+        background var(--background-color)
         padding 0
       .algolia-docsearch-suggestion--title
         font-weight 600
         margin-bottom 0
-        color $textColor
+        color var(--text-color)
       .algolia-docsearch-suggestion--subcategory-column
         vertical-align top
         padding 5px 7px 5px 5px
-        border-color $borderColor
-        background #f1f3f5
+        border-color var(--border-color)
+        background var(--background-color)
         &:after
           display none
       .algolia-docsearch-suggestion--subcategory-column-text
-        color #555
+        color var(--text-color)
     .algolia-docsearch-footer
-      border-color $borderColor
+      border-color var(--border-color)
+      background var(--background-color)
     .ds-cursor .algolia-docsearch-suggestion--content
       background-color #e7edf3 !important
       color $textColor
@@ -153,7 +157,7 @@ export default {
       padding 5px 7px 5px 5px !important
     .algolia-docsearch-suggestion--subcategory-column
       padding 0 !important
-      background white !important
+      background var(--border-color) !important
     .algolia-docsearch-suggestion--subcategory-column-text:after
       content " > "
       font-size 10px

components/Common.vue

@@ -255,7 +255,6 @@ export default {
     left 0
     right 0
     margin auto
-    background #fff
   .password-wrapper-out
     position absolute
     z-index 21
@@ -264,7 +263,6 @@ export default {
     left 0
     right 0
     margin auto
-    background #fff
   .password-wrapper-in
     position absolute
     z-index 8
@@ -273,7 +271,6 @@ export default {
     left 0
     right 0
     margin auto
-    background #fff
   .hide
     height 100vh
     overflow hidden

components/DropdownLink.vue

@@ -98,7 +98,7 @@ export default {
       line-height 1.7rem
       h4
         margin 0.45rem 0 0
-        border-top 1px solid #eee
+        border-top 1px solid var(--border-color)
         padding 0.45rem 1.5rem 0 1.25rem
       .dropdown-subitem-wrapper
         padding 0

components/Mode/modeOptions.js

@@ -5,15 +5,17 @@ const modeOptions = {
     '--box-shadow-hover': '0 2px 16px 0 rgba(0, 0, 0, 0.2)',
     '--text-color': '#2c3e50',
     '--border-color': '#eaecef',
-    '--bgm-bg-color': 'rgba(255, 255, 255, .7)'
+    '--bgm-bg-color': 'rgba(255, 255, 255, .7)',
+    '--code-color': 'rgba(27, 31, 35, 0.05)'
   },
   dark: {
     '--background-color': '#25272a',
     '--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, .3)',
-    '--bgm-bg-color': 'rgba(0, 0, 0, .7)'
+    '--bgm-bg-color': 'rgba(0, 0, 0, .7)',
+    '--code-color': 'rgba(0, 0, 0, .3)'
   }
 }
 

components/Navbar.vue

@@ -23,7 +23,6 @@
       } : {}">
 
       <Mode />
-      <Screenfull class="screenfull" />
       <AlgoliaSearchBox
         v-if="isAlgoliaSearch"
         :options="algolia"/>
@@ -117,9 +116,6 @@ $navbar-horizontal-padding = 1.5rem
     .search-box
       flex: 0 0 auto
       vertical-align top
-    .screenfull
-      margin-top .4rem
-      height 1.6rem
       margin-right 1rem
 
 @media (max-width: $MQMobile)

components/Page.vue

@@ -260,7 +260,7 @@ function flatten (items, res) {
   .inner
     min-height 2rem
     margin-top 0
-    border-top 1px solid $borderColor
+    border-top 1px solid var(--border-color)
     padding-top 1rem
     overflow auto // clear float
   .next

components/Password.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="password-shadow" :class="{'is-home': !isPage}">
-    <h3 class="title">{{isPage ? $frontmatter.title : $site.title}}</h3>
-    <p class="description" v-if="!isPage">{{$site.description}}</p>
+    <h3 class="title">{{isPage ? $frontmatter.title : $site.title || $localeConfig.title}}</h3>
+    <p class="description" v-if="!isPage">{{$site.description || $localeConfig.description}}</p>
     <label class="inputBox" id="box">
       <input
         v-model="key"
@@ -109,51 +109,47 @@ export default {
 }
 
 .password-shadow {
+  position relative
   width 100vw;
   height 100vh;
+  overflow hidden
   position relative
   padding-left: 20rem;
-  // background-image: radial-gradient(ellipse farthest-corner at center top,#497EC6 0,#000105 100%);
+  background #fff
+  background var(--background-color)
+  box-sizing border-box
   .title {
-    position: absolute;
-    left 0
-    right 0
-    top 12%
-    margin auto
+    margin 8rem auto 6rem
+    width 100%
     text-align center
-    color $textColor
     font-size 30px
     box-sizing: border-box;
-    padding: 0 10px;
+    // padding: 0 10px;
     text-shadow $textShadow
+    color $textColor
+    color var(--text-color)
   }
   .description {
-    position: absolute;
-    left 0
-    right 0
-    top 20%
     margin auto
     text-align center
     color $textColor
+    color var(--text-color)
     font-size 22px
     box-sizing: border-box;
     padding: 0 10px;
     text-shadow $textShadow
   }
   .inputBox{
+    position relative
+    display block
     max-width:700px;
     height: 100px;
     background: $accentColor;
     border-radius: $borderRadius
-    position: absolute;
-    left 0
-    right 0
-    top 36%
-    margin auto
+    margin 2rem auto 0
     padding-left 20px
     box-sizing border-box
     opacity 0.9
-    overflow hidden
     input{
       width:600px;
       height:100%;
@@ -202,11 +198,11 @@ export default {
       border-radius: $borderRadius
       position: absolute;
       border 1px solid $accentColor
+      background var(--background-color)
       right:1px;
       top 1px
       border:0;
       padding:0;
-      background: #fff;
       color: $accentColor;
       font-size:18px;
       outline:none;
@@ -221,7 +217,6 @@ export default {
     left 0
     right 0
     bottom 10%
-    margin auto
     padding: 2.5rem;
     text-align: center;
     color: lighten($textColor, 25%);
@@ -242,8 +237,8 @@ export default {
       left 0
       right 0
       top 43%
-      margin auto
-      padding-left 16.4rem
+      margin auto 20px
+      padding-left 0
       box-sizing border-box
       opacity 0.9
       input{
@@ -307,11 +302,18 @@ export default {
         z-index: 1;
       }
     }
+    .footer {
+      margin-left 0
+      
+    }
   }
   @media (max-width: $MQNarrow) {
-    .inputBox{
-      padding-left $mobileSidebarWidth
-    }
+    // .inputBox{
+    //   padding-left $mobileSidebarWidth
+    // }
+    .footer {
+        margin-left 0
+      }
   }
 }
 

components/SearchBox.vue

@@ -174,7 +174,7 @@ export default {
     height: 2rem
     color lighten($textColor, 25%)
     display inline-block
-    border 1px solid $accentColor
+    border 1px solid var(--border-color)
     border-radius $borderRadius
     font-size 0.9rem
     line-height 2rem

index.js

@@ -23,7 +23,6 @@ module.exports = (options, ctx) => ({
     '@vuepress-reco/extract-code',
     '@vuepress-reco/loading-page',
     '@vuepress-reco/pagation',
-    '@vuepress-reco/screenfull',
     '@vuepress-reco/comments',
     '@vuepress/active-header-links',
     ['@vuepress/medium-zoom', {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuepress-theme-reco",
-  "version": "1.1.2",
+  "version": "1.2.0-alpha.2",
   "description": "A simple and beautiful vuepress Blog & Doc theme.",
   "main": "index.js",
   "scripts": {
@@ -29,7 +29,7 @@
   "dependencies": {
     "@vuepress-reco/vuepress-plugin-back-to-top": "^1.0.5",
     "@vuepress-reco/vuepress-plugin-extract-code": "^1.0.3",
-    "@vuepress-reco/vuepress-plugin-loading-page": "^1.0.0",
+    "@vuepress-reco/vuepress-plugin-loading-page": "^1.0.2",
     "@vuepress-reco/vuepress-plugin-pagation": "^1.0.4",
     "@vuepress-reco/vuepress-plugin-screenfull": "^1.0.1",
     "@vuepress-reco/vuepress-plugin-ga": "^1.0.2",