diff --git a/demo/src/layout.md b/demo/src/layout.md
index 6c60f1f10..6e2b416e1 100644
--- a/demo/src/layout.md
+++ b/demo/src/layout.md
@@ -25,7 +25,7 @@ This is just a demo, you should add styles according to your own needs.
   text-align center
 
 .content__page-top, .content__page-bottom, .content__content-top, .content__content-bottom
-  @extend $wrapper
+  wrapper()
   padding-top 0
   padding-bottom 0
   text-align center
diff --git a/demo/src/zh/layout.md b/demo/src/zh/layout.md
index 59d5fb173..393755d64 100644
--- a/demo/src/zh/layout.md
+++ b/demo/src/zh/layout.md
@@ -25,7 +25,7 @@ icon: layout
   text-align center
 
 .content__page-top, .content__page-bottom, .content__content-top, .content__content-bottom
-  @extend $wrapper
+  wrapper()
   padding-top 0
   padding-bottom 0
   text-align center
diff --git a/docs/theme/src/config/stylus.md b/docs/theme/src/config/stylus.md
index 315bd54ed..e078f852b 100644
--- a/docs/theme/src/config/stylus.md
+++ b/docs/theme/src/config/stylus.md
@@ -33,7 +33,7 @@ $navbarMobileHorizontalPadding ?= 1rem
 $navbarVerticalPadding ?= 0.7rem
 $navbarMobileVerticalPadding ?= 0.4rem
 $sidebarWidth ?= 18rem
-$mobileSidebarWidth ?= $sidebarWidth
+$sidebarMobileWidth ?= $sidebarWidth
 $contentWidth ?= 740px
 $homePageWidth ?= 960px
 ```
@@ -77,7 +77,7 @@ $badgeErrorColor ?= #DA5961
 $contentClass ?= '.theme-default-content'
 
 /* code block */
-$lineNumbersWrapperWidth ?= 2.5rem
+$lineNumbersWidth ?= 2.5rem
 $codeLang ?= js ts html md vue css sass scss less stylus go java c sh yaml py docker dockerfile makefile
 ```
 
diff --git a/docs/theme/src/zh/config/stylus.md b/docs/theme/src/zh/config/stylus.md
index b247c328a..2961450b2 100644
--- a/docs/theme/src/zh/config/stylus.md
+++ b/docs/theme/src/zh/config/stylus.md
@@ -33,7 +33,7 @@ $navbarMobileHorizontalPadding ?= 1rem
 $navbarVerticalPadding ?= 0.7rem
 $navbarMobileVerticalPadding ?= 0.4rem
 $sidebarWidth ?= 18rem
-$mobileSidebarWidth ?= $sidebarWidth
+$sidebarMobileWidth ?= $sidebarWidth
 $contentWidth ?= 740px
 $homePageWidth ?= 960px
 ```
@@ -77,7 +77,7 @@ $badgeErrorColor ?= #DA5961
 $contentClass ?= '.theme-default-content'
 
 /* code block */
-$lineNumbersWrapperWidth ?= 2.5rem
+$lineNumbersWidth ?= 2.5rem
 $codeLang ?= js ts html md vue css sass scss less stylus go java c sh yaml py docker dockerfile makefile
 ```
 
diff --git a/packages/comment/src/client/components/Valine.vue b/packages/comment/src/client/components/Valine.vue
index 52011fe23..4ceb38505 100644
--- a/packages/comment/src/client/components/Valine.vue
+++ b/packages/comment/src/client/components/Valine.vue
@@ -11,7 +11,7 @@
 
 .page {
   .valine-wrapper {
-    @extend $wrapper;
+    wrapper();
 
     .v[data-class=v] {
       * {
diff --git a/packages/comment/src/client/styles/waline.styl b/packages/comment/src/client/styles/waline.styl
index 45e3de9c8..e61ba10de 100644
--- a/packages/comment/src/client/styles/waline.styl
+++ b/packages/comment/src/client/styles/waline.styl
@@ -3,15 +3,15 @@
 
 .page {
   .waline-wrapper {
-    @extend $wrapper;
+    wrapper();
     --waline-accent-color: var(--accent-color);
     --waline-text-color: var(--text-color);
-    --waline-active-color: var(--accent-color-l10);
+    --waline-active-color: var(--accent-color-light);
     --waline-border: none;
     --waline-box-shadow: 0 12px 40px rgba(134, 151, 168, 0.25);
 
     html.dark & {
-      --waline-active-color: var(--accent-color-d10);
+      --waline-active-color: var(--accent-color-dark);
       --waline-box-shadow: 0 12px 40px #0f0e0d;
     }
   }
diff --git a/packages/components/src/client/BreadCrumb.vue b/packages/components/src/client/BreadCrumb.vue
index 297322878..f252afc84 100644
--- a/packages/components/src/client/BreadCrumb.vue
+++ b/packages/components/src/client/BreadCrumb.vue
@@ -48,7 +48,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .breadcrumb {
-  @extend $wrapper;
+  wrapper();
   position: relative;
   margin-top: $navbarHeight + 0.5rem;
   margin-bottom: 0.5rem - $navbarHeight;
@@ -113,10 +113,10 @@ h1, h2, h3, h4, h5, h6 {
     }
 
     &:hover {
-      color: var(--accent-color-l10, lighten($accentColor, 10%));
+      color: var(--accent-color-light, lighten($accentColor, 10%));
 
       html.dark & {
-        color: var(--accent-color-d10, darken($accentColor, 10%));
+        color: var(--accent-color-dark, darken($accentColor, 10%));
       }
     }
   }
diff --git a/packages/components/src/client/PageInfo.vue b/packages/components/src/client/PageInfo.vue
index 4deda045a..ca3f8298e 100644
--- a/packages/components/src/client/PageInfo.vue
+++ b/packages/components/src/client/PageInfo.vue
@@ -34,7 +34,7 @@ $pageInfoTextSize ?= 14px;
 
 .page {
   .page-title {
-    @extend $wrapper;
+    wrapper();
     padding-bottom: 0.2rem;
     position: relative;
     z-index: 1;
diff --git a/packages/copy-code/src/client/style/code.styl b/packages/copy-code/src/client/style/code.styl
index 9b23ba0e9..3992b4e0a 100644
--- a/packages/copy-code/src/client/style/code.styl
+++ b/packages/copy-code/src/client/style/code.styl
@@ -52,7 +52,7 @@
   outline: none;
 
   &:hover {
-    background-color: var(--code-hl-bg-color, rgb(0 0 0 / 66%));
+    background-color: var(--code-hl-bg-color, rgba(0, 0, 0, 66%));
     cursor: pointer !important;
   }
 
diff --git a/packages/create/template/layout.md b/packages/create/template/layout.md
index 6c60f1f10..6e2b416e1 100644
--- a/packages/create/template/layout.md
+++ b/packages/create/template/layout.md
@@ -25,7 +25,7 @@ This is just a demo, you should add styles according to your own needs.
   text-align center
 
 .content__page-top, .content__page-bottom, .content__content-top, .content__content-bottom
-  @extend $wrapper
+  wrapper()
   padding-top 0
   padding-bottom 0
   text-align center
diff --git a/packages/create/template/zh/layout.md b/packages/create/template/zh/layout.md
index ab09f532f..4fabbee76 100644
--- a/packages/create/template/zh/layout.md
+++ b/packages/create/template/zh/layout.md
@@ -25,7 +25,7 @@ icon: layout
   text-align center
 
 .content__page-top, .content__page-bottom, .content__content-top, .content__content-bottom
-  @extend $wrapper
+  wrapper()
   padding-top 0
   padding-bottom 0
   text-align center
diff --git a/packages/pwa/src/client/components/PWAInstallModal.vue b/packages/pwa/src/client/components/PWAInstallModal.vue
index 9a3ddaf4f..725fe7249 100644
--- a/packages/pwa/src/client/components/PWAInstallModal.vue
+++ b/packages/pwa/src/client/components/PWAInstallModal.vue
@@ -406,7 +406,7 @@
     color: var(--white, #fff);
 
     &:hover, &:focus {
-      background: var(--accent-color-l10, $accentColor);
+      background: var(--accent-color-light, $accentColor);
     }
 
     @media (max-width: $MQMobileNarrow) {
@@ -421,7 +421,7 @@
     color: var(--accent-color, $accentColor);
 
     &:hover, &:focus {
-      background: var(--accent-color-l10, $accentColor);
+      background: var(--accent-color-light, $accentColor);
       color: var(--white, #fff);
     }
   }
diff --git a/packages/shared/styles/wrapper.styl b/packages/shared/styles/wrapper.styl
index 9a532a82c..8e52c4bd1 100644
--- a/packages/shared/styles/wrapper.styl
+++ b/packages/shared/styles/wrapper.styl
@@ -1,4 +1,4 @@
-$wrapper {
+wrapper() {
   max-width: $contentWidth;
   margin: 0 auto;
   padding: 2rem 2.5rem;
@@ -12,7 +12,7 @@ $wrapper {
   }
 }
 
-$horizontal-wrapper {
+horizontal-wrapper() {
   max-width: var(--content-width);
   margin-right: auto;
   margin-left: auto;
diff --git a/packages/theme/components/Blog/ArticleItem.vue b/packages/theme/components/Blog/ArticleItem.vue
index c5cc64d95..915597a0c 100644
--- a/packages/theme/components/Blog/ArticleItem.vue
+++ b/packages/theme/components/Blog/ArticleItem.vue
@@ -128,7 +128,7 @@
     // line number fix
     .line-numbers-mode {
       pre {
-        padding-left: ($lineNumbersWrapperWidth + 1) rem;
+        padding-left: ($lineNumbersWidth + 1) rem;
       }
     }
 
diff --git a/packages/theme/components/Blog/BlogInfoList.vue b/packages/theme/components/Blog/BlogInfoList.vue
index f1d7ea22c..1980e04bb 100644
--- a/packages/theme/components/Blog/BlogInfoList.vue
+++ b/packages/theme/components/Blog/BlogInfoList.vue
@@ -164,11 +164,11 @@
 
         &.active {
           html.light & {
-            background: var(--accent-color-l10);
+            background: var(--accent-color-light);
           }
 
           html.dark & {
-            background: var(--accent-color-d10);
+            background: var(--accent-color-dark);
           }
         }
 
diff --git a/packages/theme/components/Blog/CategoryList.vue b/packages/theme/components/Blog/CategoryList.vue
index 3e95ac2fb..774e06da6 100644
--- a/packages/theme/components/Blog/CategoryList.vue
+++ b/packages/theme/components/Blog/CategoryList.vue
@@ -91,7 +91,7 @@ for $color, $index in $colors {
       }
 
       &.active {
-        background: var(--accent-color-d10);
+        background: var(--accent-color-dark);
         color: var(--white);
       }
     }
diff --git a/packages/theme/components/Home.vue b/packages/theme/components/Home.vue
index b84d4ced1..ab1634c69 100644
--- a/packages/theme/components/Home.vue
+++ b/packages/theme/components/Home.vue
@@ -20,20 +20,15 @@
 <style lang="stylus">
 .home {
   display: block;
-  max-width: $homePageWidth;
-  min-height: 100vh - $navbarHeight;
-  padding: $navbarHeight 2rem 0;
-  margin: 0px auto;
-  overflow-x: hidden;
 
-  @media (max-width: $MQNarrow) {
-    min-height: 100vh - $navbarMobileHeight;
-    padding-top: $navbarMobileHeight;
-  }
+  max-width: var(--home-page-width);
+  min-height: calc(100vh - var(--navbar-height));
+  margin: 0 auto;
+  padding: var(--navbar-height) 2rem 0;
 
   @media (max-width: $MQMobileNarrow) {
-    padding-left: 1.5rem;
     padding-right: 1.5rem;
+    padding-left: 1.5rem;
   }
 
   {$contentClass} {
diff --git a/packages/theme/components/HomeFeatures.vue b/packages/theme/components/HomeFeatures.vue
index b5cca2e20..c82288cf6 100644
--- a/packages/theme/components/HomeFeatures.vue
+++ b/packages/theme/components/HomeFeatures.vue
@@ -115,7 +115,7 @@
       margin: 0.25rem 0;
       border-bottom: none;
 
-      color: var(--text-color-l10);
+      color: var(--text-color-light);
 
       font-weight: bold;
       font-size: 1.25rem;
@@ -127,7 +127,7 @@
 
     p {
       margin: 0;
-      color: var(--text-color-l25);
+      color: var(--text-color-lighter);
       line-height: 1.4;
     }
   }
diff --git a/packages/theme/components/HomeHero.vue b/packages/theme/components/HomeHero.vue
index 951faaf4b..643e18328 100644
--- a/packages/theme/components/HomeHero.vue
+++ b/packages/theme/components/HomeHero.vue
@@ -136,7 +136,7 @@
     .description {
       max-width: 35rem;
 
-      color: var(--text-color-l40);
+      color: var(--text-color-bright);
 
       font-size: 1.6rem;
       font-family: var(--font-family-fancy);
@@ -187,8 +187,8 @@
         color: var(--white);
 
         &:hover {
-          border-color: var(--accent-color-l10);
-          background-color: var(--accent-color-l10);
+          border-color: var(--accent-color-light);
+          background-color: var(--accent-color-light);
         }
       }
     }
diff --git a/packages/theme/components/Navbar/NavLinks.vue b/packages/theme/components/Navbar/NavLinks.vue
index ccfd60a8a..a7c9342bc 100644
--- a/packages/theme/components/Navbar/NavLinks.vue
+++ b/packages/theme/components/Navbar/NavLinks.vue
@@ -34,7 +34,7 @@
         right: 50%;
         bottom: 0px;
         height: 2px;
-        background: var(--accent-color-l10);
+        background: var(--accent-color-light);
         border-radius: 1px;
         visibility: hidden;
         transition: left 0.2s ease-in-out, right 0.2s ease-in-out;
diff --git a/packages/theme/components/Page.vue b/packages/theme/components/Page.vue
index 6969a2a23..b7b7e617c 100644
--- a/packages/theme/components/Page.vue
+++ b/packages/theme/components/Page.vue
@@ -78,7 +78,7 @@
 
   // narrow desktop / iPad
   @media (max-width: $MQNarrow) {
-    padding-left: $mobileSidebarWidth;
+    padding-left: $sidebarMobileWidth;
   }
 
   // wide mobile
diff --git a/packages/theme/components/PageMeta.vue b/packages/theme/components/PageMeta.vue
index 5b1f7b459..e7d04e45d 100644
--- a/packages/theme/components/PageMeta.vue
+++ b/packages/theme/components/PageMeta.vue
@@ -40,7 +40,7 @@
 @require '~vuepress-shared/styles/wrapper';
 
 .page-meta {
-  @extend $wrapper;
+  wrapper();
   padding-top: 12px;
   padding-bottom: 12px;
   font-family: Arial, Helvetica, sans-serif;
@@ -49,7 +49,7 @@
   .meta-item {
     .label {
       font-weight: 500;
-      color: var(--text-color-l25);
+      color: var(--text-color-lighter);
     }
 
     .info {
@@ -75,7 +75,7 @@
     }
 
     a {
-      color: var(--accent-color-l10);
+      color: var(--accent-color-light);
     }
   }
 
diff --git a/packages/theme/components/PageNav.vue b/packages/theme/components/PageNav.vue
index a335ff1b3..01be92afd 100644
--- a/packages/theme/components/PageNav.vue
+++ b/packages/theme/components/PageNav.vue
@@ -46,7 +46,7 @@
 @require '~vuepress-shared/styles/wrapper';
 
 .page-nav {
-  @extend $wrapper;
+  wrapper();
   padding-top: 12px;
   padding-bottom: 0;
   font-family: Arial, Helvetica, sans-serif;
diff --git a/packages/theme/components/Password.vue b/packages/theme/components/Password.vue
index ea089d175..9e0f87a57 100644
--- a/packages/theme/components/Password.vue
+++ b/packages/theme/components/Password.vue
@@ -27,7 +27,7 @@
   @media (max-width: $MQNarrow) {
     height: 90vh - $navbarMobileHeight;
     margin-top: $navbarMobileHeight;
-    padding-left: $mobileSidebarWidth;
+    padding-left: $sidebarMobileWidth;
   }
 
   @media (max-width: $MQMobile) {
diff --git a/packages/theme/components/Sidebar/Sidebar.vue b/packages/theme/components/Sidebar/Sidebar.vue
index baae664be..7d7391a01 100644
--- a/packages/theme/components/Sidebar/Sidebar.vue
+++ b/packages/theme/components/Sidebar/Sidebar.vue
@@ -79,7 +79,7 @@
 
   // narrow desktop / iPad
   @media (max-width: $MQNarrow) {
-    width: $mobileSidebarWidth;
+    width: $sidebarMobileWidth;
     font-size: 15px;
   }
 
diff --git a/packages/theme/layouts/404.vue b/packages/theme/layouts/404.vue
index cd077680c..8665a4ae7 100644
--- a/packages/theme/layouts/404.vue
+++ b/packages/theme/layouts/404.vue
@@ -1,6 +1,6 @@
 <template>
   <Common :sidebar="false">
-    <main class="page not-found">
+    <main id="main-content" class="page not-found">
       <Page404Icon />
       <blockquote v-text="msg" />
       <button class="action-button" @click="back">{{ locales.back }}</button>
@@ -15,18 +15,13 @@
 .page.not-found {
   display: block;
 
-  max-width: $homePageWidth;
-
+  max-width: var(--home-page-width);
   min-height: 80vh;
   margin: 0 auto;
-  padding: ($navbarHeight + 1rem) 2rem 0 2rem !important;
+  padding: calc(var(--navbar-height) + 1rem) 2rem 0 2rem !important;
 
   text-align: center;
 
-  @media (max-width: $MQMobile) {
-    padding-top: $navbarMobileHeight + 1rem;
-  }
-
   .page-404-icon {
     max-width: 600px;
     margin: 0 1.5rem;
@@ -40,8 +35,9 @@
     margin: 0 0.25rem;
     padding: 0.5rem 1rem;
     border-width: 0;
-    border-bottom: 1px solid var(--accent-color-d10);
+    border-bottom: 1px solid var(--accent-color-dark);
     border-radius: 0.25rem;
+
     background: var(--accent-color);
     color: var(--white);
     outline: none;
@@ -51,7 +47,7 @@
     transition: background 0.1s ease;
 
     &:hover {
-      background: var(--accent-color-l10);
+      background: var(--accent-color-light);
       cursor: pointer;
     }
   }
diff --git a/packages/theme/styles/code/base.styl b/packages/theme/styles/code/base.styl
new file mode 100644
index 000000000..4bf86945a
--- /dev/null
+++ b/packages/theme/styles/code/base.styl
@@ -0,0 +1,180 @@
+
+pre[class*='language-'] > code {
+  background: none;
+  color: var(--code-color);
+  font-family: var(--font-family-code);
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-wrap: normal;
+  word-break: normal;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  hyphens: none;
+  transition: color var(--color-transition);
+}
+
+/* Code blocks */
+pre[class*='language-'] {
+  overflow: auto;
+}
+
+/* Inline code */
+:not(pre) > code[class*='language-'] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+{$contentClass} {
+  pre, pre[class*='language-'] {
+    overflow: auto;
+    margin: 0.85rem 0;
+    padding: 1rem;
+    border-radius: 6px;
+    line-height: 1.4;
+
+    code {
+      padding: 0;
+      border-radius: 0;
+      background: transparent !important;
+      overflow-wrap: unset;
+      -webkit-font-smoothing: auto;
+      -moz-osx-font-smoothing: auto;
+    }
+  }
+
+  .line-number {
+    font-family: var(--font-family-code);
+  }
+}
+
+div[class*='language-'] {
+  position: relative;
+  border-radius: 6px;
+  background: var(--code-bg-color);
+  transition: background-color var(--color-transition);
+
+  &::before {
+    position: absolute;
+    top: 0.8em;
+    right: 1em;
+    z-index: 3;
+    color: var(--code-line-color);
+    font-size: 0.75rem;
+    transition: color var(--color-transition);
+  }
+
+  pre, pre[class*='language-'] {
+    position: relative;
+    z-index: 1;
+    background: transparent;
+  }
+
+  .highlight-lines {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding-top: 1rem;
+    line-height: 1.4;
+    user-select: none;
+  }
+
+  .highlight-line {
+    background-color: var(--code-highlight-line-color);
+    transition: background-color var(--color-transition);
+  }
+
+  &.line-numbers-mode {
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 2;
+      width: var(--line-numbers-width);
+      height: 100%;
+      border-right: 1px solid var(--code-highlight-line-color);
+      border-radius: 6px 0 0 6px;
+      transition: border-color var(--color-transition);
+
+      // edited
+      @media (max-width: $MQMobileNarrow) {
+        border-radius: 0;
+      }
+    }
+  }
+
+  &.line-numbers-mode {
+    .highlight-lines .highlighted {
+      position: relative;
+
+      &::before {
+        content: ' ';
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 3;
+        display: block;
+        width: $lineNumbersWidth;
+        height: 100%;
+      }
+    }
+
+    pre {
+      vertical-align: middle;
+      // theme-default
+      margin-left: $lineNumbersWidth;
+      padding-left: 0.5rem;
+    }
+
+    .line-numbers-wrapper {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: $lineNumbersWidth;
+      padding: 1rem 0;
+      color: var(--code-line-color);
+      line-height: 1.4;
+      text-align: center;
+      transition: color var(--color-transition);
+
+      br {
+        user-select: none;
+      }
+    }
+
+    .line-number {
+      position: relative;
+      z-index: 4;
+      height: 1.4em;
+      font-size: 0.85em;
+      user-select: none;
+    }
+  }
+
+  &:not(.line-numbers-mode) {
+    .line-numbers-wrapper {
+      display: none;
+    }
+  }
+}
+
+for lang in $codeLang {
+  div{'[class~="language-' + lang + '"]'} {
+    &:before {
+      content: '' + lang;
+    }
+  }
+}
+
+// narrow mobile
+@media (max-width: $MQMobileNarrow) {
+  {$contentClass} {
+    div[class*='language-'] {
+      margin: 0.85rem -1.5rem;
+      border-radius: 0;
+    }
+  }
+}
diff --git a/packages/theme/styles/code/dark.styl b/packages/theme/styles/code/dark.styl
index ae46caa56..259015355 100644
--- a/packages/theme/styles/code/dark.styl
+++ b/packages/theme/styles/code/dark.styl
@@ -10,7 +10,7 @@ html.dark {
 }
 
 code[class*='language-'], pre[class*='language-'] {
-  text-shadow: 0 1px rgb(0 0 0 / 30%);
+  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
   // tab size
   -moz-tab-size: 2;
   -o-tab-size: 2;
diff --git a/packages/theme/styles/code/index.styl b/packages/theme/styles/code/index.styl
index c2e410bd4..6aa9663ba 100644
--- a/packages/theme/styles/code/index.styl
+++ b/packages/theme/styles/code/index.styl
@@ -1,180 +1,3 @@
-
-pre[class*='language-'] > code {
-  background: none;
-  color: var(--code-color);
-  font-family: var(--font-family-code);
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-wrap: normal;
-  word-break: normal;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  hyphens: none;
-  transition: color var(--color-transition);
-}
-
-/* Code blocks */
-pre[class*='language-'] {
-  overflow: auto;
-}
-
-/* Inline code */
-:not(pre) > code[class*='language-'] {
-  padding: 0.1em;
-  border-radius: 0.3em;
-  white-space: normal;
-}
-
-{$contentClass} {
-  pre, pre[class*='language-'] {
-    overflow: auto;
-    margin: 0.85rem 0;
-    padding: 1rem;
-    border-radius: 6px;
-    line-height: 1.4;
-
-    code {
-      padding: 0;
-      border-radius: 0;
-      background: transparent !important;
-      overflow-wrap: unset;
-      -webkit-font-smoothing: auto;
-      -moz-osx-font-smoothing: auto;
-    }
-  }
-
-  .line-number {
-    font-family: var(--font-family-code);
-  }
-}
-
-div[class*='language-'] {
-  position: relative;
-  border-radius: 6px;
-  background: var(--code-bg-color);
-  transition: background-color var(--color-transition);
-
-  &::before {
-    position: absolute;
-    top: 0.8em;
-    right: 1em;
-    z-index: 3;
-    color: var(--code-line-color);
-    font-size: 0.75rem;
-    transition: color var(--color-transition);
-  }
-
-  pre, pre[class*='language-'] {
-    position: relative;
-    z-index: 1;
-    background: transparent;
-  }
-
-  .highlight-lines {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    padding-top: 1rem;
-    line-height: 1.4;
-    user-select: none;
-  }
-
-  .highlight-line {
-    background-color: var(--code-highlight-line-color);
-    transition: background-color var(--color-transition);
-  }
-
-  &.line-numbers-mode {
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 2;
-      width: var(--line-numbers-width);
-      height: 100%;
-      border-right: 1px solid var(--code-highlight-line-color);
-      border-radius: 6px 0 0 6px;
-      transition: border-color var(--color-transition);
-
-      // edited
-      @media (max-width: $MQMobileNarrow) {
-        border-radius: 0;
-      }
-    }
-  }
-
-  &.line-numbers-mode {
-    .highlight-lines .highlighted {
-      position: relative;
-
-      &::before {
-        content: ' ';
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 3;
-        display: block;
-        width: $lineNumbersWrapperWidth;
-        height: 100%;
-      }
-    }
-
-    pre {
-      vertical-align: middle;
-      // theme-default
-      margin-left: $lineNumbersWrapperWidth;
-      padding-left: 0.5rem;
-    }
-
-    .line-numbers-wrapper {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: $lineNumbersWrapperWidth;
-      padding: 1rem 0;
-      color: var(--code-line-color);
-      line-height: 1.4;
-      text-align: center;
-      transition: color var(--color-transition);
-
-      br {
-        user-select: none;
-      }
-    }
-
-    .line-number {
-      position: relative;
-      z-index: 4;
-      height: 1.4em;
-      font-size: 0.85em;
-      user-select: none;
-    }
-  }
-
-  &:not(.line-numbers-mode) {
-    .line-numbers-wrapper {
-      display: none;
-    }
-  }
-}
-
-for lang in $codeLang {
-  div{'[class~="language-' + lang + '"]'} {
-    &:before {
-      content: '' + lang;
-    }
-  }
-}
-
-// narrow mobile
-@media (max-width: $MQMobileNarrow) {
-  {$contentClass} {
-    div[class*='language-'] {
-      margin: 0.85rem -1.5rem;
-      border-radius: 0;
-    }
-  }
-}
+@require './base';
+@require './light';
+@require './dark';
\ No newline at end of file
diff --git a/packages/theme/styles/index.styl b/packages/theme/styles/index.styl
index 1d7acaf8a..6d87853cd 100644
--- a/packages/theme/styles/index.styl
+++ b/packages/theme/styles/index.styl
@@ -1,6 +1,8 @@
 @require './normalize';
-@require './prefer-color-scheme-config';
+@require './vars';
+@require './code/index';
 @require './theme';
+@require './layout';
 @require './plugins/index';
 @require './theme-color';
 @require '~balloon-css/balloon.min.css';
diff --git a/packages/theme/styles/layout.styl b/packages/theme/styles/layout.styl
new file mode 100644
index 000000000..a2f8adf94
--- /dev/null
+++ b/packages/theme/styles/layout.styl
@@ -0,0 +1,32 @@
+:root {
+  @media (prefers-reduced-motion: no-preference) {
+    scroll-behavior: smooth;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track-piece {
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 10%);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--accent-color);
+}
+
+.hide-in-mobile {
+  @media (max-width: $MQMobile) {
+    display: none !important;
+  }
+}
+
+.hide-in-pad {
+  @media (max-width: $MQNarrow) {
+    display: none !important;
+  }
+}
diff --git a/packages/theme/styles/normalize.styl b/packages/theme/styles/normalize.styl
index dcdd4d72a..0dc3e9f1a 100644
--- a/packages/theme/styles/normalize.styl
+++ b/packages/theme/styles/normalize.styl
@@ -50,7 +50,6 @@ blockquote {
 }
 
 h1 {
-  // narrow mobile
   @media (max-width: $MQMobileNarrow) {
     font-size: 1.9rem;
   }
@@ -81,28 +80,3 @@ tr {
 th, td {
   border-color: var(--grey14);
 }
-
-{$contentClass}:not(.custom) {
-  @extend $wrapper;
-
-  > *:first-child {
-    margin-top: $navbarHeight;
-  }
-
-  a:hover {
-    text-decoration: underline;
-  }
-
-  img {
-    max-width: 100%;
-  }
-}
-
-{$contentClass}.custom {
-  padding: 0;
-  margin: 0;
-
-  img {
-    max-width: 100%;
-  }
-}
diff --git a/packages/theme/styles/palette.styl b/packages/theme/styles/palette.styl
index b321f4922..8bd499601 100644
--- a/packages/theme/styles/palette.styl
+++ b/packages/theme/styles/palette.styl
@@ -1,13 +1,19 @@
 /* basic color */
 $accentColor ?= #3eaf7c;
-$textColor ?= #242424;
+$textColor ?= #2c3e50;
 $darkTextColor ?= #9e9e9e;
 $bgColor ?= #fff;
-$darkBgColor ?= #1e1e1e;
-$bgColorLight ?= #f8f8f8;
-$darkBgColorLight ?= #272727;
+$darkBgColor ?= #1d2025;
+$bgColorLight ?= #fff;
+$darkBgColorLight ?= #252934;
+$bgColorActive ?= #f8f8f8;
+$darkBgColorActive ?= #252934;
+$bgColorBack ?= #f8f8f8;
+$darkBgColorBack ?= #1d2025;
+$bgColorFloat ?= #fff;
+$darkBgColorFloat ?= #252934;
 $bgColorBlur ?= rgba(255, 255, 255, 0.9);
-$darkBgColorBlur ?= rgba(30, 30, 30, 0.9);
+$darkBgColorBlur ?= rgba(29, 32, 37, 0.9);
 $borderColor ?= #eaecef;
 $darkBorderColor ?= #302d28;
 $codeBgColor ?= #ecf4fa;
@@ -16,40 +22,45 @@ $arrowBgColor ?= #ccc;
 $darkArrowBgColor ?= #333;
 /* colors provided by theme */
 $boxShadowColor ?= #f0f1f2;
-$darkBoxShadowColor ?= #0f0e0d;
+$darkBoxShadowColor ?= #282a32;
 $cardShadowColor ?= rgba(0, 0, 0, 0.15);
 $darkCardShadowColor ?= rgba(0, 0, 0, 0.3);
-/* * theme-color */
-$colorPicker ?= {
-  red: #e74c3c,
-  blue: #3498db,
-  green: #3eaf7c,
-  orange: #f39c12,
-  purple: #8e44ad
-};
-/* badge color */
-$badgeTipColor ?= #42b983;
-$badgeWarningColor ?= darken(#ffe564, 35%);
-$badgeErrorColor ?= #DA5961;
 /* layout */
-$navbarHeight ?= 3.6rem;
-$navbarMobileHeight ?= 3.25rem;
+$navbarHeight ?= 3.75rem;
 $navbarHorizontalPadding ?= 1.5rem;
-$navbarMobileHorizontalPadding ?= 1rem;
 $navbarVerticalPadding ?= 0.7rem;
+$navbarMobileHeight ?= 3.25rem;
+$navbarMobileHorizontalPadding ?= 1rem;
 $navbarMobileVerticalPadding ?= 0.5rem;
+// sidebar
 $sidebarWidth ?= 18rem;
-$mobileSidebarWidth ?= $sidebarWidth;
-$contentWidth ?= 820px;
-$homePageWidth ?= 960px;
+$sidebarMobileWidth ?= 16rem;
+// content
+$contentWidth ?= 740px;
+$homePageWidth ?= 1160px;
 /* responsive breakpoints */
 $MQWide ?= 1440px; // wide screen
 $MQNormal ?= 1280px; // desktop
 $MQNarrow ?= 959px; // narrow desktop / iPad
 $MQMobile ?= 719px; // wide mobile
 $MQMobileNarrow ?= 419px; // narrow mobile
+/* font */
+$fontFamily ?= -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', STHeiti, 'Microsoft YaHei', SimSun, sans-serif;
+$fancyFontFamily ?= Georgia Pro, Crimson, Georgia, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', STHeiti, 'Microsoft YaHei', SimSun, sans-serif;
+// code
+$codeFontFamily ?= Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+$colorTransition ?= 0.3s ease;
+$transformTransition ?= 0.3s ease;
 /* code block */
-$lineNumbersWrapperWidth ?= 2.5rem;
+$lineNumbersWidth ?= 2.5rem;
 $codeLang ?= js ts html md vue css sass scss less stylus go java c sh yaml py docker dockerfile makefile;
 /* content class */
 $contentClass ?= '.theme-default-content';
+/* theme-color */
+$colorPicker ?= {
+  red: #e74c3c,
+  blue: #3498db,
+  green: #3eaf7c,
+  orange: #f39c12,
+  purple: #8e44ad
+};
diff --git a/packages/theme/styles/prefer-color-scheme-config.styl b/packages/theme/styles/prefer-color-scheme-config.styl
deleted file mode 100644
index 8dd2b8a67..000000000
--- a/packages/theme/styles/prefer-color-scheme-config.styl
+++ /dev/null
@@ -1,74 +0,0 @@
-:root {
-  --bg-color: $bgColor;
-  --bg-color-light: $bgColorLight;
-  --border-color: $borderColor;
-  --code-bg-color: $codeBgColor;
-  --arrow-bg-color: $arrowBgColor;
-  --box-shadow-color: $boxShadowColor;
-  --card-shadow-color: $cardShadowColor;
-  --text-color: $textColor;
-  --text-color-l10: lighten($textColor, 10%);
-  --text-color-l20: lighten($textColor, 20%);
-  --text-color-l25: lighten($textColor, 25%);
-  --text-color-l40: lighten($textColor, 40%);
-  // constant
-  --black: #000;
-  --dark-grey: #666;
-  --light-grey: #999;
-  --white: #fff;
-  --grey3: #333;
-  --grey12: #bbb;
-  --grey14: #eee;
-  // font
-  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', STHeiti, 'Microsoft YaHei', SimSun, sans-serif;
-  --font-family-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  --font-family-fancy: Georgia Pro, Crimson, Georgia, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', STHeiti, 'Microsoft YaHei', SimSun, sans-serif;
-  --color-transition: 0.3s ease;
-  --transform-transition: 0.3s ease;
-}
-
-html.light {
-  --text-color: $textColor;
-  --bg-color: $bgColor;
-  --bg-color-light: $bgColorLight;
-  --bg-color-blur: $bgColorBlur;
-  --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;
-}
-
-html.dark {
-  --text-color: $darkTextColor;
-  --bg-color: $darkBgColor;
-  --bg-color-light: $darkBgColorLight;
-  --bg-color-blur: $darkBgColorBlur;
-  --border-color: $darkBorderColor;
-  --code-bg-color: $darkCodeBgColor;
-  --arrow-bg-color: $darkArrowBgColor;
-  --box-shadow-color: $darkBoxShadowColor;
-  --card-shadow-color: $darkCardShadowColor;
-  --text-color-l10: lighten($darkTextColor, 10%);
-  --text-color-l20: lighten($darkTextColor, 20%);
-  --text-color-l25: lighten($darkTextColor, 25%);
-  --text-color-l40: lighten($darkTextColor, 40%);
-  --black: #fff;
-  --dark-grey: #999;
-  --light-grey: #666;
-  --white: #000;
-  --grey3: #ccc;
-  --grey12: #333;
-  --grey14: #111;
-}
diff --git a/packages/theme/styles/theme-color.styl b/packages/theme/styles/theme-color.styl
index 22237a0d0..4157307f7 100644
--- a/packages/theme/styles/theme-color.styl
+++ b/packages/theme/styles/theme-color.styl
@@ -1,15 +1,15 @@
 body {
   --accent-color: $accentColor;
-  --accent-color-l10: lighten($accentColor, 10%);
-  --accent-color-d10: darken($accentColor, 10%);
+  --accent-color-light: lighten($accentColor, 10%);
+  --accent-color-dark: darken($accentColor, 10%);
   --accent-color-a15: alpha($accentColor, 15%);
 }
 
 theme-color($themeColor, $colorName) {
   body.theme-{$colorName} {
     --accent-color: $themeColor;
-    --accent-color-l10: lighten($themeColor, 10%);
-    --accent-color-d10: darken($themeColor, 10%);
+    --accent-color-light: lighten($themeColor, 10%);
+    --accent-color-dark: darken($themeColor, 10%);
     --accent-color-a15: alpha($themeColor, 15%);
   }
 }
diff --git a/packages/theme/styles/theme.styl b/packages/theme/styles/theme.styl
index b93032b4b..f2c440509 100644
--- a/packages/theme/styles/theme.styl
+++ b/packages/theme/styles/theme.styl
@@ -1,7 +1,4 @@
 @require '~vuepress-shared/styles/wrapper';
-@require './code/index';
-@require './code/light';
-@require './code/dark';
 
 {$contentClass} {
   &:not(.custom) {
@@ -10,9 +7,9 @@
     > {
       // heading fix
       h1, h2, h3, h4, h5, h6 {
-        margin-top: 0.5rem - $navbarHeight;
+        margin-top: calc(0.5rem - var(--navbar-height));
         margin-bottom: 0.5rem;
-        padding-top: 1rem + $navbarHeight;
+        padding-top: calc(1rem + var(--navbar-height));
         outline: none;
 
         .theme-container.no-navbar & {
@@ -51,45 +48,4 @@
       max-width: 100%;
     }
   }
-
-  // md-enhance footnote fix
-  // footnote anchor position
-  .footnote-item {
-    @media (max-width: $MQMobile) {
-      margin-top: 0rem - $navbarMobileHeight;
-      padding-top: $navbarMobileHeight + 0.5rem;
-    }
-  }
-
-  .footnote-anchor {
-    @media (max-width: $MQMobile) {
-      top: -0.5rem - $navbarMobileHeight;
-    }
-  }
-}
-
-[aria-label][data-balloon-pos] {
-  cursor: help;
-}
-
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-webkit-scrollbar-track-piece {
-  background: rgba(0, 0, 0, 0.1);
-  -webkit-border-radius: 6px;
-}
-
-::-webkit-scrollbar-thumb:vertical {
-  height: 6px;
-  background: var(--accent-color);
-  -webkit-border-radius: 6px;
-}
-
-::-webkit-scrollbar-thumb:horizontal {
-  width: 6px;
-  background: var(--accent-color);
-  -webkit-border-radius: 6px;
 }
diff --git a/packages/theme/styles/vars.styl b/packages/theme/styles/vars.styl
new file mode 100644
index 000000000..0589bd144
--- /dev/null
+++ b/packages/theme/styles/vars.styl
@@ -0,0 +1,69 @@
+:root {
+  --bg-color: $bgColor;
+  --bg-color-light: $bgColorLight;
+  --border-color: $borderColor;
+  --box-shadow-color: $boxShadowColor;
+  --card-shadow-color: $cardShadowColor;
+  // text
+  --text-color: $textColor;
+  --text-color-light: lighten($textColor, 10%);
+  --text-color-lighter: lighten($textColor, 25%);
+  --text-color-bright: lighten($textColor, 40%);
+  // font
+  --font-family: $fontFamily;
+  --font-family-code: $codeFontFamily;
+  --font-family-fancy: $fancyFontFamily;
+  // transition
+  --color-transition: $colorTransition;
+  --transform-transition: $transformTransition;
+  // code
+  --code-bg-color: $codeBgColor;
+  // constant
+  --black: #000;
+  --dark-grey: #666;
+  --light-grey: #999;
+  --white: #fff;
+  --grey3: #333;
+  --grey12: #bbb;
+  --grey14: #eee;
+  // layout
+  --navbar-height: $navbarHeight;
+  --navbar-vertical-padding: $navbarVerticalPadding;
+  --navbar-horizontal-padding: $navbarHorizontalPadding;
+  --sidebar-width: $sidebarWidth;
+  --content-width: $contentWidth;
+  --home-page-width: $homePageWidth;
+  --line-numbers-width: $lineNumbersWidth;
+
+  // override mobile variables
+  @media (max-width: $MQNarrow) {
+    --navbar-height: $navbarMobileHeight;
+    --navbar-vertical-padding: $navbarMobileVerticalPadding;
+    --navbar-horizontal-padding: $navbarMobileHorizontalPadding;
+    --sidebar-width: $sidebarMobileWidth;
+  }
+}
+
+html.dark {
+  --bg-color: $darkBgColor;
+  --bg-color-light: $darkBgColorLight;
+  --bg-color-blur: $darkBgColorBlur;
+  --border-color: $darkBorderColor;
+  --box-shadow-color: $darkBoxShadowColor;
+  --card-shadow-color: $darkCardShadowColor;
+  // text
+  --text-color: $darkTextColor;
+  --text-color-light: lighten($darkTextColor, 10%);
+  --text-color-lighter: lighten($darkTextColor, 25%);
+  --text-color-bright: lighten($darkTextColor, 40%);
+  // code
+  --code-bg-color: $darkCodeBgColor;
+  // constant
+  --black: #fff;
+  --dark-grey: #999;
+  --light-grey: #666;
+  --white: #000;
+  --grey3: #ccc;
+  --grey12: #333;
+  --grey14: #111;
+}