feat($theme-default): support darkmode (close #1865)

packages/@vuepress/core/lib/client/style/config.styl

@@ -3,16 +3,26 @@
 // colors
 $accentColor ?= #3eaf7c
 $textColor ?= #2c3e50
+$nightTextColor ?= #9e9e9e
+$bgColor ?= #fff
+$nightBgColor ?= #1e1e1e
 $borderColor ?= #eaecef
-$codeBgColor ?= #282c34
+$nightBorderColor ?= #302d28
+$codeBgColor ?= #ecf4fa
+$nightCodeBgColor ?= #282c34
 $arrowBgColor ?= #ccc
+$nightArrowBgColor ?= #333
 $badgeTipColor ?= #42b983
 $badgeWarningColor ?= darken(#ffe564, 35%)
 $badgeErrorColor ?= #DA5961
-
+$boxShadowColor ?= #f0f1f2
+$nightBoxShadowColor ?= #0f0e0d
 // layout
 $navbarHeight ?= 3.6rem
+$navbar-vertical-padding ?= 0.7rem
+$navbar-horizontal-padding ?= 1.5rem
 $sidebarWidth ?= 20rem
+$mobileSidebarWidth ?= $sidebarWidth * 0.82
 $contentWidth ?= 740px
 $homePageWidth ?= 960px
 

packages/@vuepress/plugin-search/SearchBox.vue

@@ -206,10 +206,10 @@ export default {
     cursor text
     width 10rem
     height: 2rem
-    color lighten($textColor, 25%)
+    color var(--text-color, $textColor)
     display inline-block
-    border 1px solid darken($borderColor, 10%)
-    border-radius 2rem
+    border 1px solid transparent
+    border-radius 0.25em
     font-size 0.9rem
     line-height 2rem
     padding 0 0.5rem 0 2rem
@@ -219,6 +219,7 @@ export default {
     background-size 1rem
     &:focus
       cursor auto
+      background-color var(--background-color, #fff)
       border-color $accentColor
   .suggestions
     background #fff
@@ -254,6 +255,7 @@ export default {
     input
       cursor pointer
       width 0
+      left 0
       border-color transparent
       position relative
       &:focus
@@ -285,4 +287,31 @@ export default {
       width calc(100vw - 4rem)
     input:focus
       width 8rem
+
+@media (min-width: $MQNarrow)
+  .search-box input
+    background-color #efeef4
+
+// darkmode
+.theme-dark
+  .search-box
+    input
+      color var(--text-color, $textColor)
+      background-color var(--background-color, #000) !important
+      @media (min-width: $MQNarrow)
+        border-color var(--border-color, $borderColor)
+        background-color lighten($nightBgColor, 10%) !important
+      &:focus
+        background-color lighten($nightBgColor, 10%) !important
+    .suggestion
+      a
+        color darken($nightTextColor, 35%)
+      &.focused
+        background-color #0c0b0a
+        a
+          color $accentColor
+          border-color $accentColor
+    .suggestions
+      border-color var(--border-color, $borderColor)
+      background-color var(--white)
 </style>

packages/@vuepress/theme-default/components/AlgoliaSearchBox.vue

@@ -81,32 +81,35 @@ export default {
   .algolia-autocomplete
     line-height normal
     .ds-dropdown-menu
-      background-color #fff
-      border 1px solid #999
+      background-color var(--background-color)
+      border 1px solid var(--light-grey)
       border-radius 4px
       font-size 16px
       margin 6px 0 0
       padding 4px
       text-align left
       &:before
-        border-color #999
+        border-color var(--light-grey)
       [class*=ds-dataset-]
+        background 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
       padding 0
+      color var(--text-color)
+      background var(--background-color)
+      border-color var(--border-color)
       .algolia-docsearch-suggestion--category-header
         padding 5px 10px
         margin-top 0
         background $accentColor
-        color #fff
+        color var(--white)
         font-weight 600
         .algolia-docsearch-suggestion--highlight
           background rgba(255, 255, 255, 0.6)
@@ -115,21 +118,22 @@ export default {
       .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
+        color var(--text-color)
+        background var(--background-color)
+        border-color var(--border-color)
         &:after
           display none
       .algolia-docsearch-suggestion--subcategory-column-text
         color #555
     .algolia-docsearch-footer
-      border-color $borderColor
+      border-color var(--border-color)
     .ds-cursor .algolia-docsearch-suggestion--content
-      background-color #e7edf3 !important
-      color $textColor
+      background-color var(--grey3)
+      color var(--text-color)
 
 @media (min-width: $MQMobile)
   .algolia-search-wrapper
@@ -166,5 +170,4 @@ export default {
       width 5px
       margin -3px 3px 0
       vertical-align middle
-
 </style>

packages/@vuepress/theme-default/components/DropdownLink.vue

@@ -123,7 +123,10 @@ export default {
     background transparent
     border none
     font-weight 500
-    color $textColor
+    color var(--dark-grey)
+    pointer-events none
+    &::after
+      border-left 5px solid $accentColor
     &:hover
       border-color transparent
     .arrow
@@ -136,7 +139,7 @@ export default {
       line-height 1.7rem
       h4
         margin 0.45rem 0 0
-        border-top 1px solid #eee
+        border-top 1px solid var(--grey14)
         padding 0.45rem 1.5rem 0 1.25rem
       .dropdown-subitem-wrapper
         padding 0
@@ -177,10 +180,11 @@ export default {
     .dropdown-title
       font-weight 600
       font-size inherit
+      color var(--text-color)
       &:hover
         color $accentColor
     .nav-dropdown
-      transition height .1s ease-out
+      transition height 0.1s ease-out
       overflow hidden
       .dropdown-item
         h4
@@ -197,34 +201,38 @@ export default {
 @media (min-width: $MQMobile)
   .dropdown-wrapper
     height 1.8rem
-    &:hover .nav-dropdown,
-    &.open .nav-dropdown
+    &:hover .nav-dropdown, &.open .nav-dropdown
       // override the inline style.
       display block !important
     &.open:blur
       display none
-    .dropdown-title .arrow
-      // make the arrow always down at desktop
-      border-left 4px solid transparent
-      border-right 4px solid transparent
-      border-top 6px solid $arrowBgColor
-      border-bottom 0
+    .dropdown-title
+      &:hover
+        $accentColor
+      .arrow
+        // make the arrow always down at desktop
+        border-left 4px solid transparent
+        border-right 4px solid transparent
+        border-top 6px solid var(--arrow-bg-color)
+        border-bottom 0
     .nav-dropdown
       display none
       // Avoid height shaked by clicking
       height auto !important
-      box-sizing border-box;
+      box-sizing border-box
       max-height calc(100vh - 2.7rem)
       overflow-y auto
       position absolute
       top 100%
       right 0
-      background-color #fff
+      background-color var(--background-color)
       padding 0.6rem 0
-      border 1px solid #ddd
-      border-bottom-color #ccc
+      border 1px solid var(--grey14)
       text-align left
       border-radius 0.25rem
       white-space nowrap
       margin 0
+      box-shadow 2px 2px 10px var(--box-shadow-color)
+      .dropdown-item a
+        color var(--dark-grey)
 </style>

packages/@vuepress/theme-default/components/Home.vue

@@ -92,7 +92,7 @@ export default {
   .hero
     text-align center
     img
-      max-width: 100%
+      max-width 100%
       max-height 280px
       display block
       margin 3rem auto 1.5rem
@@ -104,15 +104,15 @@ export default {
       max-width 35rem
       font-size 1.6rem
       line-height 1.3
-      color lighten($textColor, 40%)
+      color var(--text-color-l40)
     .action-button
       display inline-block
       font-size 1.2rem
-      color #fff
+      color var(--white)
       background-color $accentColor
       padding 0.8rem 1.6rem
       border-radius 4px
-      transition background-color .1s ease
+      transition background-color 0.1s ease
       box-sizing border-box
       border-bottom 1px solid darken($accentColor, 10%)
       &:hover
@@ -135,14 +135,14 @@ export default {
       font-weight 500
       border-bottom none
       padding-bottom 0
-      color lighten($textColor, 10%)
+      color var(--text-color-l10)
     p
-      color lighten($textColor, 25%)
+      color var(--text-color-l25)
   .footer
     padding 2.5rem
-    border-top 1px solid $borderColor
+    border-top 1px solid var(--border-color)
     text-align center
-    color lighten($textColor, 25%)
+    color var(--text-color-l25)
 
 @media (max-width: $MQMobile)
   .home

packages/@vuepress/theme-default/components/NavLinks.vue

@@ -127,8 +127,8 @@ export default {
   display inline-block
   a
     line-height 1.4rem
-    color inherit
-    &:hover, &.router-link-active
+    color var(--dark-grey)
+    &.router-link-active
       color $accentColor
   .nav-item
     position relative
@@ -138,19 +138,22 @@ export default {
     &:first-child
       margin-left 0
   .repo-link
+    color var(--dark-grey)
     margin-left 1.5rem
 
 @media (max-width: $MQMobile)
   .nav-links
+    a
+      &:hover, &.router-link-active
+        color $accentColor
     .nav-item, .repo-link
       margin-left 0
 
 @media (min-width: $MQMobile)
-  .nav-links a
-    &:hover, &.router-link-active
-      color $textColor
-  .nav-item > a:not(.external)
+  .nav-item > a
     &:hover, &.router-link-active
       margin-bottom -2px
       border-bottom 2px solid lighten($accentColor, 8%)
+    &.router-link-active
+      color $accentColor
 </style>

packages/@vuepress/theme-default/components/Navbar.vue

@@ -93,9 +93,6 @@ function css (el, property) {
 </script>
 
 <style lang="stylus">
-$navbar-vertical-padding = 0.7rem
-$navbar-horizontal-padding = 1.5rem
-
 .navbar
   padding $navbar-vertical-padding $navbar-horizontal-padding
   line-height $navbarHeight - 1.4rem
@@ -109,20 +106,20 @@ $navbar-horizontal-padding = 1.5rem
   .site-name
     font-size 1.3rem
     font-weight 600
-    color $textColor
+    color var(--text-color)
     position relative
   .links
     padding-left 1.5rem
     box-sizing border-box
-    background-color white
+    background-color var(--background-color)
     white-space nowrap
     font-size 0.9rem
     position absolute
     right $navbar-horizontal-padding
     top $navbar-vertical-padding
     display flex
     .search-box
-      flex: 0 0 auto
+      flex 0 0 auto
       vertical-align top
 
 @media (max-width: $MQMobile)

packages/@vuepress/theme-default/components/PageEdit.vue

@@ -119,17 +119,17 @@ export default {
   .edit-link
     display inline-block
     a
-      color lighten($textColor, 25%)
+      color lighten($accentColor, 10%)
       margin-right 0.25rem
   .last-updated
     float right
     font-size 0.9em
     .prefix
       font-weight 500
-      color lighten($textColor, 25%)
+      color var(--text-color-l25)
     .time
       font-weight 400
-      color #aaa
+      color var(--dark-grey)
 
 @media (max-width: $MQMobile)
   .page-edit
@@ -139,5 +139,4 @@ export default {
       font-size 0.8em
       float none
       text-align left
-
 </style>