diff --git a/packages/vant-cli/site/common/style/vars.less b/packages/vant-cli/site/common/style/vars.less
index 94a433f8c..d0601ebb0 100644
--- a/packages/vant-cli/site/common/style/vars.less
+++ b/packages/vant-cli/site/common/style/vars.less
@@ -28,6 +28,7 @@ body {
   --van-doc-text-color-1: var(--van-doc-black);
   --van-doc-text-color-2: var(--van-doc-gray-8);
   --van-doc-text-color-3: #34495e;
+  --van-doc-text-color-4: var(--van-doc-gray-6);
   --van-doc-link-color: var(--van-doc-blue);
 
   // background
@@ -52,6 +53,7 @@ body {
   --van-doc-text-color-1: var(--van-doc-white);
   --van-doc-text-color-2: rgba(255, 255, 255, 0.9);
   --van-doc-text-color-3: rgba(255, 255, 255, 0.75);
+  --van-doc-text-color-4: rgba(255, 255, 255, 0.6);
   --van-doc-link-color: #1bb5fe;
 
   // background
diff --git a/packages/vant-cli/site/mobile/App.vue b/packages/vant-cli/site/mobile/App.vue
index 3222b2f1f..5293487b8 100644
--- a/packages/vant-cli/site/mobile/App.vue
+++ b/packages/vant-cli/site/mobile/App.vue
@@ -46,7 +46,7 @@ body {
 }
 
 .van-doc-theme-dark {
-  background-color: var(--van-doc-background);
+  background-color: var(--van-doc-black);
 }
 
 ::-webkit-scrollbar {
diff --git a/packages/vant-cli/site/mobile/components/DemoBlock.vue b/packages/vant-cli/site/mobile/components/DemoBlock.vue
index 1334653c6..c715695b9 100644
--- a/packages/vant-cli/site/mobile/components/DemoBlock.vue
+++ b/packages/vant-cli/site/mobile/components/DemoBlock.vue
@@ -24,7 +24,7 @@ export default {
   &__title {
     margin: 0;
     padding: 32px 16px 16px;
-    color: rgba(69, 90, 100, 0.6);
+    color: var(--van-doc-text-color-4);
     font-weight: normal;
     font-size: 14px;
     line-height: 16px;
diff --git a/packages/vant-cli/site/mobile/components/DemoHome.vue b/packages/vant-cli/site/mobile/components/DemoHome.vue
index eefd64035..707f4840d 100644
--- a/packages/vant-cli/site/mobile/components/DemoHome.vue
+++ b/packages/vant-cli/site/mobile/components/DemoHome.vue
@@ -57,7 +57,6 @@ export default {
   width: 100%;
   min-height: 100vh;
   padding: 46px 20px 20px;
-  background: #fff;
 
   &__title,
   &__desc {
@@ -92,7 +91,7 @@ export default {
 
   &__desc {
     margin: 0 0 40px;
-    color: rgba(69, 90, 100, 0.6);
+    color: var(--van-doc-text-color-4);
     font-size: 14px;
   }
 }
diff --git a/packages/vant-cli/site/mobile/components/DemoHomeNav.vue b/packages/vant-cli/site/mobile/components/DemoHomeNav.vue
index 4452dbb4a..5a5e80406 100644
--- a/packages/vant-cli/site/mobile/components/DemoHomeNav.vue
+++ b/packages/vant-cli/site/mobile/components/DemoHomeNav.vue
@@ -46,7 +46,7 @@ export default {
 .demo-home-nav {
   &__title {
     margin: 24px 0 8px 16px;
-    color: rgba(69, 90, 100, 0.6);
+    color: var(--van-doc-text-color-4);
     font-size: 14px;
   }
 
@@ -55,20 +55,20 @@ export default {
     display: flex;
     margin: 0 0 12px;
     padding-left: 20px;
-    color: #323233;
+    color: var(--van-doc-text-color-3);
     font-weight: 600;
     font-size: 14px;
     line-height: 40px;
-    background: #f7f8fa;
+    background-color: var(--van-doc-background-light);
     border-radius: 99px;
-    transition: background 0.3s;
+    transition: opacity 0.3s;
 
     &:hover {
-      background: darken(#f7f8fa, 3%);
+      opacity: 0.8;
     }
 
     &:active {
-      background: darken(#f7f8fa, 6%);
+      opacity: 0.6;
     }
   }