diff --git a/packages/vant-cli/site/common/style/vars.less b/packages/vant-cli/site/common/style/vars.less
index d0601ebb0..ca81ab0c0 100644
--- a/packages/vant-cli/site/common/style/vars.less
+++ b/packages/vant-cli/site/common/style/vars.less
@@ -1,6 +1,6 @@
 body {
   // colors
-  --van-doc-black: #1a1a1a;
+  --van-doc-black: #000;
   --van-doc-white: #fff;
   --van-doc-gray-1: #f7f8fa;
   --van-doc-gray-2: #f2f3f5;
@@ -32,11 +32,11 @@ body {
   --van-doc-link-color: var(--van-doc-blue);
 
   // background
-  --van-doc-background: #f7f8fa;
-  --van-doc-background-light: var(--van-doc-white);
+  --van-doc-background: #eeeff2;
+  --van-doc-background-2: var(--van-doc-white);
+  --van-doc-background-3: 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;
@@ -58,10 +58,10 @@ body {
 
   // background
   --van-doc-background: #202124;
-  --van-doc-background-light: rgba(255, 255, 255, 0.06);
+  --van-doc-background-2: rgba(255, 255, 255, 0.06);
+  --van-doc-background-3: rgba(255, 255, 255, 0.1);
   --van-doc-header-background: rgba(1, 31, 60, 0.3);
   --van-doc-border-color: #3a3a3c;
-  --van-doc-shadow-color: transparent;
 
   // code
   --van-doc-code-color: rgba(200, 200, 200, 0.85);
diff --git a/packages/vant-cli/site/desktop/components/Content.vue b/packages/vant-cli/site/desktop/components/Content.vue
index 9ee3b0352..c09032a12 100644
--- a/packages/vant-cli/site/desktop/components/Content.vue
+++ b/packages/vant-cli/site/desktop/components/Content.vue
@@ -44,9 +44,8 @@ export default {
 .van-doc-card {
   margin-bottom: 24px;
   padding: 24px;
-  background-color: var(--van-doc-background-light);
+  background-color: var(--van-doc-background-2);
   border-radius: var(--van-doc-border-radius);
-  box-shadow: 0 8px 12px var(--van-doc-shadow-color);
 
   > p a,
   > ul a,
diff --git a/packages/vant-cli/site/desktop/components/Nav.vue b/packages/vant-cli/site/desktop/components/Nav.vue
index addaa8d2e..596736f09 100644
--- a/packages/vant-cli/site/desktop/components/Nav.vue
+++ b/packages/vant-cli/site/desktop/components/Nav.vue
@@ -79,8 +79,7 @@ export default {
   max-width: var(--van-doc-nav-width);
   padding: 8px 0;
   overflow-y: scroll;
-  background-color: var(--van-doc-background-light);
-  box-shadow: 0 8px 12px var(--van-doc-shadow-color);
+  background-color: var(--van-doc-background-2);
 
   @media (min-width: var(--van-doc-row-max-width)) {
     left: 50%;
diff --git a/packages/vant-cli/site/desktop/components/Simulator.vue b/packages/vant-cli/site/desktop/components/Simulator.vue
index 2bf132239..163e649e7 100644
--- a/packages/vant-cli/site/desktop/components/Simulator.vue
+++ b/packages/vant-cli/site/desktop/components/Simulator.vue
@@ -53,9 +53,8 @@ export default {
   width: var(--van-doc-simulator-width);
   min-width: var(--van-doc-simulator-width);
   overflow: hidden;
-  background: var(--van-doc-background-light);
+  background: var(--van-doc-background-2);
   border-radius: var(--van-doc-border-radius);
-  box-shadow: 0 8px 12px var(--van-doc-shadow-color);
 
   @media (max-width: 1100px) {
     right: auto;
diff --git a/packages/vant-cli/site/mobile/App.vue b/packages/vant-cli/site/mobile/App.vue
index 84fa98292..84c524680 100644
--- a/packages/vant-cli/site/mobile/App.vue
+++ b/packages/vant-cli/site/mobile/App.vue
@@ -45,8 +45,12 @@ body {
   min-width: 100vw;
 }
 
+.van-doc-theme-light {
+  background-color: var(--van-doc-gray-1);
+}
+
 .van-doc-theme-dark {
-  background-color: #000;
+  background-color: var(--van-doc-black);
 }
 
 ::-webkit-scrollbar {
diff --git a/packages/vant-cli/site/mobile/components/DemoHomeNav.vue b/packages/vant-cli/site/mobile/components/DemoHomeNav.vue
index 5a5e80406..5d26a469d 100644
--- a/packages/vant-cli/site/mobile/components/DemoHomeNav.vue
+++ b/packages/vant-cli/site/mobile/components/DemoHomeNav.vue
@@ -59,7 +59,7 @@ export default {
     font-weight: 600;
     font-size: 14px;
     line-height: 40px;
-    background-color: var(--van-doc-background-light);
+    background-color: var(--van-doc-background-3);
     border-radius: 99px;
     transition: opacity 0.3s;
 
diff --git a/packages/vant-cli/site/mobile/components/DemoNav.vue b/packages/vant-cli/site/mobile/components/DemoNav.vue
index aebc2dd29..54a88d7d8 100644
--- a/packages/vant-cli/site/mobile/components/DemoNav.vue
+++ b/packages/vant-cli/site/mobile/components/DemoNav.vue
@@ -42,7 +42,7 @@ export default {
   align-items: center;
   justify-content: center;
   height: 56px;
-  background-color: var(--van-doc-background-light);
+  background-color: var(--van-doc-background-2);
 
   &__title {
     font-weight: 600;
diff --git a/packages/vant/src/button/demo/index.vue b/packages/vant/src/button/demo/index.vue
index 4613486d7..44d707da0 100644
--- a/packages/vant/src/button/demo/index.vue
+++ b/packages/vant/src/button/demo/index.vue
@@ -144,8 +144,6 @@ const t = useTranslate({
 
 <style lang="less">
 .demo-button {
-  background: var(--van-background-2);
-
   .van-button {
     &--large {
       margin-bottom: var(--van-padding-md);
diff --git a/packages/vant/src/col/demo/index.vue b/packages/vant/src/col/demo/index.vue
index e99f37506..bd57624d5 100644
--- a/packages/vant/src/col/demo/index.vue
+++ b/packages/vant/src/col/demo/index.vue
@@ -70,8 +70,6 @@ const t = useTranslate({
 
 <style lang="less">
 .demo-col {
-  background: var(--van-background-2);
-
   .van-doc-demo-block {
     padding: 0 var(--van-padding-md);
   }
diff --git a/packages/vant/src/empty/demo/index.vue b/packages/vant/src/empty/demo/index.vue
index 41e867da8..576a99b26 100644
--- a/packages/vant/src/empty/demo/index.vue
+++ b/packages/vant/src/empty/demo/index.vue
@@ -68,8 +68,6 @@ const active = ref('error');
 
 <style lang="less">
 .demo-empty {
-  background: var(--van-background-2);
-
   .custom-image {
     .van-empty__image {
       width: 90px;
diff --git a/packages/vant/src/loading/demo/index.vue b/packages/vant/src/loading/demo/index.vue
index a37ea1889..1614cb0b5 100644
--- a/packages/vant/src/loading/demo/index.vue
+++ b/packages/vant/src/loading/demo/index.vue
@@ -62,8 +62,6 @@ const t = useTranslate({
 
 <style lang="less">
 .demo-loading {
-  background: var(--van-background-2);
-
   .van-loading {
     display: inline-block;
     margin: 5px 0 5px 20px;
diff --git a/packages/vant/src/notice-bar/demo/index.vue b/packages/vant/src/notice-bar/demo/index.vue
index d4cfb436e..69916a0c5 100644
--- a/packages/vant/src/notice-bar/demo/index.vue
+++ b/packages/vant/src/notice-bar/demo/index.vue
@@ -81,8 +81,6 @@ const t = useTranslate({
 
 <style lang="less">
 .demo-notice-bar {
-  background: var(--van-background-2);
-
   .van-notice-bar:not(:first-of-type) {
     margin-top: 4px;
   }
diff --git a/packages/vant/src/overlay/demo/index.vue b/packages/vant/src/overlay/demo/index.vue
index e300ecbf4..9b6ff0f4a 100644
--- a/packages/vant/src/overlay/demo/index.vue
+++ b/packages/vant/src/overlay/demo/index.vue
@@ -47,8 +47,6 @@ const showEmbedded = ref(false);
 
 <style lang="less">
 .demo-overlay {
-  background: var(--van-background-2);
-
   .wrapper {
     display: flex;
     align-items: center;
diff --git a/packages/vant/src/progress/demo/index.vue b/packages/vant/src/progress/demo/index.vue
index 191631b70..7c57ff5dc 100644
--- a/packages/vant/src/progress/demo/index.vue
+++ b/packages/vant/src/progress/demo/index.vue
@@ -72,8 +72,6 @@ const reduce = () => {
 
 <style lang="less">
 .demo-progress {
-  background: var(--van-background-2);
-
   .van-progress {
     margin: 20px 16px;
 
diff --git a/packages/vant/src/slider/demo/index.vue b/packages/vant/src/slider/demo/index.vue
index 6561c0c1f..7a28e2d86 100644
--- a/packages/vant/src/slider/demo/index.vue
+++ b/packages/vant/src/slider/demo/index.vue
@@ -96,7 +96,6 @@ const onChange = (value: string) => Toast(t('text') + value);
 
 <style lang="less">
 .demo-slider {
-  background: var(--van-background-2);
   user-select: none;
 
   .van-doc-demo-block {