From 22f46e579aca4863054967b8203d875faa9502fb Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <zhangbowang1998@gmail.com>
Date: Wed, 15 Apr 2020 22:06:03 +0800
Subject: [PATCH 1/3] feat($theme-default): support darkmode

---
 .../core/lib/client/style/config.styl         |  14 +-
 .../@vuepress/plugin-search/SearchBox.vue     |  35 +++-
 .../components/AlgoliaSearchBox.vue           |  31 ++--
 .../theme-default/components/DropdownLink.vue |  37 +++--
 .../theme-default/components/Home.vue         |  16 +-
 .../theme-default/components/NavLinks.vue     |  15 +-
 .../theme-default/components/Navbar.vue       |   9 +-
 .../theme-default/components/PageEdit.vue     |   7 +-
 .../theme-default/components/PageNav.vue      |   2 +-
 .../theme-default/components/Sidebar.vue      |   3 +-
 .../theme-default/components/SidebarGroup.vue |   4 +-
 .../theme-default/components/SidebarLink.vue  |   6 +-
 .../global-components/DarkmodeSwitch.vue      | 152 ++++++++++++++++++
 packages/@vuepress/theme-default/index.js     |   2 +
 .../@vuepress/theme-default/styles/arrow.styl |  14 +-
 .../theme-default/styles/code-dark.styl       | 102 ++++++++++++
 .../theme-default/styles/code-light.styl      | 110 +++++++++++++
 .../@vuepress/theme-default/styles/code.styl  | 103 ++++++------
 .../theme-default/styles/config.styl          |   2 +-
 .../styles/custom-blocks-dark.styl            |  22 +++
 .../styles/custom-blocks-light.styl           |  27 ++++
 .../theme-default/styles/custom-blocks.styl   |  29 ++--
 .../@vuepress/theme-default/styles/index.styl |  70 +++++---
 .../theme-default/styles/mobile.styl          |  13 +-
 .../styles/prefer-color-scheme-config.styl    |  39 +++++
 .../theme-default/styles/wrapper.styl         |   3 +-
 .../docs/docs/.vuepress/components/Bit.vue    |   4 +
 27 files changed, 707 insertions(+), 164 deletions(-)
 create mode 100644 packages/@vuepress/theme-default/global-components/DarkmodeSwitch.vue
 create mode 100644 packages/@vuepress/theme-default/styles/code-dark.styl
 create mode 100644 packages/@vuepress/theme-default/styles/code-light.styl
 create mode 100644 packages/@vuepress/theme-default/styles/custom-blocks-dark.styl
 create mode 100644 packages/@vuepress/theme-default/styles/custom-blocks-light.styl
 create mode 100644 packages/@vuepress/theme-default/styles/prefer-color-scheme-config.styl

diff --git a/packages/@vuepress/core/lib/client/style/config.styl b/packages/@vuepress/core/lib/client/style/config.styl
index 558c4fcc8a..c0258eee1c 100644
--- a/packages/@vuepress/core/lib/client/style/config.styl
+++ b/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
 
diff --git a/packages/@vuepress/plugin-search/SearchBox.vue b/packages/@vuepress/plugin-search/SearchBox.vue
index b47f18ec6a..b4a7e2ca24 100644
--- a/packages/@vuepress/plugin-search/SearchBox.vue
+++ b/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>
diff --git a/packages/@vuepress/theme-default/components/AlgoliaSearchBox.vue b/packages/@vuepress/theme-default/components/AlgoliaSearchBox.vue
index 4d51a717cb..1789d46f79 100644
--- a/packages/@vuepress/theme-default/components/AlgoliaSearchBox.vue
+++ b/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>
diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue
index 1aeb2030b1..f6782cf190 100644
--- a/packages/@vuepress/theme-default/components/DropdownLink.vue
+++ b/packages/@vuepress/theme-default/components/DropdownLink.vue
@@ -123,8 +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
@@ -137,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
@@ -178,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
@@ -198,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>
diff --git a/packages/@vuepress/theme-default/components/Home.vue b/packages/@vuepress/theme-default/components/Home.vue
index 8cc0519bc9..2f8afca2a5 100644
--- a/packages/@vuepress/theme-default/components/Home.vue
+++ b/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
diff --git a/packages/@vuepress/theme-default/components/NavLinks.vue b/packages/@vuepress/theme-default/components/NavLinks.vue
index 2656ae2752..4797c75a1c 100644
--- a/packages/@vuepress/theme-default/components/NavLinks.vue
+++ b/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>
diff --git a/packages/@vuepress/theme-default/components/Navbar.vue b/packages/@vuepress/theme-default/components/Navbar.vue
index f8dd49ca68..2aa4fccecb 100644
--- a/packages/@vuepress/theme-default/components/Navbar.vue
+++ b/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,12 +106,12 @@ $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
@@ -122,7 +119,7 @@ $navbar-horizontal-padding = 1.5rem
     top $navbar-vertical-padding
     display flex
     .search-box
-      flex: 0 0 auto
+      flex 0 0 auto
       vertical-align top
 
 @media (max-width: $MQMobile)
diff --git a/packages/@vuepress/theme-default/components/PageEdit.vue b/packages/@vuepress/theme-default/components/PageEdit.vue
index e1ac3ca096..d6a6b22d79 100644
--- a/packages/@vuepress/theme-default/components/PageEdit.vue
+++ b/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>
diff --git a/packages/@vuepress/theme-default/components/PageNav.vue b/packages/@vuepress/theme-default/components/PageNav.vue
index 4c19aae5f8..44e741e9d4 100644
--- a/packages/@vuepress/theme-default/components/PageNav.vue
+++ b/packages/@vuepress/theme-default/components/PageNav.vue
@@ -155,7 +155,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
diff --git a/packages/@vuepress/theme-default/components/Sidebar.vue b/packages/@vuepress/theme-default/components/Sidebar.vue
index e70e33367a..f9ce49b1b3 100644
--- a/packages/@vuepress/theme-default/components/Sidebar.vue
+++ b/packages/@vuepress/theme-default/components/Sidebar.vue
@@ -33,9 +33,10 @@ export default {
     list-style-type none
   a
     display inline-block
+    color var(--text-color)
   .nav-links
     display none
-    border-bottom 1px solid $borderColor
+    border-bottom 1px solid var(--border-color)
     padding 0.5rem 0 0.75rem 0
     a
       font-weight 600
diff --git a/packages/@vuepress/theme-default/components/SidebarGroup.vue b/packages/@vuepress/theme-default/components/SidebarGroup.vue
index 23f8a61139..a9cd524bf1 100644
--- a/packages/@vuepress/theme-default/components/SidebarGroup.vue
+++ b/packages/@vuepress/theme-default/components/SidebarGroup.vue
@@ -101,14 +101,14 @@ export default {
     & > .sidebar-group-items
       padding-left 1rem
       & > li > .sidebar-link
-        font-size: 0.95em;
+        font-size 0.95em
         border-left none
   &.depth-2
     & > .sidebar-heading
       border-left none
 
 .sidebar-heading
-  color $textColor
+  color var(--text-color)
   transition color .15s ease
   cursor pointer
   font-size 1.1em
diff --git a/packages/@vuepress/theme-default/components/SidebarLink.vue b/packages/@vuepress/theme-default/components/SidebarLink.vue
index 4cd7665aeb..f13294035c 100644
--- a/packages/@vuepress/theme-default/components/SidebarLink.vue
+++ b/packages/@vuepress/theme-default/components/SidebarLink.vue
@@ -110,12 +110,12 @@ a.sidebar-link
   font-size 1em
   font-weight 400
   display inline-block
-  color $textColor
+  color var(--text-color)
   border-left 0.25rem solid transparent
   padding 0.35rem 1rem 0.35rem 1.25rem
   line-height 1.4
-  width: 100%
-  box-sizing: border-box
+  width 100%
+  box-sizing border-box
   &:hover
     color $accentColor
   &.active
diff --git a/packages/@vuepress/theme-default/global-components/DarkmodeSwitch.vue b/packages/@vuepress/theme-default/global-components/DarkmodeSwitch.vue
new file mode 100644
index 0000000000..5fe9d13af4
--- /dev/null
+++ b/packages/@vuepress/theme-default/global-components/DarkmodeSwitch.vue
@@ -0,0 +1,152 @@
+<template>
+  <div
+    class="darkmode-switch"
+  >
+    <div
+      class="item day"
+      :class="{active: darkmode === 'off'}"
+      @click="setDarkmode('off')"
+    >
+      <svg
+        class="icon"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M512 256a42.666667 42.666667 0 0 0 42.666667-42.666667V128a42.666667 42.666667 0 0 0-85.333334 0v85.333333a42.666667 42.666667 0 0 0 42.666667 42.666667zM896 469.333333h-85.333333a42.666667 42.666667 0 0 0 0 85.333334h85.333333a42.666667 42.666667 0 0 0 0-85.333334zM256 512a42.666667 42.666667 0 0 0-42.666667-42.666667H128a42.666667 42.666667 0 0 0 0 85.333334h85.333333a42.666667 42.666667 0 0 0 42.666667-42.666667zM265.386667 213.333333a42.666667 42.666667 0 0 0-59.306667 62.72l61.44 59.306667a42.666667 42.666667 0 0 0 31.146667 11.946667 42.666667 42.666667 0 0 0 30.72-13.226667 42.666667 42.666667 0 0 0 0-60.16zM725.333333 347.306667a42.666667 42.666667 0 0 0 29.44-11.946667l61.44-59.306667A42.666667 42.666667 0 0 0 758.613333 213.333333l-61.44 60.586667a42.666667 42.666667 0 0 0 0 60.16 42.666667 42.666667 0 0 0 28.16 13.226667zM512 768a42.666667 42.666667 0 0 0-42.666667 42.666667v85.333333a42.666667 42.666667 0 0 0 85.333334 0v-85.333333a42.666667 42.666667 0 0 0-42.666667-42.666667zM756.48 688.64a42.666667 42.666667 0 0 0-59.306667 61.44L758.613333 810.666667a42.666667 42.666667 0 0 0 29.44 11.946666 42.666667 42.666667 0 0 0 30.72-12.8 42.666667 42.666667 0 0 0 0-60.586666zM267.52 688.64l-61.44 59.306667a42.666667 42.666667 0 0 0 0 60.586666 42.666667 42.666667 0 0 0 30.72 12.8 42.666667 42.666667 0 0 0 28.586667-10.666666l61.44-59.306667a42.666667 42.666667 0 0 0-59.306667-61.44zM512 341.333333a170.666667 170.666667 0 1 0 170.666667 170.666667 170.666667 170.666667 0 0 0-170.666667-170.666667z"
+        />
+      </svg>
+    </div>
+    <div
+      class="item auto"
+      :class="{ active: darkmode === 'auto' }"
+      @click="setDarkmode('auto')"
+    >
+      <svg
+        class="icon"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M460.864 539.072h103.936l-54.208-163.072-49.728 163.072z m411.136-176.704V149.504h-212.352L510.528 0l-149.12 149.504H149.12v212.928L0 511.872l149.12 149.504v212.928h212.352l149.12 149.504 149.12-149.504h212.352v-212.928l149.12-149.504-149.184-149.504zM614.464 693.12l-31.616-90.624H438.272l-31.616 90.624H320.768l144.576-407.68h90.368l144.576 407.68H614.464z m0 0"
+        />
+      </svg>
+    </div>
+    <div
+      class="item night"
+      :class="{ active: darkmode === 'on' }"
+      @click="setDarkmode('on')"
+    >
+      <svg
+        class="icon"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M935.538601 630.40178c-11.43005-11.432249-28.673759-14.738607-43.531086-8.353536-46.733115 20.10317-96.362866 30.296859-147.50719 30.296859-99.589478 0-193.221796-38.783705-263.640252-109.20316-108.636744-108.636744-139.609745-270.022125-78.9083-411.148441 6.388069-14.85233 3.078713-32.098837-8.353536-43.532285-11.432249-11.432249-28.675758-14.743604-43.532285-8.354536-52.637312 22.64025-100.017388 54.809439-140.82552 95.616372-85.346135 85.346135-132.346869 198.821199-132.346869 319.519766 0 120.699566 47.001733 234.172631 132.347868 319.518766s198.821199 132.349067 319.517567 132.349067c120.699566 0 234.172431-47.002932 319.520765-132.351066 40.808132-40.810131 72.977122-88.190207 95.615373-140.82552C950.282205 659.081735 946.971849 641.834029 935.538601 630.40178z"
+          p-id="3638"
+        />
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script>
+function changeClass (domClass, insert, remove) {
+  domClass.remove(...remove)
+  const oldClasses = [...domClass]
+  domClass.value = ''
+  domClass.add(...insert, ...oldClasses)
+}
+
+export default {
+  data () {
+    return {
+      darkmode: 'auto'
+    }
+  },
+
+  mounted () {
+    const darkmode = localStorage.getItem('darkmode')
+
+    this.setDarkmode(darkmode || 'auto')
+  },
+
+  methods: {
+    setDarkmode (status) {
+      console.log(status)
+      if (status === 'on') this.toggleDarkmode(true)
+      else if (status === 'off') this.toggleDarkmode(false)
+      else {
+        const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
+        const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
+
+        window.matchMedia('(prefers-color-scheme: dark)').addListener(e => e.matches && this.toggleDarkmode(true))
+        window.matchMedia('(prefers-color-scheme: light)').addListener(e => e.matches && this.toggleDarkmode(false))
+
+        if (isDarkMode) this.toggleDarkmode(true)
+        else if (isLightMode) this.toggleDarkmode(false)
+        else {
+          const timeHour = new Date().getHours()
+          this.toggleDarkmode(timeHour < 6 || timeHour >= 18)
+        }
+      }
+
+      this.darkmode = status
+      localStorage.setItem('darkmode', status)
+    },
+
+    toggleDarkmode (isDarkmode) {
+      const classes = document.body.classList
+
+      if (isDarkmode) changeClass(classes, ['theme-dark'], ['theme-light'])
+      else changeClass(classes, ['theme-light'], ['theme-dark'])
+    }
+  }
+}
+
+</script>
+
+<style lang="stylus">
+.darkmode-switch
+  position absolute
+  top $navbarHeight + 1rem
+  right 1rem
+  display flex
+  flex-shrink 0
+  border-radius 4px
+  overflow hidden
+  align-self center
+  margin-right 0.5rem
+  height 22px
+
+  &:hover
+    cursor pointer
+
+  .item
+    padding 3px
+    line-height 1
+    border 1px solid $accentColor
+
+    &.day
+      border-top-left-radius 4px
+      border-bottom-left-radius 4px
+
+    &.night
+      border-top-right-radius 4px
+      border-bottom-right-radius 4px
+
+    .icon
+      width 14px
+      height 14px
+      fill $accentColor
+
+    &.active
+      background-color $accentColor
+
+      &:hover
+        cursor default
+
+      .icon
+        fill var(--white)
+</style>
diff --git a/packages/@vuepress/theme-default/index.js b/packages/@vuepress/theme-default/index.js
index baaf102ba7..bb0db9f4c3 100644
--- a/packages/@vuepress/theme-default/index.js
+++ b/packages/@vuepress/theme-default/index.js
@@ -23,6 +23,8 @@ module.exports = (options, ctx) => {
       }
     },
 
+    globalUIComponents: 'DarkmodeSwitch',
+
     plugins: [
       ['@vuepress/active-header-links', options.activeHeaderLinks],
       '@vuepress/search',
diff --git a/packages/@vuepress/theme-default/styles/arrow.styl b/packages/@vuepress/theme-default/styles/arrow.styl
index 20bffc0dc8..86c8a8ee68 100644
--- a/packages/@vuepress/theme-default/styles/arrow.styl
+++ b/packages/@vuepress/theme-default/styles/arrow.styl
@@ -1,22 +1,24 @@
-@require './config'
-
 .arrow
   display inline-block
   width 0
   height 0
+
   &.up
     border-left 4px solid transparent
     border-right 4px solid transparent
-    border-bottom 6px solid $arrowBgColor
+    border-bottom 6px solid var(--arrow-bg-color)
+
   &.down
     border-left 4px solid transparent
     border-right 4px solid transparent
-    border-top 6px solid $arrowBgColor
+    border-top 6px solid var(--arrow-bg-color)
+
   &.right
     border-top 4px solid transparent
     border-bottom 4px solid transparent
-    border-left 6px solid $arrowBgColor
+    border-left 6px solid var(--arrow-bg-color)
+
   &.left
     border-top 4px solid transparent
     border-bottom 4px solid transparent
-    border-right 6px solid $arrowBgColor
+    border-right 6px solid var(--arrow-bg-color)
diff --git a/packages/@vuepress/theme-default/styles/code-dark.styl b/packages/@vuepress/theme-default/styles/code-dark.styl
new file mode 100644
index 0000000000..193b363e4e
--- /dev/null
+++ b/packages/@vuepress/theme-default/styles/code-dark.styl
@@ -0,0 +1,102 @@
+.theme-dark
+  {$contentClass}
+    code
+      background-color var(--grey12)
+
+  /**
+   * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+   * Based on https://github.com/chriskempson/tomorrow-theme
+   * @author Rose Pritchard
+   */
+  code[class*='language-'], pre[class*='language-']
+    color #ccc
+    background none
+    font-family Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace
+    font-size 1em
+    text-align left
+    white-space pre
+    word-spacing normal
+    word-break normal
+    word-wrap normal
+    -moz-tab-size 4
+    -o-tab-size 4
+    tab-size 4
+    -webkit-hyphens none
+    -moz-hyphens none
+    -ms-hyphens none
+    hyphens none
+
+  /* Code blocks */
+  pre[class*='language-']
+    margin 0.5em 0
+    overflow auto
+
+  :not(pre) > code[class*='language-'], pre[class*='language-']
+    background #2d2d2d
+
+  /* Inline code */
+  :not(pre) > code[class*='language-']
+    padding 0.1em
+    border-radius 0.3em
+    white-space normal
+
+  .token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata
+    color #999
+
+  .token.punctuation
+    color #ccc
+
+  .token.tag, .token.attr-name, .token.namespace, .token.deleted
+    color #e2777a
+
+  .token.function-name
+    color #6196cc
+
+  .token.boolean, .token.number, .token.function
+    color #f08d49
+
+  .token.property, .token.class-name, .token.constant, .token.symbol
+    color #f8c555
+
+  .token.selector, .token.important, .token.atrule, .token.keyword, .token.builtin
+    color #cc99cd
+
+  .token.string, .token.char, .token.attr-value, .token.regex, .token.variable
+    color #7ec699
+
+  .token.operator, .token.entity, .token.url
+    color #67cdcc
+
+  .token.important, .token.bold
+    font-weight bold
+
+  .token.italic
+    font-style italic
+
+  .token.entity
+    cursor help
+
+  .token.inserted
+    color green
+
+  // hightlight
+  div[class*='language-']
+    .highlight-lines
+      .highlighted
+        background-color darken(saturate($nightCodeBgColor, 10%), 25%)
+
+    pre, pre[class*='language-']
+      background transparent
+
+    &::before
+      color rgba(255, 255, 255, 0.4)
+
+    &.line-numbers-mode
+      .highlight-lines .highlighted:before
+        background-color darken(saturate($nightCodeBgColor, 10%), 25%)
+
+      .line-numbers-wrapper
+        color rgba(255, 255, 255, 0.3)
+
+      &::after
+        border-right 1px solid darken(saturate($nightCodeBgColor, 10%), 35%)
diff --git a/packages/@vuepress/theme-default/styles/code-light.styl b/packages/@vuepress/theme-default/styles/code-light.styl
new file mode 100644
index 0000000000..2e097ca486
--- /dev/null
+++ b/packages/@vuepress/theme-default/styles/code-light.styl
@@ -0,0 +1,110 @@
+.theme-light
+  {$contentClass}
+    code
+      background-color var(--grey14)
+
+  /**
+   * prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML
+   * Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or  http://workshop.timshedor.com/category/sessions/basics);
+   * @author Tim  Shedor
+   */
+  code[class*='language-'], pre[class*='language-']
+    color black
+    background none
+    font-family Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace
+    font-size 1em
+    text-align left
+    white-space pre
+    word-spacing normal
+    word-break normal
+    word-wrap normal
+    -moz-tab-size 4
+    -o-tab-size 4
+    tab-size 4
+    -webkit-hyphens none
+    -moz-hyphens none
+    -ms-hyphens none
+    hyphens none
+
+  pre[class*='language-']::-moz-selection, pre[class*='language-'] ::-moz-selection, code[class*='language-']::-moz-selection, code[class*='language-'] ::-moz-selection
+    background #b3d4fc
+
+  pre[class*='language-']::selection, pre[class*='language-'] ::selection, code[class*='language-']::selection, code[class*='language-'] ::selection
+    background #b3d4fc
+
+  /* Code blocks */
+  pre[class*='language-']
+    margin 0.5em 0
+    overflow auto
+
+  :not(pre) > code[class*='language-'], pre[class*='language-']
+    background #f5f2f0
+
+  /* Inline code */
+  :not(pre) > code[class*='language-']
+    padding 0.1em
+    border-radius 0.3em
+    white-space normal
+
+  .token.comment, .token.prolog, .token.doctype, .token.cdata
+    color slategray
+
+  .token.punctuation
+    color #5F6364
+
+  .token.property, .token.tag, .token.boolean, .token.number, .token.function-name, .token.constant, .token.symbol, .token.deleted
+    color #c92c2c
+
+  .token.selector, .token.attr-name, .token.string, .token.char, .token.function, .token.builtin, .token.inserted
+    color #2f9c0a
+
+  .token.operator, .token.entity, .token.url, .token.variable
+    color #a67f59
+    background rgba(255, 255, 255, 0.5)
+
+  .token.atrule, .token.attr-value, .token.keyword, .token.class-name
+    color #1990b8
+
+  .token.regex, .token.important
+    color #e90
+
+  .language-css .token.string, .style .token.string
+    color #a67f59
+    background rgba(255, 255, 255, 0.5)
+
+  .token.important
+    font-weight normal
+
+  .token.bold
+    font-weight bold
+
+  .token.italic
+    font-style italic
+
+  .token.entity
+    cursor help
+
+  .token.namespace
+    opacity 0.7
+
+  // hightlight
+  div[class*='language-']
+    .highlight-lines
+      .highlighted
+        background-color darken(saturate($codeBgColor, 10%), 5%)
+
+    pre, pre[class*='language-']
+      background transparent
+
+    &::before
+      color rgba(0, 0, 0, 0.4)
+
+    &.line-numbers-mode
+      .highlight-lines .highlighted:before
+        background-color darken(saturate($codeBgColor, 10%), 5%)
+
+      .line-numbers-wrapper
+        color rgba(0, 0, 0, 0.3)
+
+      &::after
+        border-right 1px solid darken(saturate($codeBgColor, 20%), 10%)
diff --git a/packages/@vuepress/theme-default/styles/code.styl b/packages/@vuepress/theme-default/styles/code.styl
index 9d3aa9a541..9eb405c20e 100644
--- a/packages/@vuepress/theme-default/styles/code.styl
+++ b/packages/@vuepress/theme-default/styles/code.styl
@@ -1,35 +1,38 @@
 {$contentClass}
   code
-    color lighten($textColor, 20%)
+    color var(--text-color-l20)
     padding 0.25rem 0.5rem
     margin 0
     font-size 0.85em
-    background-color rgba(27,31,35,0.05)
     border-radius 3px
+
     .token
       &.deleted
         color #EC5975
+
       &.inserted
         color $accentColor
 
 {$contentClass}
-  pre, pre[class*="language-"]
+  pre, pre[class*='language-']
     line-height 1.4
     padding 1.25rem 1.5rem
     margin 0.85rem 0
-    background-color $codeBgColor
+    background-color var(--code-bg-color)
     border-radius 6px
     overflow auto
+
     code
-      color #fff
+      color var(--grey3)
       padding 0
-      background-color transparent
+      background-color transparent !important
       border-radius 0
 
-div[class*="language-"]
+div[class*='language-']
   position relative
-  background-color $codeBgColor
+  background-color var(--code-bg-color)
   border-radius 6px
+
   .highlight-lines
     user-select none
     padding-top 1.3rem
@@ -38,53 +41,58 @@ div[class*="language-"]
     left 0
     width 100%
     line-height 1.4
-    .highlighted
-      background-color rgba(0, 0, 0, 66%)
-  pre, pre[class*="language-"]
+
+  pre, pre[class*='language-']
     background transparent
     position relative
     z-index 1
+
   &::before
     position absolute
     z-index 3
     top 0.8em
     right 1em
     font-size 0.75rem
-    color rgba(255, 255, 255, 0.4)
+
   &:not(.line-numbers-mode)
     .line-numbers-wrapper
       display none
+
   &.line-numbers-mode
     .highlight-lines .highlighted
-        position relative
-        &:before
-          content ' '
-          position absolute
-          z-index 3
-          left 0
-          top 0
-          display block
-          width $lineNumbersWrapperWidth
-          height 100%
-          background-color rgba(0, 0, 0, 66%)
+      position relative
+
+      &:before
+        content ' '
+        position absolute
+        z-index 3
+        left 0
+        top 0
+        display block
+        width $lineNumbersWrapperWidth
+        height 100%
+
     pre
-      padding-left $lineNumbersWrapperWidth + 1 rem
+      padding-left ($lineNumbersWrapperWidth + 1) rem
       vertical-align middle
+
     .line-numbers-wrapper
       position absolute
       top 0
       width $lineNumbersWrapperWidth
       text-align center
-      color rgba(255, 255, 255, 0.3)
       padding 1.25rem 0
       line-height 1.4
+
       br
         user-select none
+
       .line-number
         position relative
         z-index 4
         user-select none
         font-size 0.85em
+
     &::after
       content ''
       position absolute
@@ -94,44 +102,43 @@ div[class*="language-"]
       width $lineNumbersWrapperWidth
       height 100%
       border-radius 6px 0 0 6px
-      border-right 1px solid rgba(0, 0, 0, 66%)
-      background-color $codeBgColor
-
+      background-color var(--code-bg-color)
 
 for lang in $codeLang
   div{'[class~="language-' + lang + '"]'}
     &:before
-      content ('' + lang)
+      content '' + lang
 
-div[class~="language-javascript"]
+div[class~='language-javascript']
   &:before
-    content "js"
+    content 'js'
 
-div[class~="language-typescript"]
+div[class~='language-typescript']
   &:before
-    content "ts"
+    content 'ts'
 
-div[class~="language-markup"]
+div[class~='language-markup']
   &:before
-    content "html"
+    content 'html'
 
-div[class~="language-markdown"]
+div[class~='language-markdown']
   &:before
-    content "md"
+    content 'md'
 
-div[class~="language-json"]:before
-  content "json"
+div[class~='language-json']:before
+  content 'json'
 
-div[class~="language-ruby"]:before
-  content "rb"
+div[class~='language-ruby']:before
+  content 'rb'
 
-div[class~="language-python"]:before
-  content "py"
+div[class~='language-python']:before
+  content 'py'
 
-div[class~="language-bash"]:before
-  content "sh"
+div[class~='language-bash']:before
+  content 'sh'
 
-div[class~="language-php"]:before
-  content "php"
+div[class~='language-php']:before
+  content 'php'
 
-@import '~prismjs/themes/prism-tomorrow.css'
+@require './code-light'
+@require './code-dark'
diff --git a/packages/@vuepress/theme-default/styles/config.styl b/packages/@vuepress/theme-default/styles/config.styl
index 9e403210fd..a6f4e1d03a 100644
--- a/packages/@vuepress/theme-default/styles/config.styl
+++ b/packages/@vuepress/theme-default/styles/config.styl
@@ -1 +1 @@
-$contentClass = '.theme-default-content'
+$contentClass ?= '.theme-default-content'
diff --git a/packages/@vuepress/theme-default/styles/custom-blocks-dark.styl b/packages/@vuepress/theme-default/styles/custom-blocks-dark.styl
new file mode 100644
index 0000000000..ea0660b45f
--- /dev/null
+++ b/packages/@vuepress/theme-default/styles/custom-blocks-dark.styl
@@ -0,0 +1,22 @@
+.theme-dark
+  .custom-block
+    &.tip, &.warning, &.danger, &.details
+      background-color lighten($nightBgColor, 15%)
+
+      a
+        color $accentColor
+
+    &.warning
+      color darken(#ffe564, 50%)
+
+      .custom-block-title
+        color darken(#ffe564, 40%)
+
+    &.danger
+      color darken(red, 30%)
+
+      .custom-block-title
+        color darken(red, 20%)
+
+    &.details
+      color var(--text-color)
diff --git a/packages/@vuepress/theme-default/styles/custom-blocks-light.styl b/packages/@vuepress/theme-default/styles/custom-blocks-light.styl
new file mode 100644
index 0000000000..c7d013f0dc
--- /dev/null
+++ b/packages/@vuepress/theme-default/styles/custom-blocks-light.styl
@@ -0,0 +1,27 @@
+.theme-light .custom-block
+  &.tip
+    background-color #f3f5f7
+
+  &.warning
+    background-color rgba(255, 229, 100, 0.3)
+    color darken(#ffe564, 70%)
+
+    .custom-block-title
+      color darken(#ffe564, 50%)
+
+    a
+      color var(--text-color)
+
+  &.danger
+    background-color #ffe6e6
+    border-color darken(red, 20%)
+    color darken(red, 70%)
+
+    .custom-block-title
+      color darken(red, 40%)
+
+    a
+      color var(--text-color)
+
+  &.details
+    background-color #eee
diff --git a/packages/@vuepress/theme-default/styles/custom-blocks.styl b/packages/@vuepress/theme-default/styles/custom-blocks.styl
index 5b868166a4..f4918c5031 100644
--- a/packages/@vuepress/theme-default/styles/custom-blocks.styl
+++ b/packages/@vuepress/theme-default/styles/custom-blocks.styl
@@ -2,43 +2,40 @@
   .custom-block-title
     font-weight 600
     margin-bottom -0.4rem
+
   &.tip, &.warning, &.danger
-    padding .1rem 1.5rem
-    border-left-width .5rem
+    padding 0.1rem 1.5rem
+    border-left-width 0.5rem
     border-left-style solid
     margin 1rem 0
+
   &.tip
-    background-color #f3f5f7
     border-color #42b983
+
   &.warning
-    background-color rgba(255,229,100,.3)
     border-color darken(#ffe564, 35%)
-    color darken(#ffe564, 70%)
-    .custom-block-title
-      color darken(#ffe564, 50%)
-    a
-      color $textColor
+
   &.danger
-    background-color #ffe6e6
     border-color darken(red, 20%)
-    color darken(red, 70%)
-    .custom-block-title
-      color darken(red, 40%)
-    a
-      color $textColor
+
   &.details
     display block
     position relative
     border-radius 2px
     margin 1.6em 0
     padding 1.6em
-    background-color #eee
+
     h4
       margin-top 0
+
     figure, p
       &:last-child
         margin-bottom 0
         padding-bottom 0
+
     summary
       outline none
       cursor pointer
+
+@require './custom-blocks-light'
+@require './custom-blocks-dark'
diff --git a/packages/@vuepress/theme-default/styles/index.styl b/packages/@vuepress/theme-default/styles/index.styl
index 976bfb0447..2639ec01d8 100644
--- a/packages/@vuepress/theme-default/styles/index.styl
+++ b/packages/@vuepress/theme-default/styles/index.styl
@@ -1,5 +1,6 @@
 @require './config'
 @require './code'
+@require './prefer-color-scheme-config'
 @require './custom-blocks'
 @require './arrow'
 @require './wrapper'
@@ -8,14 +9,14 @@
 html, body
   padding 0
   margin 0
-  background-color #fff
+  background-color var(--background-color)
 
 body
-  font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
+  font-family -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
   -webkit-font-smoothing antialiased
   -moz-osx-font-smoothing grayscale
   font-size 16px
-  color $textColor
+  color var(--text-color)
 
 .page
   padding-left $sidebarWidth
@@ -27,9 +28,9 @@ body
   left 0
   right 0
   height $navbarHeight
-  background-color #fff
+  background-color var(--background-color)
   box-sizing border-box
-  border-bottom 1px solid $borderColor
+  box-shadow 0 2px 8px var(--box-shadow-color)
 
 .sidebar-mask
   position fixed
@@ -42,7 +43,7 @@ body
 
 .sidebar
   font-size 16px
-  background-color #fff
+  background-color var(--background-color)
   width $sidebarWidth
   position fixed
   z-index 10
@@ -51,11 +52,12 @@ body
   left 0
   bottom 0
   box-sizing border-box
-  border-right 1px solid $borderColor
+  border-right 1px solid var(--border-color)
   overflow-y auto
 
 {$contentClass}:not(.custom)
   @extend $wrapper
+
   > *:first-child
     margin-top $navbarHeight
 
@@ -95,10 +97,10 @@ kbd
 
 blockquote
   font-size 1rem
-  color #999;
-  border-left .2rem solid #dfe2e5
+  color #999
+  border-left 0.2rem solid #dfe2e5
   margin 1rem 0
-  padding .25rem 0 .25rem 1rem
+  padding 0.25rem 0 0.25rem 1rem
 
   & > p
     margin 0
@@ -114,7 +116,7 @@ h1, h2, h3, h4, h5, h6
   line-height 1.25
 
   {$contentClass}:not(.custom) > &
-    margin-top (0.5rem - $navbarHeight)
+    margin-top 0.5rem - $navbarHeight
     padding-top ($navbarHeight + 1rem)
     margin-bottom 0
 
@@ -126,15 +128,15 @@ h1, h2, h3, h4, h5, h6
         margin-top 2rem
 
   &:hover .header-anchor
-    opacity: 1
+    opacity 1
 
 h1
   font-size 2.2rem
 
 h2
   font-size 1.65rem
-  padding-bottom .3rem
-  border-bottom 1px solid $borderColor
+  padding-bottom 0.3rem
+  border-bottom 1px solid var(--border-color)
 
 h3
   font-size 1.35rem
@@ -151,20 +153,20 @@ a.header-anchor
     text-decoration none
 
 code, kbd, .line-number
-  font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace
+  font-family source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace
 
 p, ul, ol
   line-height 1.7
 
 hr
   border 0
-  border-top 1px solid $borderColor
+  border-top 1px solid var(--border-color)
 
 table
   border-collapse collapse
   margin 1rem 0
-  display: block
-  overflow-x: auto
+  display block
+  overflow-x auto
 
 tr
   border-top 1px solid #dfe2e5
@@ -173,13 +175,20 @@ tr
     background-color #f6f8fa
 
 th, td
-  border 1px solid #dfe2e5
-  padding .6em 1em
+  border 1px solid var(--grey14)
+  padding 0.6em 1em
+
+.theme-dark
+  tr:nth-child(2n)
+    background-color #252322
+
+  th, td
+    border 1px solid var(--grey12)
 
 .theme-container
   &.sidebar-open
     .sidebar-mask
-      display: block
+      display block
 
   &.no-navbar
     {$contentClass}:not(.custom) > h1, h2, h3, h4, h5, h6
@@ -189,7 +198,6 @@ th, td
     .sidebar
       top 0
 
-
 @media (min-width: ($MQMobile + 1px))
   .theme-container.no-sidebar
     .sidebar
@@ -198,4 +206,22 @@ th, td
     .page
       padding-left 0
 
+::-webkit-scrollbar
+  width 6px
+  height 6px
+
+::-webkit-scrollbar-track-piece
+  background-color rgba(0, 0, 0, 0.1)
+  -webkit-border-radius 6px
+
+::-webkit-scrollbar-thumb:vertical
+  height 6px
+  background-color $accentColor
+  -webkit-border-radius 6px
+
+::-webkit-scrollbar-thumb:horizontal
+  width 6px
+  background-color $accentColor
+  -webkit-border-radius 6px
+
 @require 'mobile.styl'
diff --git a/packages/@vuepress/theme-default/styles/mobile.styl b/packages/@vuepress/theme-default/styles/mobile.styl
index f5bd32739d..b208bce621 100644
--- a/packages/@vuepress/theme-default/styles/mobile.styl
+++ b/packages/@vuepress/theme-default/styles/mobile.styl
@@ -1,12 +1,11 @@
 @require './config'
 
-$mobileSidebarWidth = $sidebarWidth * 0.82
-
 // narrow desktop / iPad
 @media (max-width: $MQNarrow)
   .sidebar
     font-size 15px
     width $mobileSidebarWidth
+
   .page
     padding-left $mobileSidebarWidth
 
@@ -16,22 +15,26 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
     top 0
     padding-top $navbarHeight
     transform translateX(-100%)
-    transition transform .2s ease
+    transition transform 0.2s ease
+
   .page
     padding-left 0
+
   .theme-container
     &.sidebar-open
       .sidebar
         transform translateX(0)
+
     &.no-navbar
       .sidebar
-        padding-top: 0
+        padding-top 0
 
 // narrow mobile
 @media (max-width: $MQMobileNarrow)
   h1
     font-size 1.9rem
+
   {$contentClass}
-    div[class*="language-"]
+    div[class*='language-']
       margin 0.85rem -1.5rem
       border-radius 0
diff --git a/packages/@vuepress/theme-default/styles/prefer-color-scheme-config.styl b/packages/@vuepress/theme-default/styles/prefer-color-scheme-config.styl
new file mode 100644
index 0000000000..f7a05f1568
--- /dev/null
+++ b/packages/@vuepress/theme-default/styles/prefer-color-scheme-config.styl
@@ -0,0 +1,39 @@
+.theme-light
+  --text-color $textColor
+  --background-color $bgColor
+  --border-color $borderColor
+  --code-bg-color $codeBgColor
+  --arrow-bg-color $arrowBgColor
+  --box-shadow-color $boxShadowColor
+  --card-shadow-color $cardShadowColor
+  --text-color-l10 lighten($textColor, 10%)
+  --text-color-l20 lighten($textColor, 20%)
+  --text-color-l25 lighten($textColor, 25%)
+  --text-color-l40 lighten($textColor, 40%)
+  --black #000
+  --dark-grey #666
+  --light-grey #999
+  --white #fff
+  --grey3 #333
+  --grey12 #bbb
+  --grey14 #eee
+
+.theme-dark
+  --text-color $nightTextColor
+  --background-color $nightBgColor
+  --border-color $nightBorderColor
+  --code-bg-color $nightCodeBgColor
+  --arrow-bg-color $nightArrowBgColor
+  --box-shadow-color $nightBoxShadowColor
+  --card-shadow-color $nightCardShadowColor
+  --text-color-l10 lighten($nightTextColor, 10%)
+  --text-color-l20 lighten($nightTextColor, 20%)
+  --text-color-l25 lighten($nightTextColor, 25%)
+  --text-color-l40 lighten($nightTextColor, 40%)
+  --black #fff
+  --dark-grey #999
+  --light-grey #666
+  --white #000
+  --grey3 #ccc
+  --grey12 #333
+  --grey14 #111
diff --git a/packages/@vuepress/theme-default/styles/wrapper.styl b/packages/@vuepress/theme-default/styles/wrapper.styl
index a99262c71a..5742a37b99 100644
--- a/packages/@vuepress/theme-default/styles/wrapper.styl
+++ b/packages/@vuepress/theme-default/styles/wrapper.styl
@@ -2,8 +2,9 @@ $wrapper
   max-width $contentWidth
   margin 0 auto
   padding 2rem 2.5rem
+
   @media (max-width: $MQNarrow)
     padding 2rem
+
   @media (max-width: $MQMobileNarrow)
     padding 1.5rem
-
diff --git a/packages/docs/docs/.vuepress/components/Bit.vue b/packages/docs/docs/.vuepress/components/Bit.vue
index d14acdb80b..359226d360 100644
--- a/packages/docs/docs/.vuepress/components/Bit.vue
+++ b/packages/docs/docs/.vuepress/components/Bit.vue
@@ -29,4 +29,8 @@
     margin-left 15px
   img, span
     vertical-align middle
+
+.theme-dark
+  .bit-sponsor
+    background-color #0c0907
 </style>

From 0f1a0d6a69debbf7329ec3c483e58648a4ce24c7 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <zhangbowang1998@gmail.com>
Date: Thu, 16 Apr 2020 09:27:22 +0800
Subject: [PATCH 2/3] feat($theme-default): make darkmode switch bigger

---
 .../global-components/DarkmodeSwitch.vue      | 32 ++++++-------------
 1 file changed, 10 insertions(+), 22 deletions(-)

diff --git a/packages/@vuepress/theme-default/global-components/DarkmodeSwitch.vue b/packages/@vuepress/theme-default/global-components/DarkmodeSwitch.vue
index 5fe9d13af4..2200e61b59 100644
--- a/packages/@vuepress/theme-default/global-components/DarkmodeSwitch.vue
+++ b/packages/@vuepress/theme-default/global-components/DarkmodeSwitch.vue
@@ -1,10 +1,8 @@
 <template>
-  <div
-    class="darkmode-switch"
-  >
+  <div class="darkmode-switch">
     <div
       class="item day"
-      :class="{active: darkmode === 'off'}"
+      :class="{ active: darkmode === 'off' }"
       @click="setDarkmode('off')"
     >
       <svg
@@ -88,6 +86,7 @@ export default {
         else if (isLightMode) this.toggleDarkmode(false)
         else {
           const timeHour = new Date().getHours()
+
           this.toggleDarkmode(timeHour < 6 || timeHour >= 18)
         }
       }
@@ -104,7 +103,6 @@ export default {
     }
   }
 }
-
 </script>
 
 <style lang="stylus">
@@ -112,41 +110,31 @@ export default {
   position absolute
   top $navbarHeight + 1rem
   right 1rem
+  height 24px
   display flex
-  flex-shrink 0
-  border-radius 4px
-  overflow hidden
-  align-self center
-  margin-right 0.5rem
-  height 22px
-
   &:hover
     cursor pointer
-
   .item
-    padding 3px
+    padding 4px
     line-height 1
     border 1px solid $accentColor
-
+    border-left none
+    &:first-child
+      border-left 1px solid $accentColor
     &.day
       border-top-left-radius 4px
       border-bottom-left-radius 4px
-
     &.night
       border-top-right-radius 4px
       border-bottom-right-radius 4px
-
     .icon
-      width 14px
-      height 14px
+      width 16px
+      height 16px
       fill $accentColor
-
     &.active
       background-color $accentColor
-
       &:hover
         cursor default
-
       .icon
         fill var(--white)
 </style>

From 7df56907594e425a864d409568839d838c1a70d1 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <zhangbowang1998@gmail.com>
Date: Sat, 25 Apr 2020 14:07:02 +0800
Subject: [PATCH 3/3] feat($theme-default): disable tap-highlight-color

---
 packages/@vuepress/theme-default/styles/index.styl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/@vuepress/theme-default/styles/index.styl b/packages/@vuepress/theme-default/styles/index.styl
index 2639ec01d8..64bacb56b8 100644
--- a/packages/@vuepress/theme-default/styles/index.styl
+++ b/packages/@vuepress/theme-default/styles/index.styl
@@ -17,6 +17,7 @@ body
   -moz-osx-font-smoothing grayscale
   font-size 16px
   color var(--text-color)
+  -webkit-tap-highlight-color transparent
 
 .page
   padding-left $sidebarWidth