feat: add dark mode(part.10)

Style adjustment

Author: reco_luan

components/HomeBlog.vue

@@ -243,6 +243,7 @@ export default {
       border-radius $borderRadius
       box-sizing border-box
       padding 0 15px
+      background var(--background-color)
       &:hover {
         box-shadow: var(--box-shadow-hover);
       }
@@ -291,6 +292,7 @@ export default {
           transition: all .5s
           border-radius $borderRadius
           box-shadow var(--box-shadow)
+          background-color var(--background-color)
           &:hover {
             transform scale(1.04)
           }

components/Navbar.vue

@@ -92,6 +92,7 @@ $navbar-horizontal-padding = 1.5rem
   padding $navbar-vertical-padding $navbar-horizontal-padding
   line-height $navbarHeight - 1.4rem
   box-shadow var(--box-shadow)
+  background var(--background-color)
   a, span, img
     display inline-block
   .logo
@@ -104,6 +105,7 @@ $navbar-horizontal-padding = 1.5rem
     font-weight 600
     color var(--text-color)
     position relative
+    background var(--background-color)
   .links
     padding-left 1.5rem
     box-sizing border-box

layouts/404.vue

@@ -42,11 +42,28 @@ export default {
 
 <style src="../styles/theme.styl" lang="stylus"></style>
 
-<style lang="stylus" scoped>
-.content {
+<style lang="stylus">
+.content
   margin 4rem auto 0
   max-width 800px
   padding 0 2rem
-}
+.mod_404
+  .desc
+    .desc_link
+      display: inline-block
+      // margin: 20px 0
+      background: #424242!important
+      color: #ffffff
+      padding: 6px 20px!important
+      text-decoration: none!important
+      border-radius: 4px
+
+@media screen and (max-width: 720px)
+  .mod_404 
+    .desc
+      margin: 50px 0
+    .wrapper
+      margin 0!important
+      padding-top 20px
 </style>
 

layouts/Category.vue

@@ -125,6 +125,7 @@ export default {
       font-size: 13px;
       box-shadow var(--box-shadow)
       transition: all .5s
+      background-color var(--background-color)
       &:hover, &.active {
         background $accentColor
         a span.category-name {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuepress-theme-reco",
-  "version": "1.2.0-alpha.5",
+  "version": "1.2.0-alpha.6",
   "description": "A simple and beautiful vuepress Blog & Doc theme.",
   "main": "index.js",
   "scripts": {
@@ -27,12 +27,11 @@
   "_from": "vuepress-theme-reco@0.2.1",
   "_resolved": "http://registry.npm.taobao.org/vuepress-theme-reco/download/vuepress-theme-reco-0.2.1.tgz",
   "dependencies": {
-    "@vuepress-reco/vuepress-plugin-back-to-top": "^1.0.5",
+    "@vuepress-reco/vuepress-plugin-back-to-top": "^1.0.6",
     "@vuepress-reco/vuepress-plugin-extract-code": "^1.0.3",
-    "@vuepress-reco/vuepress-plugin-loading-page": "^1.0.4",
-    "@vuepress-reco/vuepress-plugin-pagation": "^1.0.4",
-    "@vuepress-reco/vuepress-plugin-screenfull": "^1.0.1",
-    "@vuepress-reco/vuepress-plugin-comments": "^1.0.8",
+    "@vuepress-reco/vuepress-plugin-loading-page": "^1.0.5",
+    "@vuepress-reco/vuepress-plugin-pagation": "^1.0.6",
+    "@vuepress-reco/vuepress-plugin-comments": "^1.0.10",
     "@vuepress/plugin-medium-zoom": "1.2.0",
     "@vuepress/plugin-blog": "1.3.0",
     "docsearch.js": "^2.5.2",

styles/theme.styl

@@ -212,128 +212,3 @@ th, td
 /************** 流程图的滚动条 **************/
 .vuepress-flowchart
   overflow: auto
-
-/************** 腾讯 404 公益 **************/
-
-.mod_404 .desc {
-  .desc_link {
-    display: inline-block
-    // margin: 20px 0
-    background: #424242!important
-    color: #ffffff
-    padding: 6px 20px!important
-    text-decoration: none!important
-    border-radius: 4px
-  }
-}
-
-@media screen and (max-width: 720px) {
-  .mod_404 .desc {
-    margin: 50px 0
-  }
-}
-
-/************** 评论功能 **************/
-
-.comments-wrapper
-  .valine-wrapper
-    #valine.v
-      .vbtn
-        color: var(--text-color)
-        border: 1px solid var(--border-color)
-        &:hover
-          color: $accentColor
-          border-color: $accentColor
-      .vwrap
-        background: var(--code-color)
-        border: 1px dashed var(--border-color)
-        .vcontrol
-          .vsubmit
-            background: var(--code-color)
-        .vheader .vinput
-          border-bottom: 1px dashed var(--border-color)
-      .vinfo
-        padding-left: .6rem
-      .vlist
-        padding: 0 .6rem
-        border-radius: $borderRadius
-        .vcard
-          .vquote
-            margin-left: 0
-            border-left: 1px dashed var(--border-color)
-          .vimg
-            width: 2.8rem;
-            height: 2.8rem;
-            border-radius: $borderRadius
-            border: none
-        .vh
-          border-bottom: 1px dashed var(--border-color)
-          .vhead
-            .vsys
-              background: var(--code-color)
-              color: var(--text-color)
-          .vmeta
-            margin-bottom: 1rem
-            .vat
-              margin-right: .3rem
-              background: var(--code-color)
-              border-radius: $borderRadius
-              padding: 0 .4rem
-              color: var(--text-color)
-              border: 1px solid var(--border-color)
-              &:hover
-                color: $accentColor
-                border-color: $accentColor
-          .vcontent
-            background: var(--code-color)
-            border-radius: $borderRadius
-            margin: 0 .3rem
-            padding: .1rem .6rem .05rem .6rem
-            p .at
-              color: #1abc9c
-            &.expand:before
-              z-index 1
-              background: linear-gradient(180deg, rgba(255,255,255,0),  var(--background-color))
-            &.expand:after
-              background: var(--background-color)
-              color: var(--color-color)
-      .info
-        padding-right: .6rem
-
-/************** 分页 **************/
-.pagation
-  .pagation-list
-    background: var(--background-color)!important
-    .jump, .jumpinp input
-      background-color: var(--background-color)
-      color: var(--text-color)
-      box-shadow: var(--box-shadow)
-      border 1px solid var(--border-color)!important
-
-/************** 回到顶部 **************/
-.back-to-ceiling
-  background-color: var(--background-color)!important
-  box-shadow: var(--box-shadow)!important
-
-/********* 悬浮卡片背景颜色 **********/
-
-.navbar
-  background var(--background-color)
-  .links
-    background var(--background-color)
-
-.home-blog
-  .home-blog-wrapper
-    .info-wrapper
-      background var(--background-color)
-
-.abstract-item
-  background var(--background-color)
-
-.category-wrapper
-  .category-item
-    background var(--background-color)
-
-.pagation
-  .jump
-    background var(--background-color)