diff --git a/packages/vant-cli/site/common/style/base.less b/packages/vant-cli/site/common/style/base.less
index 56acccccd..b0c4f65f6 100644
--- a/packages/vant-cli/site/common/style/base.less
+++ b/packages/vant-cli/site/common/style/base.less
@@ -1,3 +1,4 @@
+@import './vars.less';
 @import './font.less';
 
 body {
@@ -13,79 +14,6 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
-:root {
-  // Colors
-  --van-doc-black: #000;
-  --van-doc-white: #fff;
-  --van-doc-gray-1: #f7f8fa;
-  --van-doc-gray-2: #f2f3f5;
-  --van-doc-gray-3: #ebedf0;
-  --van-doc-gray-4: #dcdee0;
-  --van-doc-gray-5: #c8c9cc;
-  --van-doc-gray-6: #969799;
-  --van-doc-gray-7: #646566;
-  --van-doc-gray-8: #323233;
-  --van-doc-blue: #1989fa;
-  --van-doc-green: #07c160;
-
-  // Sizes
-  --van-doc-padding: 24px;
-  --van-doc-row-max-width: 1680px;
-  --van-doc-nav-width: 220px;
-  --van-doc-border-radius: 20px;
-  --van-doc-simulator-width: 360px;
-  --van-doc-simulator-height: 620px;
-  --van-doc-header-top-height: 64px;
-}
-
-.van-doc-theme-light {
-  // text
-  --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-link-color: var(--van-doc-blue);
-
-  // background
-  --van-doc-background: #f7f8fa;
-  --van-doc-background-light: var(--van-doc-white);
-  --van-doc-header-background: #011f3c;
-  --van-doc-border-color: var(--van-doc-gray-2);
-  --van-doc-shadow-color: var(--van-doc-gray-3);
-
-  // code
-  --van-doc-code-color: #58727e;
-  --van-doc-code-comment-color: var(--van-doc-gray-6);
-  --van-doc-code-background: var(--van-doc-gray-1);
-
-  // blockquote
-  --van-doc-blockquote-color: #4994df;
-  --van-doc-blockquote-background: #ecf9ff;
-}
-
-.van-doc-theme-dark {
-  // text
-  --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-link-color: #1bb5fe;
-
-  // background
-  --van-doc-background: var(--van-doc-black);
-  --van-doc-background-light: rgba(255, 255, 255, 0.12);
-  --van-doc-header-background: #011428;
-  --van-doc-border-color: #3a3a3c;
-  --van-doc-shadow-color: transparent;
-
-  // code
-  --van-doc-code-color: rgba(200, 200, 200, 0.85);
-  --van-doc-code-comment-color: var(--van-doc-gray-7);
-  --van-doc-code-background: rgba(0, 0, 0, 0.5);
-
-  // blockquote
-  --van-doc-blockquote-color: #bae6fd;
-  --van-doc-blockquote-background: rgba(7, 89, 133, 0.25);
-}
-
 p {
   margin: 0;
 }
diff --git a/packages/vant-cli/site/common/style/vars.less b/packages/vant-cli/site/common/style/vars.less
new file mode 100644
index 000000000..ba47238ca
--- /dev/null
+++ b/packages/vant-cli/site/common/style/vars.less
@@ -0,0 +1,72 @@
+:root {
+  // colors
+  --van-doc-black: #1a1a1a;
+  --van-doc-white: #fff;
+  --van-doc-gray-1: #f7f8fa;
+  --van-doc-gray-2: #f2f3f5;
+  --van-doc-gray-3: #ebedf0;
+  --van-doc-gray-4: #dcdee0;
+  --van-doc-gray-5: #c8c9cc;
+  --van-doc-gray-6: #969799;
+  --van-doc-gray-7: #646566;
+  --van-doc-gray-8: #323233;
+  --van-doc-blue: #1989fa;
+  --van-doc-green: #07c160;
+
+  // sizes
+  --van-doc-padding: 24px;
+  --van-doc-row-max-width: 1680px;
+  --van-doc-nav-width: 220px;
+  --van-doc-border-radius: 20px;
+  --van-doc-simulator-width: 360px;
+  --van-doc-simulator-height: 620px;
+  --van-doc-header-top-height: 64px;
+}
+
+.van-doc-theme-light {
+  // text
+  --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-link-color: var(--van-doc-blue);
+
+  // background
+  --van-doc-background: #f7f8fa;
+  --van-doc-background-light: var(--van-doc-white);
+  --van-doc-header-background: #011f3c;
+  --van-doc-border-color: var(--van-doc-gray-2);
+  --van-doc-shadow-color: var(--van-doc-gray-3);
+
+  // code
+  --van-doc-code-color: #58727e;
+  --van-doc-code-comment-color: var(--van-doc-gray-6);
+  --van-doc-code-background: var(--van-doc-gray-1);
+
+  // blockquote
+  --van-doc-blockquote-color: #4994df;
+  --van-doc-blockquote-background: #ecf9ff;
+}
+
+.van-doc-theme-dark {
+  // text
+  --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-link-color: #1bb5fe;
+
+  // background
+  --van-doc-background: var(--van-doc-black);
+  --van-doc-background-light: rgba(255, 255, 255, 0.06);
+  --van-doc-header-background: #011428;
+  --van-doc-border-color: #3a3a3c;
+  --van-doc-shadow-color: transparent;
+
+  // code
+  --van-doc-code-color: rgba(200, 200, 200, 0.85);
+  --van-doc-code-comment-color: var(--van-doc-gray-7);
+  --van-doc-code-background: rgba(0, 0, 0, 0.24);
+
+  // blockquote
+  --van-doc-blockquote-color: #bae6fd;
+  --van-doc-blockquote-background: rgba(7, 89, 133, 0.25);
+}