diff --git a/packages/vant/docs/markdown/theme.en-US.md b/packages/vant/docs/markdown/theme.en-US.md
index 5b442b706..2ca693bcb 100644
--- a/packages/vant/docs/markdown/theme.en-US.md
+++ b/packages/vant/docs/markdown/theme.en-US.md
@@ -41,7 +41,7 @@ There are some [basic variables](<(https://github.com/youzan/vant/blob/dev/packa
 @active-opacity: 0.7;
 @disabled-opacity: 0.5;
 @background-color: @gray-1;
-@background-color-light: #fafafa;
+@background-color-light: @white;
 @text-link-color: #576b95;
 
 // Padding
diff --git a/packages/vant/docs/markdown/theme.zh-CN.md b/packages/vant/docs/markdown/theme.zh-CN.md
index 537ec1c4e..f96f7559d 100644
--- a/packages/vant/docs/markdown/theme.zh-CN.md
+++ b/packages/vant/docs/markdown/theme.zh-CN.md
@@ -47,7 +47,7 @@ Vant 使用了 [Less](http://lesscss.org/) 对样式进行预处理，并内置
 @active-opacity: 0.7;
 @disabled-opacity: 0.5;
 @background-color: @gray-1;
-@background-color-light: #fafafa;
+@background-color-light: @white;
 @text-link-color: #576b95;
 
 // Padding
diff --git a/packages/vant/src/action-bar-icon/var.less b/packages/vant/src/action-bar-icon/var.less
index ff00e23dd..14c0d8ce9 100644
--- a/packages/vant/src/action-bar-icon/var.less
+++ b/packages/vant/src/action-bar-icon/var.less
@@ -7,4 +7,4 @@
 @action-bar-icon-font-size: var(--van-font-size-xs);
 @action-bar-icon-active-color: var(--van-active-color);
 @action-bar-icon-text-color: var(--van-gray-7);
-@action-bar-icon-background-color: var(--van-white);
+@action-bar-icon-background-color: var(--van-background-color-light);
diff --git a/packages/vant/src/action-bar/README.md b/packages/vant/src/action-bar/README.md
index a90b0bad7..04925f120 100644
--- a/packages/vant/src/action-bar/README.md
+++ b/packages/vant/src/action-bar/README.md
@@ -153,7 +153,7 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Default Value | Description |
 | --- | --- | --- |
-| --van-action-bar-background-color | _var(--van-white)_ | - |
+| --van-action-bar-background-color | _var(--van-background-color-light)_ | - |
 | --van-action-bar-height | _50px_ | - |
 | --van-action-bar-icon-width | _48px_ | - |
 | --van-action-bar-icon-height | _100%_ | - |
@@ -162,7 +162,7 @@ The component provides the following CSS variables, which can be used to customi
 | --van-action-bar-icon-font-size | _var(--van-font-size-xs)_ | - |
 | --van-action-bar-icon-active-color | _var(--van-active-color)_ | - |
 | --van-action-bar-icon-text-color | _var(--van-gray-7)_ | - |
-| --van-action-bar-icon-background-color | _var(--van-white)_ | - |
+| --van-action-bar-icon-background-color | _var(--van-background-color-light)_ | - |
 | --van-action-bar-button-height | _40px_ | - |
 | --van-action-bar-button-warning-color | _var(--van-gradient-orange)_ | - |
 | --van-action-bar-button-danger-color | _var(--van-gradient-red)_ | - |
diff --git a/packages/vant/src/action-bar/README.zh-CN.md b/packages/vant/src/action-bar/README.zh-CN.md
index b7c564c9d..da5ca90c6 100644
--- a/packages/vant/src/action-bar/README.zh-CN.md
+++ b/packages/vant/src/action-bar/README.zh-CN.md
@@ -155,18 +155,18 @@ import type {
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                   | 默认值                       | 描述 |
-| -------------------------------------- | ---------------------------- | ---- |
-| --van-action-bar-background-color      | _var(--van-white)_           | -    |
-| --van-action-bar-height                | _50px_                       | -    |
-| --van-action-bar-icon-width            | _48px_                       | -    |
-| --van-action-bar-icon-height           | _100%_                       | -    |
-| --van-action-bar-icon-color            | _var(--van-text-color)_      | -    |
-| --van-action-bar-icon-size             | _18px_                       | -    |
-| --van-action-bar-icon-font-size        | _var(--van-font-size-xs)_    | -    |
-| --van-action-bar-icon-active-color     | _var(--van-active-color)_    | -    |
-| --van-action-bar-icon-text-color       | _var(--van-gray-7)_          | -    |
-| --van-action-bar-icon-background-color | _var(--van-white)_           | -    |
-| --van-action-bar-button-height         | _40px_                       | -    |
-| --van-action-bar-button-warning-color  | _var(--van-gradient-orange)_ | -    |
-| --van-action-bar-button-danger-color   | _var(--van-gradient-red)_    | -    |
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --van-action-bar-background-color | _var(--van-background-color-light)_ | - |
+| --van-action-bar-height | _50px_ | - |
+| --van-action-bar-icon-width | _48px_ | - |
+| --van-action-bar-icon-height | _100%_ | - |
+| --van-action-bar-icon-color | _var(--van-text-color)_ | - |
+| --van-action-bar-icon-size | _18px_ | - |
+| --van-action-bar-icon-font-size | _var(--van-font-size-xs)_ | - |
+| --van-action-bar-icon-active-color | _var(--van-active-color)_ | - |
+| --van-action-bar-icon-text-color | _var(--van-gray-7)_ | - |
+| --van-action-bar-icon-background-color | _var(--van-background-color-light)_ | - |
+| --van-action-bar-button-height | _40px_ | - |
+| --van-action-bar-button-warning-color | _var(--van-gradient-orange)_ | - |
+| --van-action-bar-button-danger-color | _var(--van-gradient-red)_ | - |
diff --git a/packages/vant/src/action-bar/var.less b/packages/vant/src/action-bar/var.less
index eb5000e63..cc3f94832 100644
--- a/packages/vant/src/action-bar/var.less
+++ b/packages/vant/src/action-bar/var.less
@@ -1,4 +1,4 @@
 @import '../style/var.less';
 
-@action-bar-background-color: var(--van-white);
+@action-bar-background-color: var(--van-background-color-light);
 @action-bar-height: 50px;
diff --git a/packages/vant/src/action-sheet/README.md b/packages/vant/src/action-sheet/README.md
index 6616ef43f..e9d0dfcd0 100644
--- a/packages/vant/src/action-sheet/README.md
+++ b/packages/vant/src/action-sheet/README.md
@@ -246,7 +246,7 @@ The component provides the following CSS variables, which can be used to customi
 | --van-action-sheet-description-color | _var(--van-gray-6)_ | - |
 | --van-action-sheet-description-font-size | _var(--van-font-size-md)_ | - |
 | --van-action-sheet-description-line-height | _var(--van-line-height-md)_ | - |
-| --van-action-sheet-item-background | _var(--van-white)_ | - |
+| --van-action-sheet-item-background | _var(--van-background-color-light)_ | - |
 | --van-action-sheet-item-font-size | _var(--van-font-size-lg)_ | - |
 | --van-action-sheet-item-line-height | _var(--van-line-height-lg)_ | - |
 | --van-action-sheet-item-text-color | _var(--van-text-color)_ | - |
diff --git a/packages/vant/src/action-sheet/README.zh-CN.md b/packages/vant/src/action-sheet/README.zh-CN.md
index 9d06fa17d..0d10d1297 100644
--- a/packages/vant/src/action-sheet/README.zh-CN.md
+++ b/packages/vant/src/action-sheet/README.zh-CN.md
@@ -258,7 +258,7 @@ import type { ActionSheetProps, ActionSheetAction } from 'vant';
 | --van-action-sheet-description-color | _var(--van-gray-6)_ | - |
 | --van-action-sheet-description-font-size | _var(--van-font-size-md)_ | - |
 | --van-action-sheet-description-line-height | _var(--van-line-height-md)_ | - |
-| --van-action-sheet-item-background | _var(--van-white)_ | - |
+| --van-action-sheet-item-background | _var(--van-background-color-light)_ | - |
 | --van-action-sheet-item-font-size | _var(--van-font-size-lg)_ | - |
 | --van-action-sheet-item-line-height | _var(--van-line-height-lg)_ | - |
 | --van-action-sheet-item-text-color | _var(--van-text-color)_ | - |
diff --git a/packages/vant/src/action-sheet/var.less b/packages/vant/src/action-sheet/var.less
index 6f2191f94..6ee0d3331 100644
--- a/packages/vant/src/action-sheet/var.less
+++ b/packages/vant/src/action-sheet/var.less
@@ -6,7 +6,7 @@
 @action-sheet-description-color: var(--van-gray-6);
 @action-sheet-description-font-size: var(--van-font-size-md);
 @action-sheet-description-line-height: var(--van-line-height-md);
-@action-sheet-item-background: var(--van-white);
+@action-sheet-item-background: var(--van-background-color-light);
 @action-sheet-item-font-size: var(--van-font-size-lg);
 @action-sheet-item-line-height: var(--van-line-height-lg);
 @action-sheet-item-text-color: var(--van-text-color);
diff --git a/packages/vant/src/address-list/index.less b/packages/vant/src/address-list/index.less
index 986c43bf7..0e2331a2b 100644
--- a/packages/vant/src/address-list/index.less
+++ b/packages/vant/src/address-list/index.less
@@ -30,7 +30,7 @@
     width: 100%;
     padding-left: var(--van-padding-md);
     padding-right: var(--van-padding-md);
-    background-color: var(--van-white);
+    background-color: var(--van-background-color-light);
   }
 
   &__add {
@@ -48,7 +48,7 @@
 
 .van-address-item {
   padding: var(--van-address-list-item-padding);
-  background-color: var(--van-white);
+  background-color: var(--van-background-color-light);
   border-radius: var(--van-border-radius-lg);
 
   &:not(:last-child) {
diff --git a/packages/vant/src/badge/demo/index.vue b/packages/vant/src/badge/demo/index.vue
index 64d1fe52c..9b6c501a0 100644
--- a/packages/vant/src/badge/demo/index.vue
+++ b/packages/vant/src/badge/demo/index.vue
@@ -88,7 +88,7 @@ const t = useTranslate({
 
 <style lang="less">
 .demo-badge {
-  background-color: var(--van-white);
+  background-color: var(--van-background-color-light);
 
   .van-badge__wrapper {
     margin-left: var(--van-padding-md);
diff --git a/packages/vant/src/button/README.md b/packages/vant/src/button/README.md
index 3e91efc8b..4d30b75c8 100644
--- a/packages/vant/src/button/README.md
+++ b/packages/vant/src/button/README.md
@@ -184,7 +184,7 @@ The component provides the following CSS variables, which can be used to customi
 | --van-button-default-line-height | _1.2_ | - |
 | --van-button-default-font-size | _var(--van-font-size-lg)_ | - |
 | --van-button-default-color | _var(--van-text-color)_ | - |
-| --van-button-default-background-color | _var(--van-white)_ | - |
+| --van-button-default-background-color | _var(--van-background-color-light)_ | - |
 | --van-button-default-border-color | _var(--van-border-color)_ | - |
 | --van-button-primary-color | _var(--van-white)_ | - |
 | --van-button-primary-background-color | _var(--van-primary-color)_ | - |
diff --git a/packages/vant/src/button/README.zh-CN.md b/packages/vant/src/button/README.zh-CN.md
index 01febed5b..0e12abcda 100644
--- a/packages/vant/src/button/README.zh-CN.md
+++ b/packages/vant/src/button/README.zh-CN.md
@@ -207,7 +207,7 @@ import type {
 | --van-button-default-line-height | _1.2_ | - |
 | --van-button-default-font-size | _var(--van-font-size-lg)_ | - |
 | --van-button-default-color | _var(--van-text-color)_ | - |
-| --van-button-default-background-color | _var(--van-white)_ | - |
+| --van-button-default-background-color | _var(--van-background-color-light)_ | - |
 | --van-button-default-border-color | _var(--van-border-color)_ | - |
 | --van-button-primary-color | _var(--van-white)_ | - |
 | --van-button-primary-background-color | _var(--van-primary-color)_ | - |
diff --git a/packages/vant/src/button/demo/index.vue b/packages/vant/src/button/demo/index.vue
index 3a9df53e1..b2d92f8f6 100644
--- a/packages/vant/src/button/demo/index.vue
+++ b/packages/vant/src/button/demo/index.vue
@@ -144,7 +144,7 @@ const t = useTranslate({
 
 <style lang="less">
 .demo-button {
-  background: var(--van-white);
+  background: var(--van-background-color-light);
 
   .van-button {
     &--large {
diff --git a/packages/vant/src/button/var.less b/packages/vant/src/button/var.less
index bde17b441..3ae004ea5 100644
--- a/packages/vant/src/button/var.less
+++ b/packages/vant/src/button/var.less
@@ -13,7 +13,7 @@
 @button-default-line-height: 1.2;
 @button-default-font-size: var(--van-font-size-lg);
 @button-default-color: var(--van-text-color);
-@button-default-background-color: var(--van-white);
+@button-default-background-color: var(--van-background-color-light);
 @button-default-border-color: var(--van-border-color);
 @button-primary-color: var(--van-white);
 @button-primary-background-color: var(--van-primary-color);
diff --git a/packages/vant/src/calendar/README.md b/packages/vant/src/calendar/README.md
index 1f6d4650a..bde19ba96 100644
--- a/packages/vant/src/calendar/README.md
+++ b/packages/vant/src/calendar/README.md
@@ -381,7 +381,7 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Default Value | Description |
 | --- | --- | --- |
-| --van-calendar-background-color | _var(--van-white)_ | - |
+| --van-calendar-background-color | _var(--van-background-color-light)_ | - |
 | --van-calendar-popup-height | _80%_ | - |
 | --van-calendar-header-box-shadow | _0 2px 10px rgba(125, 126, 128, 0.16)_ | - |
 | --van-calendar-header-title-height | _44px_ | - |
diff --git a/packages/vant/src/calendar/README.zh-CN.md b/packages/vant/src/calendar/README.zh-CN.md
index 48aaafe36..5611753b3 100644
--- a/packages/vant/src/calendar/README.zh-CN.md
+++ b/packages/vant/src/calendar/README.zh-CN.md
@@ -387,7 +387,7 @@ calendarRef.value?.reset();
 
 | 名称 | 默认值 | 描述 |
 | --- | --- | --- |
-| --van-calendar-background-color | _var(--van-white)_ | - |
+| --van-calendar-background-color | _var(--van-background-color-light)_ | - |
 | --van-calendar-popup-height | _80%_ | - |
 | --van-calendar-header-box-shadow | _0 2px 10px rgba(125, 126, 128, 0.16)_ | - |
 | --van-calendar-header-title-height | _44px_ | - |
diff --git a/packages/vant/src/calendar/var.less b/packages/vant/src/calendar/var.less
index 1dc9b3895..1ab5ae283 100644
--- a/packages/vant/src/calendar/var.less
+++ b/packages/vant/src/calendar/var.less
@@ -1,6 +1,6 @@
 @import '../style/var.less';
 
-@calendar-background-color: var(--van-white);
+@calendar-background-color: var(--van-background-color-light);
 @calendar-popup-height: 80%;
 @calendar-header-box-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);
 @calendar-header-title-height: 44px;
diff --git a/packages/vant/src/card/demo/index.vue b/packages/vant/src/card/demo/index.vue
index 3e5b50348..e47f5a540 100644
--- a/packages/vant/src/card/demo/index.vue
+++ b/packages/vant/src/card/demo/index.vue
@@ -75,6 +75,6 @@ const imageURL = 'https://img.yzcdn.cn/vant/ipad.jpeg';
 
 <style lang="less">
 .demo-card {
-  background-color: var(--van-white);
+  background-color: var(--van-background-color-light);
 }
 </style>
diff --git a/packages/vant/src/cell-group/var.less b/packages/vant/src/cell-group/var.less
index 4ce67a1f9..35c451f22 100644
--- a/packages/vant/src/cell-group/var.less
+++ b/packages/vant/src/cell-group/var.less
@@ -1,6 +1,6 @@
 @import '../style/var.less';
 
-@cell-group-background-color: var(--van-white);
+@cell-group-background-color: var(--van-background-color-light);
 @cell-group-title-color: var(--van-gray-6);
 @cell-group-title-padding: var(--van-padding-md) var(--van-padding-md)
   var(--van-padding-xs);
diff --git a/packages/vant/src/cell/README.md b/packages/vant/src/cell/README.md
index 576d0429d..7e78fe6f9 100644
--- a/packages/vant/src/cell/README.md
+++ b/packages/vant/src/cell/README.md
@@ -213,7 +213,7 @@ The component provides the following CSS variables, which can be used to customi
 | --van-cell-vertical-padding | _10px_ | - |
 | --van-cell-horizontal-padding | _var(--van-padding-md)_ | - |
 | --van-cell-text-color | _var(--van-text-color)_ | - |
-| --van-cell-background-color | _var(--van-white)_ | - |
+| --van-cell-background-color | _var(--van-background-color-light)_ | - |
 | --van-cell-border-color | _var(--van-border-color)_ | - |
 | --van-cell-active-color | _var(--van-active-color)_ | - |
 | --van-cell-required-color | _var(--van-danger-color)_ | - |
@@ -227,7 +227,7 @@ The component provides the following CSS variables, which can be used to customi
 | --van-cell-large-vertical-padding | _var(--van-padding-sm)_ | - |
 | --van-cell-large-title-font-size | _var(--van-font-size-lg)_ | - |
 | --van-cell-large-label-font-size | _var(--van-font-size-md)_ | - |
-| --van-cell-group-background-color | _var(--van-white)_ | - |
+| --van-cell-group-background-color | _var(--van-background-color-light)_ | - |
 | --van-cell-group-title-color | _var(--van-gray-6)_ | - |
 | --van-cell-group-title-padding | _var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs)_ | - |
 | --van-cell-group-title-font-size | _var(--van-font-size-md)_ | - |
diff --git a/packages/vant/src/cell/README.zh-CN.md b/packages/vant/src/cell/README.zh-CN.md
index e97633565..b420e9c9e 100644
--- a/packages/vant/src/cell/README.zh-CN.md
+++ b/packages/vant/src/cell/README.zh-CN.md
@@ -218,7 +218,7 @@ import type { CellProps, CellGroupProps, CellArrowDirection } from 'vant';
 | --van-cell-vertical-padding | _10px_ | - |
 | --van-cell-horizontal-padding | _var(--van-padding-md)_ | - |
 | --van-cell-text-color | _var(--van-text-color)_ | - |
-| --van-cell-background-color | _var(--van-white)_ | - |
+| --van-cell-background-color | _var(--van-background-color-light)_ | - |
 | --van-cell-border-color | _var(--van-border-color)_ | - |
 | --van-cell-active-color | _var(--van-active-color)_ | - |
 | --van-cell-required-color | _var(--van-danger-color)_ | - |
@@ -232,7 +232,7 @@ import type { CellProps, CellGroupProps, CellArrowDirection } from 'vant';
 | --van-cell-large-vertical-padding | _var(--van-padding-sm)_ | - |
 | --van-cell-large-title-font-size | _var(--van-font-size-lg)_ | - |
 | --van-cell-large-label-font-size | _var(--van-font-size-md)_ | - |
-| --van-cell-group-background-color | _var(--van-white)_ | - |
+| --van-cell-group-background-color | _var(--van-background-color-light)_ | - |
 | --van-cell-group-title-color | _var(--van-gray-6)_ | - |
 | --van-cell-group-title-padding | _var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs)_ | - |
 | --van-cell-group-title-font-size | _var(--van-font-size-md)_ | - |
diff --git a/packages/vant/src/cell/var.less b/packages/vant/src/cell/var.less
index bf00509a8..d986301a6 100644
--- a/packages/vant/src/cell/var.less
+++ b/packages/vant/src/cell/var.less
@@ -5,7 +5,7 @@
 @cell-vertical-padding: 10px;
 @cell-horizontal-padding: var(--van-padding-md);
 @cell-text-color: var(--van-text-color);
-@cell-background-color: var(--van-white);
+@cell-background-color: var(--van-background-color-light);
 @cell-border-color: var(--van-border-color);
 @cell-active-color: var(--van-active-color);
 @cell-required-color: var(--van-danger-color);
diff --git a/packages/vant/src/col/demo/index.vue b/packages/vant/src/col/demo/index.vue
index d31ae7d16..33a1659d4 100644
--- a/packages/vant/src/col/demo/index.vue
+++ b/packages/vant/src/col/demo/index.vue
@@ -70,7 +70,7 @@ const t = useTranslate({
 
 <style lang="less">
 .demo-col {
-  background: var(--van-white);
+  background: var(--van-background-color-light);
 
   .van-doc-demo-block {
     padding: 0 var(--van-padding-md);
diff --git a/packages/vant/src/collapse-item/var.less b/packages/vant/src/collapse-item/var.less
index 2d9d8478f..bdbe96d7b 100644
--- a/packages/vant/src/collapse-item/var.less
+++ b/packages/vant/src/collapse-item/var.less
@@ -5,5 +5,5 @@
 @collapse-item-content-font-size: var(--van-font-size-md);
 @collapse-item-content-line-height: 1.5;
 @collapse-item-content-text-color: var(--van-gray-6);
-@collapse-item-content-background-color: var(--van-white);
+@collapse-item-content-background-color: var(--van-background-color-light);
 @collapse-item-title-disabled-color: var(--van-gray-5);
diff --git a/packages/vant/src/collapse/README.md b/packages/vant/src/collapse/README.md
index 1bc57e88d..69ca68fc4 100644
--- a/packages/vant/src/collapse/README.md
+++ b/packages/vant/src/collapse/README.md
@@ -197,5 +197,5 @@ The component provides the following CSS variables, which can be used to customi
 | --van-collapse-item-content-font-size | _var(--van-font-size-md)_ | - |
 | --van-collapse-item-content-line-height | _1.5_ | - |
 | --van-collapse-item-content-text-color | _var(--van-gray-6)_ | - |
-| --van-collapse-item-content-background-color | _var(--van-white)_ | - |
+| --van-collapse-item-content-background-color | _var(--van-background-color-light)_ | - |
 | --van-collapse-item-title-disabled-color | _var(--van-gray-5)_ | - |
diff --git a/packages/vant/src/collapse/README.zh-CN.md b/packages/vant/src/collapse/README.zh-CN.md
index 83caac695..d5b909249 100644
--- a/packages/vant/src/collapse/README.zh-CN.md
+++ b/packages/vant/src/collapse/README.zh-CN.md
@@ -195,5 +195,5 @@ collapseItemRef.value?.toggle();
 | --van-collapse-item-content-font-size | _var(--van-font-size-md)_ | - |
 | --van-collapse-item-content-line-height | _1.5_ | - |
 | --van-collapse-item-content-text-color | _var(--van-gray-6)_ | - |
-| --van-collapse-item-content-background-color | _var(--van-white)_ | - |
+| --van-collapse-item-content-background-color | _var(--van-background-color-light)_ | - |
 | --van-collapse-item-title-disabled-color | _var(--van-gray-5)_ | - |
diff --git a/packages/vant/src/config-provider/README.md b/packages/vant/src/config-provider/README.md
index 5c613591e..4e5f9c0b6 100644
--- a/packages/vant/src/config-provider/README.md
+++ b/packages/vant/src/config-provider/README.md
@@ -160,7 +160,7 @@ There are all **Basic Variables** below, for component CSS Variables, please ref
 --van-active-opacity: 0.7;
 --van-disabled-opacity: 0.5;
 --van-background-color: var(--van-gray-1);
---van-background-color-light: #fafafa;
+--van-background-color-light: var(--van-white);
 --van-text-link-color: #576b95;
 
 // Padding
diff --git a/packages/vant/src/config-provider/README.zh-CN.md b/packages/vant/src/config-provider/README.zh-CN.md
index daefe66cf..e6e993b81 100644
--- a/packages/vant/src/config-provider/README.zh-CN.md
+++ b/packages/vant/src/config-provider/README.zh-CN.md
@@ -162,7 +162,7 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 --van-active-opacity: 0.7;
 --van-disabled-opacity: 0.5;
 --van-background-color: var(--van-gray-1);
---van-background-color-light: #fafafa;
+--van-background-color-light: var(--van-white);
 --van-text-link-color: #576b95;
 
 // Padding
diff --git a/packages/vant/src/contact-list/index.less b/packages/vant/src/contact-list/index.less
index e66ec6bfe..95d2af60b 100644
--- a/packages/vant/src/contact-list/index.less
+++ b/packages/vant/src/contact-list/index.less
@@ -57,7 +57,7 @@
     z-index: var(--van-contact-list-add-button-z-index);
     padding-left: var(--van-padding-md);
     padding-right: var(--van-padding-md);
-    background-color: var(--van-white);
+    background-color: var(--van-background-color-light);
   }
 
   &__add {
diff --git a/packages/vant/src/count-down/demo/index.vue b/packages/vant/src/count-down/demo/index.vue
index 9e9fcc424..fa27148b5 100644
--- a/packages/vant/src/count-down/demo/index.vue
+++ b/packages/vant/src/count-down/demo/index.vue
@@ -91,7 +91,7 @@ const onFinish = () => Toast(t('finished'));
 
 <style lang="less">
 .demo-count-down {
-  background-color: var(--van-white);
+  background-color: var(--van-background-color-light);
 
   .van-count-down {
     margin-left: var(--van-padding-md);
diff --git a/packages/vant/src/coupon-list/README.md b/packages/vant/src/coupon-list/README.md
index d81849000..87832fb10 100644
--- a/packages/vant/src/coupon-list/README.md
+++ b/packages/vant/src/coupon-list/README.md
@@ -168,7 +168,7 @@ The component provides the following CSS variables, which can be used to customi
 | --van-coupon-margin | _0 var(--van-padding-sm) var(--van-padding-sm)_ | - |
 | --van-coupon-content-height | _84px_ | - |
 | --van-coupon-content-padding | _14px 0_ | - |
-| --van-coupon-background-color | _var(--van-white)_ | - |
+| --van-coupon-background-color | _var(--van-background-color-light)_ | - |
 | --van-coupon-active-background-color | _var(--van-active-color)_ | - |
 | --van-coupon-border-radius | _var(--van-border-radius-lg)_ | - |
 | --van-coupon-box-shadow | _0 0 4px rgba(0, 0, 0, 0.1)_ | - |
diff --git a/packages/vant/src/coupon-list/README.zh-CN.md b/packages/vant/src/coupon-list/README.zh-CN.md
index cca28088e..e284c7e32 100644
--- a/packages/vant/src/coupon-list/README.zh-CN.md
+++ b/packages/vant/src/coupon-list/README.zh-CN.md
@@ -170,7 +170,7 @@ import type { CouponCellProps, CouponListProps } from 'vant';
 | --van-coupon-margin | _0 var(--van-padding-sm) var(--van-padding-sm)_ | - |
 | --van-coupon-content-height | _84px_ | - |
 | --van-coupon-content-padding | _14px 0_ | - |
-| --van-coupon-background-color | _var(--van-white)_ | - |
+| --van-coupon-background-color | _var(--van-background-color-light)_ | - |
 | --van-coupon-active-background-color | _var(--van-active-color)_ | - |
 | --van-coupon-border-radius | _var(--van-border-radius-lg)_ | - |
 | --van-coupon-box-shadow | _0 0 4px rgba(0, 0, 0, 0.1)_ | - |
diff --git a/packages/vant/src/coupon-list/index.less b/packages/vant/src/coupon-list/index.less
index 9b9822a6f..9fa7f7fc5 100644
--- a/packages/vant/src/coupon-list/index.less
+++ b/packages/vant/src/coupon-list/index.less
@@ -39,7 +39,7 @@
   &__exchange-bar {
     display: flex;
     align-items: center;
-    background-color: var(--van-white);
+    background-color: var(--van-background-color-light);
   }
 
   &__exchange {
@@ -79,7 +79,7 @@
     width: 100%;
     padding: 5px var(--van-padding-md);
     font-weight: var(--van-font-weight-bold);
-    background-color: var(--van-white);
+    background-color: var(--van-background-color-light);
   }
 
   &__close {
diff --git a/packages/vant/src/coupon/var.less b/packages/vant/src/coupon/var.less
index 2af671de7..454ab3dfb 100644
--- a/packages/vant/src/coupon/var.less
+++ b/packages/vant/src/coupon/var.less
@@ -3,7 +3,7 @@
 @coupon-margin: 0 var(--van-padding-sm) var(--van-padding-sm);
 @coupon-content-height: 84px;
 @coupon-content-padding: 14px 0;
-@coupon-background-color: var(--van-white);
+@coupon-background-color: var(--van-background-color-light);
 @coupon-active-background-color: var(--van-active-color);
 @coupon-border-radius: var(--van-border-radius-lg);
 @coupon-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
diff --git a/packages/vant/src/dialog/README.md b/packages/vant/src/dialog/README.md
index e49609a04..2caec7b5a 100644
--- a/packages/vant/src/dialog/README.md
+++ b/packages/vant/src/dialog/README.md
@@ -241,7 +241,7 @@ The component provides the following CSS variables, which can be used to customi
 | --van-dialog-font-size | _var(--van-font-size-lg)_ | - |
 | --van-dialog-transition | _var(--van-animation-duration-base)_ | - |
 | --van-dialog-border-radius | _16px_ | - |
-| --van-dialog-background-color | _var(--van-white)_ | - |
+| --van-dialog-background-color | _var(--van-background-color-light)_ | - |
 | --van-dialog-header-font-weight | _var(--van-font-weight-bold)_ | - |
 | --van-dialog-header-line-height | _24px_ | - |
 | --van-dialog-header-padding-top | _26px_ | - |
diff --git a/packages/vant/src/dialog/README.zh-CN.md b/packages/vant/src/dialog/README.zh-CN.md
index 3c0ead1f8..8cb80eadd 100644
--- a/packages/vant/src/dialog/README.zh-CN.md
+++ b/packages/vant/src/dialog/README.zh-CN.md
@@ -291,7 +291,7 @@ import type {
 | --van-dialog-font-size | _var(--van-font-size-lg)_ | - |
 | --van-dialog-transition | _var(--van-animation-duration-base)_ | - |
 | --van-dialog-border-radius | _16px_ | - |
-| --van-dialog-background-color | _var(--van-white)_ | - |
+| --van-dialog-background-color | _var(--van-background-color-light)_ | - |
 | --van-dialog-header-font-weight | _var(--van-font-weight-bold)_ | - |
 | --van-dialog-header-line-height | _24px_ | - |
 | --van-dialog-header-padding-top | _26px_ | - |
diff --git a/packages/vant/src/dialog/var.less b/packages/vant/src/dialog/var.less
index 396f87b3a..d0e26b92d 100644
--- a/packages/vant/src/dialog/var.less
+++ b/packages/vant/src/dialog/var.less
@@ -5,7 +5,7 @@
 @dialog-font-size: var(--van-font-size-lg);
 @dialog-transition: var(--van-animation-duration-base);
 @dialog-border-radius: 16px;
-@dialog-background-color: var(--van-white);
+@dialog-background-color: var(--van-background-color-light);
 @dialog-header-font-weight: var(--van-font-weight-bold);
 @dialog-header-line-height: 24px;
 @dialog-header-padding-top: 26px;
diff --git a/packages/vant/src/divider/demo/index.vue b/packages/vant/src/divider/demo/index.vue
index f3d481db2..a7b4aac84 100644
--- a/packages/vant/src/divider/demo/index.vue
+++ b/packages/vant/src/divider/demo/index.vue
@@ -58,7 +58,7 @@ const t = useTranslate({
 
 <style lang="less">
 .demo-divider {
-  background-color: var(--van-white);
+  background-color: var(--van-background-color-light);
 
   .van-doc-demo-block__title {
     padding-top: var(--van-padding-md);
diff --git a/packages/vant/src/dropdown-menu/README.md b/packages/vant/src/dropdown-menu/README.md
index ca412d611..0e23e1437 100644
--- a/packages/vant/src/dropdown-menu/README.md
+++ b/packages/vant/src/dropdown-menu/README.md
@@ -233,7 +233,7 @@ The component provides the following CSS variables, which can be used to customi
 | Name | Default Value | Description |
 | --- | --- | --- |
 | --van-dropdown-menu-height | _48px_ | - |
-| --van-dropdown-menu-background-color | _var(--van-white)_ | - |
+| --van-dropdown-menu-background-color | _var(--van-background-color-light)_ | - |
 | --van-dropdown-menu-box-shadow | _0 2px 12px fade(var(--van-gray-7), 12)_ | - |
 | --van-dropdown-menu-title-font-size | _15px_ | - |
 | --van-dropdown-menu-title-text-color | _var(--van-text-color)_ | - |
diff --git a/packages/vant/src/dropdown-menu/README.zh-CN.md b/packages/vant/src/dropdown-menu/README.zh-CN.md
index 5efaedfcc..6e71c3fb2 100644
--- a/packages/vant/src/dropdown-menu/README.zh-CN.md
+++ b/packages/vant/src/dropdown-menu/README.zh-CN.md
@@ -237,7 +237,7 @@ dropdownItemRef.value?.toggle();
 | 名称 | 默认值 | 描述 |
 | --- | --- | --- |
 | --van-dropdown-menu-height | _48px_ | - |
-| --van-dropdown-menu-background-color | _var(--van-white)_ | - |
+| --van-dropdown-menu-background-color | _var(--van-background-color-light)_ | - |
 | --van-dropdown-menu-box-shadow | _0 2px 12px fade(var(--van-gray-7), 12)_ | - |
 | --van-dropdown-menu-title-font-size | _15px_ | - |
 | --van-dropdown-menu-title-text-color | _var(--van-text-color)_ | - |
diff --git a/packages/vant/src/dropdown-menu/var.less b/packages/vant/src/dropdown-menu/var.less
index 4e9f4eca3..d929b5ae7 100644
--- a/packages/vant/src/dropdown-menu/var.less
+++ b/packages/vant/src/dropdown-menu/var.less
@@ -1,7 +1,7 @@
 @import '../style/var.less';
 
 @dropdown-menu-height: 48px;
-@dropdown-menu-background-color: var(--van-white);
+@dropdown-menu-background-color: var(--van-background-color-light);
 @dropdown-menu-box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
 @dropdown-menu-title-font-size: 15px;
 @dropdown-menu-title-text-color: var(--van-text-color);
diff --git a/packages/vant/src/empty/demo/index.vue b/packages/vant/src/empty/demo/index.vue
index 49bb0997a..0290533a6 100644
--- a/packages/vant/src/empty/demo/index.vue
+++ b/packages/vant/src/empty/demo/index.vue
@@ -68,7 +68,7 @@ const active = ref('error');
 
 <style lang="less">
 .demo-empty {
-  background: var(--van-white);
+  background: var(--van-background-color-light);
 
   .custom-image {
     .van-empty__image {
diff --git a/packages/vant/src/grid-item/var.less b/packages/vant/src/grid-item/var.less
index bbe6fdec3..9fcc77036 100644
--- a/packages/vant/src/grid-item/var.less
+++ b/packages/vant/src/grid-item/var.less
@@ -1,7 +1,7 @@
 @import '../style/var.less';
 
 @grid-item-content-padding: var(--van-padding-md) var(--van-padding-xs);
-@grid-item-content-background-color: var(--van-white);
+@grid-item-content-background-color: var(--van-background-color-light);
 @grid-item-content-active-color: var(--van-active-color);
 @grid-item-icon-size: 28px;
 @grid-item-text-color: var(--van-gray-7);
diff --git a/packages/vant/src/grid/README.md b/packages/vant/src/grid/README.md
index 33e1504e6..7ae014218 100644
--- a/packages/vant/src/grid/README.md
+++ b/packages/vant/src/grid/README.md
@@ -159,7 +159,7 @@ The component provides the following CSS variables, which can be used to customi
 | Name | Default Value | Description |
 | --- | --- | --- |
 | --van-grid-item-content-padding | _var(--van-padding-md) var(--van-padding-xs)_ | - |
-| --van-grid-item-content-background-color | _var(--van-white)_ | - |
+| --van-grid-item-content-background-color | _var(--van-background-color-light)_ | - |
 | --van-grid-item-content-active-color | _var(--van-active-color)_ | - |
 | --van-grid-item-icon-size | _28px_ | - |
 | --van-grid-item-text-color | _var(--van-gray-7)_ | - |
diff --git a/packages/vant/src/grid/README.zh-CN.md b/packages/vant/src/grid/README.zh-CN.md
index 552921863..206e53140 100644
--- a/packages/vant/src/grid/README.zh-CN.md
+++ b/packages/vant/src/grid/README.zh-CN.md
@@ -175,7 +175,7 @@ import type { GridProps, GridDirection, GridItemProps } from 'vant';
 | 名称 | 默认值 | 描述 |
 | --- | --- | --- |
 | --van-grid-item-content-padding | _var(--van-padding-md) var(--van-padding-xs)_ | - |
-| --van-grid-item-content-background-color | _var(--van-white)_ | - |
+| --van-grid-item-content-background-color | _var(--van-background-color-light)_ | - |
 | --van-grid-item-content-active-color | _var(--van-active-color)_ | - |
 | --van-grid-item-icon-size | _28px_ | - |
 | --van-grid-item-text-color | _var(--van-gray-7)_ | - |
diff --git a/packages/vant/src/image/demo/index.vue b/packages/vant/src/image/demo/index.vue
index 07fdece89..c076cbe94 100644
--- a/packages/vant/src/image/demo/index.vue
+++ b/packages/vant/src/image/demo/index.vue
@@ -93,7 +93,7 @@ const fits = ['contain', 'cover', 'fill', 'none', 'scale-down'] as const;
 <style lang="less">
 .demo-image {
   overflow-x: hidden;
-  background-color: var(--van-white);
+  background-color: var(--van-background-color-light);
 
   .van-row {
     padding: 0 var(--van-padding-md);
diff --git a/packages/vant/src/index-anchor/var.less b/packages/vant/src/index-anchor/var.less
index 6856f315d..78dea53d4 100644
--- a/packages/vant/src/index-anchor/var.less
+++ b/packages/vant/src/index-anchor/var.less
@@ -8,4 +8,4 @@
 @index-anchor-line-height: 32px;
 @index-anchor-background-color: transparent;
 @index-anchor-sticky-text-color: var(--van-danger-color);
-@index-anchor-sticky-background-color: var(--van-white);
+@index-anchor-sticky-background-color: var(--van-background-color-light);
diff --git a/packages/vant/src/index-bar/README.md b/packages/vant/src/index-bar/README.md
index cf0b99022..ac080eafe 100644
--- a/packages/vant/src/index-bar/README.md
+++ b/packages/vant/src/index-bar/README.md
@@ -144,4 +144,4 @@ The component provides the following CSS variables, which can be used to customi
 | --van-index-anchor-line-height | _32px_ | - |
 | --van-index-anchor-background-color | _transparent_ | - |
 | --van-index-anchor-sticky-text-color | _var(--van-danger-color)_ | - |
-| --van-index-anchor-sticky-background-color | _var(--van-white)_ | - |
+| --van-index-anchor-sticky-background-color | _var(--van-background-color-light)_ | - |
diff --git a/packages/vant/src/index-bar/README.zh-CN.md b/packages/vant/src/index-bar/README.zh-CN.md
index 8737fd7d9..1b3d66395 100644
--- a/packages/vant/src/index-bar/README.zh-CN.md
+++ b/packages/vant/src/index-bar/README.zh-CN.md
@@ -148,4 +148,4 @@ indexBarRef.value?.scrollTo('B');
 | --van-index-anchor-line-height | _32px_ | - |
 | --van-index-anchor-background-color | _transparent_ | - |
 | --van-index-anchor-sticky-text-color | _var(--van-danger-color)_ | - |
-| --van-index-anchor-sticky-background-color | _var(--van-white)_ | - |
+| --van-index-anchor-sticky-background-color | _var(--van-background-color-light)_ | - |
diff --git a/packages/vant/src/loading/demo/index.vue b/packages/vant/src/loading/demo/index.vue
index 521c96221..eedb560d1 100644
--- a/packages/vant/src/loading/demo/index.vue
+++ b/packages/vant/src/loading/demo/index.vue
@@ -62,7 +62,7 @@ const t = useTranslate({
 
 <style lang="less">
 .demo-loading {
-  background: var(--van-white);
+  background: var(--van-background-color-light);
 
   .van-loading {
     display: inline-block;
diff --git a/packages/vant/src/nav-bar/README.md b/packages/vant/src/nav-bar/README.md
index df5721237..95b71b071 100644
--- a/packages/vant/src/nav-bar/README.md
+++ b/packages/vant/src/nav-bar/README.md
@@ -129,13 +129,13 @@ import type { NavbarProps } from 'vant';
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
 
-| Name                           | Default Value              | Description |
-| ------------------------------ | -------------------------- | ----------- |
-| --van-nav-bar-height           | _46px_                     | -           |
-| --van-nav-bar-background-color | _var(--van-white)_         | -           |
-| --van-nav-bar-arrow-size       | _16px_                     | -           |
-| --van-nav-bar-icon-color       | _var(--van-primary-color)_ | -           |
-| --van-nav-bar-text-color       | _var(--van-primary-color)_ | -           |
-| --van-nav-bar-title-font-size  | _var(--van-font-size-lg)_  | -           |
-| --van-nav-bar-title-text-color | _var(--van-text-color)_    | -           |
-| --van-nav-bar-z-index          | _1_                        | -           |
+| Name | Default Value | Description |
+| --- | --- | --- |
+| --van-nav-bar-height | _46px_ | - |
+| --van-nav-bar-background-color | _var(--van-background-color-light)_ | - |
+| --van-nav-bar-arrow-size | _16px_ | - |
+| --van-nav-bar-icon-color | _var(--van-primary-color)_ | - |
+| --van-nav-bar-text-color | _var(--van-primary-color)_ | - |
+| --van-nav-bar-title-font-size | _var(--van-font-size-lg)_ | - |
+| --van-nav-bar-title-text-color | _var(--van-text-color)_ | - |
+| --van-nav-bar-z-index | _1_ | - |
diff --git a/packages/vant/src/nav-bar/README.zh-CN.md b/packages/vant/src/nav-bar/README.zh-CN.md
index 6b7fe4b83..2f5c386f3 100644
--- a/packages/vant/src/nav-bar/README.zh-CN.md
+++ b/packages/vant/src/nav-bar/README.zh-CN.md
@@ -137,13 +137,13 @@ import type { NavbarProps } from 'vant';
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                           | 默认值                     | 描述 |
-| ------------------------------ | -------------------------- | ---- |
-| --van-nav-bar-height           | _46px_                     | -    |
-| --van-nav-bar-background-color | _var(--van-white)_         | -    |
-| --van-nav-bar-arrow-size       | _16px_                     | -    |
-| --van-nav-bar-icon-color       | _var(--van-primary-color)_ | -    |
-| --van-nav-bar-text-color       | _var(--van-primary-color)_ | -    |
-| --van-nav-bar-title-font-size  | _var(--van-font-size-lg)_  | -    |
-| --van-nav-bar-title-text-color | _var(--van-text-color)_    | -    |
-| --van-nav-bar-z-index          | _1_                        | -    |
+| 名称                           | 默认值                              | 描述 |
+| ------------------------------ | ----------------------------------- | ---- |
+| --van-nav-bar-height           | _46px_                              | -    |
+| --van-nav-bar-background-color | _var(--van-background-color-light)_ | -    |
+| --van-nav-bar-arrow-size       | _16px_                              | -    |
+| --van-nav-bar-icon-color       | _var(--van-primary-color)_          | -    |
+| --van-nav-bar-text-color       | _var(--van-primary-color)_          | -    |
+| --van-nav-bar-title-font-size  | _var(--van-font-size-lg)_           | -    |
+| --van-nav-bar-title-text-color | _var(--van-text-color)_             | -    |
+| --van-nav-bar-z-index          | _1_                                 | -    |
diff --git a/packages/vant/src/nav-bar/var.less b/packages/vant/src/nav-bar/var.less
index 2bc8cff5f..09bdcbd1d 100644
--- a/packages/vant/src/nav-bar/var.less
+++ b/packages/vant/src/nav-bar/var.less
@@ -1,7 +1,7 @@
 @import '../style/var.less';
 
 @nav-bar-height: 46px;
-@nav-bar-background-color: var(--van-white);
+@nav-bar-background-color: var(--van-background-color-light);
 @nav-bar-arrow-size: 16px;
 @nav-bar-icon-color: var(--van-primary-color);
 @nav-bar-text-color: var(--van-primary-color);
diff --git a/packages/vant/src/notice-bar/demo/index.vue b/packages/vant/src/notice-bar/demo/index.vue
index 97b020205..5deda6343 100644
--- a/packages/vant/src/notice-bar/demo/index.vue
+++ b/packages/vant/src/notice-bar/demo/index.vue
@@ -74,7 +74,7 @@ const t = useTranslate({
 
 <style lang="less">
 .demo-notice-bar {
-  background: var(--van-white);
+  background: var(--van-background-color-light);
 
   .van-notice-bar:not(:first-of-type) {
     margin-top: 4px;
diff --git a/packages/vant/src/number-keyboard/var.less b/packages/vant/src/number-keyboard/var.less
index 5bffce0d9..398eff107 100644
--- a/packages/vant/src/number-keyboard/var.less
+++ b/packages/vant/src/number-keyboard/var.less
@@ -3,7 +3,7 @@
 @number-keyboard-background-color: var(--van-gray-2);
 @number-keyboard-key-height: 48px;
 @number-keyboard-key-font-size: 28px;
-@number-keyboard-key-background-color: var(--van-white);
+@number-keyboard-key-background-color: var(--van-background-color-light);
 @number-keyboard-key-active-color: var(--van-gray-3);
 @number-keyboard-delete-font-size: var(--van-font-size-lg);
 @number-keyboard-title-color: var(--van-gray-7);
diff --git a/packages/vant/src/overlay/demo/index.vue b/packages/vant/src/overlay/demo/index.vue
index 4442f30c2..f4766520a 100644
--- a/packages/vant/src/overlay/demo/index.vue
+++ b/packages/vant/src/overlay/demo/index.vue
@@ -47,7 +47,7 @@ const showEmbedded = ref(false);
 
 <style lang="less">
 .demo-overlay {
-  background: var(--van-white);
+  background: var(--van-background-color-light);
 
   .wrapper {
     display: flex;
@@ -59,7 +59,7 @@ const showEmbedded = ref(false);
   .block {
     width: 120px;
     height: 120px;
-    background-color: var(--van-white);
+    background-color: var(--van-background-color-light);
     border-radius: 4px;
   }
 }
diff --git a/packages/vant/src/pagination/README.md b/packages/vant/src/pagination/README.md
index bfdd60f04..3a2b9b122 100644
--- a/packages/vant/src/pagination/README.md
+++ b/packages/vant/src/pagination/README.md
@@ -118,6 +118,6 @@ The component provides the following CSS variables, which can be used to customi
 | --van-pagination-item-default-color | _var(--van-primary-color)_ | - |
 | --van-pagination-item-disabled-color | _var(--van-gray-7)_ | - |
 | --van-pagination-item-disabled-background-color | _var(--van-background-color)_ | - |
-| --van-pagination-background-color | _var(--van-white)_ | - |
+| --van-pagination-background-color | _var(--van-background-color-light)_ | - |
 | --van-pagination-desc-color | _var(--van-gray-7)_ | - |
 | --van-pagination-disabled-opacity | _var(--van-disabled-opacity)_ | - |
diff --git a/packages/vant/src/pagination/README.zh-CN.md b/packages/vant/src/pagination/README.zh-CN.md
index 6e9cab201..9e583a5e9 100644
--- a/packages/vant/src/pagination/README.zh-CN.md
+++ b/packages/vant/src/pagination/README.zh-CN.md
@@ -126,6 +126,6 @@ import type { PaginationMode, PaginationProps } from 'vant';
 | --van-pagination-item-default-color | _var(--van-primary-color)_ | - |
 | --van-pagination-item-disabled-color | _var(--van-gray-7)_ | - |
 | --van-pagination-item-disabled-background-color | _var(--van-background-color)_ | - |
-| --van-pagination-background-color | _var(--van-white)_ | - |
+| --van-pagination-background-color | _var(--van-background-color-light)_ | - |
 | --van-pagination-desc-color | _var(--van-gray-7)_ | - |
 | --van-pagination-disabled-opacity | _var(--van-disabled-opacity)_ | - |
diff --git a/packages/vant/src/pagination/var.less b/packages/vant/src/pagination/var.less
index 53ef1a88b..400fe8f64 100644
--- a/packages/vant/src/pagination/var.less
+++ b/packages/vant/src/pagination/var.less
@@ -6,6 +6,6 @@
 @pagination-item-default-color: var(--van-primary-color);
 @pagination-item-disabled-color: var(--van-gray-7);
 @pagination-item-disabled-background-color: var(--van-background-color);
-@pagination-background-color: var(--van-white);
+@pagination-background-color: var(--van-background-color-light);
 @pagination-desc-color: var(--van-gray-7);
 @pagination-disabled-opacity: var(--van-disabled-opacity);
diff --git a/packages/vant/src/password-input/README.md b/packages/vant/src/password-input/README.md
index b52330368..645c26efa 100644
--- a/packages/vant/src/password-input/README.md
+++ b/packages/vant/src/password-input/README.md
@@ -160,7 +160,7 @@ The component provides the following CSS variables, which can be used to customi
 | --van-password-input-margin | _0 var(--van-padding-md)_ | - |
 | --van-password-input-font-size | _20px_ | - |
 | --van-password-input-border-radius | _6px_ | - |
-| --van-password-input-background-color | _var(--van-white)_ | - |
+| --van-password-input-background-color | _var(--van-background-color-light)_ | - |
 | --van-password-input-info-color | _var(--van-gray-6)_ | - |
 | --van-password-input-info-font-size | _var(--van-font-size-md)_ | - |
 | --van-password-input-error-info-color | _var(--van-danger-color)_ | - |
diff --git a/packages/vant/src/password-input/README.zh-CN.md b/packages/vant/src/password-input/README.zh-CN.md
index 98931cdab..876be16e3 100644
--- a/packages/vant/src/password-input/README.zh-CN.md
+++ b/packages/vant/src/password-input/README.zh-CN.md
@@ -170,7 +170,7 @@ export default {
 | --van-password-input-margin | _0 var(--van-padding-md)_ | - |
 | --van-password-input-font-size | _20px_ | - |
 | --van-password-input-border-radius | _6px_ | - |
-| --van-password-input-background-color | _var(--van-white)_ | - |
+| --van-password-input-background-color | _var(--van-background-color-light)_ | - |
 | --van-password-input-info-color | _var(--van-gray-6)_ | - |
 | --van-password-input-info-font-size | _var(--van-font-size-md)_ | - |
 | --van-password-input-error-info-color | _var(--van-danger-color)_ | - |
diff --git a/packages/vant/src/password-input/var.less b/packages/vant/src/password-input/var.less
index 9fae7e91a..c65e5c5b3 100644
--- a/packages/vant/src/password-input/var.less
+++ b/packages/vant/src/password-input/var.less
@@ -4,7 +4,7 @@
 @password-input-margin: 0 var(--van-padding-md);
 @password-input-font-size: 20px;
 @password-input-border-radius: 6px;
-@password-input-background-color: var(--van-white);
+@password-input-background-color: var(--van-background-color-light);
 @password-input-info-color: var(--van-gray-6);
 @password-input-info-font-size: var(--van-font-size-md);
 @password-input-error-info-color: var(--van-danger-color);
diff --git a/packages/vant/src/picker/README.md b/packages/vant/src/picker/README.md
index 18f537e66..c5ae91fca 100644
--- a/packages/vant/src/picker/README.md
+++ b/packages/vant/src/picker/README.md
@@ -415,7 +415,7 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Default Value | Description |
 | --- | --- | --- |
-| --van-picker-background-color | _var(--van-white)_ | - |
+| --van-picker-background-color | _var(--van-background-color-light)_ | - |
 | --van-picker-toolbar-height | _44px_ | - |
 | --van-picker-title-font-size | _var(--van-font-size-lg)_ | - |
 | --van-picker-title-line-height | _var(--van-line-height-md)_ | - |
diff --git a/packages/vant/src/picker/README.zh-CN.md b/packages/vant/src/picker/README.zh-CN.md
index 80262023f..7fb6d81ee 100644
--- a/packages/vant/src/picker/README.zh-CN.md
+++ b/packages/vant/src/picker/README.zh-CN.md
@@ -438,22 +438,22 @@ pickerRef.value?.confirm();
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                 | 默认值                       | 描述 |
-| ------------------------------------ | ---------------------------- | ---- |
-| --van-picker-background-color        | _var(--van-white)_           | -    |
-| --van-picker-toolbar-height          | _44px_                       | -    |
-| --van-picker-title-font-size         | _var(--van-font-size-lg)_    | -    |
-| --van-picker-title-line-height       | _var(--van-line-height-md)_  | -    |
-| --van-picker-action-padding          | _0 var(--van-padding-md)_    | -    |
-| --van-picker-action-font-size        | _var(--van-font-size-md)_    | -    |
-| --van-picker-confirm-action-color    | _var(--van-text-link-color)_ | -    |
-| --van-picker-cancel-action-color     | _var(--van-gray-6)_          | -    |
-| --van-picker-option-padding          | _0 var(--van-padding-base)_  | -    |
-| --van-picker-option-font-size        | _var(--van-font-size-lg)_    | -    |
-| --van-picker-option-text-color       | _var(--van-black)_           | -    |
-| --van-picker-option-disabled-opacity | _0.3_                        | -    |
-| --van-picker-loading-icon-color      | _var(--van-primary-color)_   | -    |
-| --van-picker-loading-mask-color      | _rgba(255, 255, 255, 0.9)_   | -    |
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --van-picker-background-color | _var(--van-background-color-light)_ | - |
+| --van-picker-toolbar-height | _44px_ | - |
+| --van-picker-title-font-size | _var(--van-font-size-lg)_ | - |
+| --van-picker-title-line-height | _var(--van-line-height-md)_ | - |
+| --van-picker-action-padding | _0 var(--van-padding-md)_ | - |
+| --van-picker-action-font-size | _var(--van-font-size-md)_ | - |
+| --van-picker-confirm-action-color | _var(--van-text-link-color)_ | - |
+| --van-picker-cancel-action-color | _var(--van-gray-6)_ | - |
+| --van-picker-option-padding | _0 var(--van-padding-base)_ | - |
+| --van-picker-option-font-size | _var(--van-font-size-lg)_ | - |
+| --van-picker-option-text-color | _var(--van-black)_ | - |
+| --van-picker-option-disabled-opacity | _0.3_ | - |
+| --van-picker-loading-icon-color | _var(--van-primary-color)_ | - |
+| --van-picker-loading-mask-color | _rgba(255, 255, 255, 0.9)_ | - |
 
 ## 常见问题
 
diff --git a/packages/vant/src/picker/var.less b/packages/vant/src/picker/var.less
index e28d62097..c21d6968e 100644
--- a/packages/vant/src/picker/var.less
+++ b/packages/vant/src/picker/var.less
@@ -1,6 +1,6 @@
 @import '../style/var.less';
 
-@picker-background-color: var(--van-white);
+@picker-background-color: var(--van-background-color-light);
 @picker-toolbar-height: 44px;
 @picker-title-font-size: var(--van-font-size-lg);
 @picker-title-line-height: var(--van-line-height-md);
diff --git a/packages/vant/src/popover/README.md b/packages/vant/src/popover/README.md
index 62c00054c..a5fbbdb83 100644
--- a/packages/vant/src/popover/README.md
+++ b/packages/vant/src/popover/README.md
@@ -285,7 +285,7 @@ The component provides the following CSS variables, which can be used to customi
 | --van-popover-action-line-height | _var(--van-line-height-md)_ | - |
 | --van-popover-action-icon-size | _20px_ | - |
 | --van-popover-light-text-color | _var(--van-text-color)_ | - |
-| --van-popover-light-background-color | _var(--van-white)_ | - |
+| --van-popover-light-background-color | _var(--van-background-color-light)_ | - |
 | --van-popover-light-action-disabled-text-color | _var(--van-gray-5)_ | - |
 | --van-popover-dark-text-color | _var(--van-white)_ | - |
 | --van-popover-dark-background-color | _#4a4a4a_ | - |
diff --git a/packages/vant/src/popover/README.zh-CN.md b/packages/vant/src/popover/README.zh-CN.md
index 1fce17a51..595b6a024 100644
--- a/packages/vant/src/popover/README.zh-CN.md
+++ b/packages/vant/src/popover/README.zh-CN.md
@@ -297,7 +297,7 @@ import type {
 | --van-popover-action-line-height | _var(--van-line-height-md)_ | - |
 | --van-popover-action-icon-size | _20px_ | - |
 | --van-popover-light-text-color | _var(--van-text-color)_ | - |
-| --van-popover-light-background-color | _var(--van-white)_ | - |
+| --van-popover-light-background-color | _var(--van-background-color-light)_ | - |
 | --van-popover-light-action-disabled-text-color | _var(--van-gray-5)_ | - |
 | --van-popover-dark-text-color | _var(--van-white)_ | - |
 | --van-popover-dark-background-color | _#4a4a4a_ | - |
diff --git a/packages/vant/src/popover/var.less b/packages/vant/src/popover/var.less
index ce49ecada..d0cbf7f4a 100644
--- a/packages/vant/src/popover/var.less
+++ b/packages/vant/src/popover/var.less
@@ -8,7 +8,7 @@
 @popover-action-line-height: var(--van-line-height-md);
 @popover-action-icon-size: 20px;
 @popover-light-text-color: var(--van-text-color);
-@popover-light-background-color: var(--van-white);
+@popover-light-background-color: var(--van-background-color-light);
 @popover-light-action-disabled-text-color: var(--van-gray-5);
 @popover-dark-text-color: var(--van-white);
 @popover-dark-background-color: #4a4a4a;
diff --git a/packages/vant/src/popup/README.md b/packages/vant/src/popup/README.md
index 81280dea2..467dfbc2e 100644
--- a/packages/vant/src/popup/README.md
+++ b/packages/vant/src/popup/README.md
@@ -162,7 +162,7 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Default Value | Description |
 | --- | --- | --- |
-| --van-popup-background-color | _var(--van-white)_ | - |
+| --van-popup-background-color | _var(--van-background-color-light)_ | - |
 | --van-popup-transition | _transform var(--van-animation-duration-base)_ | - |
 | --van-popup-round-border-radius | _16px_ | - |
 | --van-popup-close-icon-size | _22px_ | - |
diff --git a/packages/vant/src/popup/README.zh-CN.md b/packages/vant/src/popup/README.zh-CN.md
index 6942f1b6a..975cc3e50 100644
--- a/packages/vant/src/popup/README.zh-CN.md
+++ b/packages/vant/src/popup/README.zh-CN.md
@@ -168,7 +168,7 @@ import type { PopupProps, PopupPosition, PopupCloseIconPosition } from 'vant';
 
 | 名称 | 默认值 | 描述 |
 | --- | --- | --- |
-| --van-popup-background-color | _var(--van-white)_ | - |
+| --van-popup-background-color | _var(--van-background-color-light)_ | - |
 | --van-popup-transition | _transform var(--van-animation-duration-base)_ | - |
 | --van-popup-round-border-radius | _16px_ | - |
 | --van-popup-close-icon-size | _22px_ | - |
diff --git a/packages/vant/src/popup/var.less b/packages/vant/src/popup/var.less
index d5ce6b9f6..4b17f23ff 100644
--- a/packages/vant/src/popup/var.less
+++ b/packages/vant/src/popup/var.less
@@ -1,6 +1,6 @@
 @import '../style/var.less';
 
-@popup-background-color: var(--van-white);
+@popup-background-color: var(--van-background-color-light);
 @popup-transition: transform var(--van-animation-duration-base);
 @popup-round-border-radius: 16px;
 @popup-close-icon-size: 22px;
diff --git a/packages/vant/src/progress/demo/index.vue b/packages/vant/src/progress/demo/index.vue
index 7deda273a..428204fae 100644
--- a/packages/vant/src/progress/demo/index.vue
+++ b/packages/vant/src/progress/demo/index.vue
@@ -72,7 +72,7 @@ const reduce = () => {
 
 <style lang="less">
 .demo-progress {
-  background: var(--van-white);
+  background: var(--van-background-color-light);
 
   .van-progress {
     margin: 20px 16px;
diff --git a/packages/vant/src/pull-refresh/demo/index.vue b/packages/vant/src/pull-refresh/demo/index.vue
index 0f13e0c41..e74b03e40 100644
--- a/packages/vant/src/pull-refresh/demo/index.vue
+++ b/packages/vant/src/pull-refresh/demo/index.vue
@@ -100,7 +100,7 @@ onMounted(preloadImage);
 
 <style lang="less">
 .demo-pull-refresh {
-  background-color: var(--van-white);
+  background-color: var(--van-background-color-light);
 
   .van-pull-refresh {
     height: calc(100vh - 50px);
diff --git a/packages/vant/src/radio/demo/index.vue b/packages/vant/src/radio/demo/index.vue
index 5a8a920ec..cd7872362 100644
--- a/packages/vant/src/radio/demo/index.vue
+++ b/packages/vant/src/radio/demo/index.vue
@@ -141,7 +141,7 @@ const inactiveIcon = 'https://img.yzcdn.cn/vant/user-inactive.png';
 
 <style lang="less">
 .demo-radio {
-  background: var(--van-white);
+  background: var(--van-background-color-light);
 
   &-group {
     padding: 0 16px;
diff --git a/packages/vant/src/search/README.md b/packages/vant/src/search/README.md
index 257ee5217..9683b5b81 100644
--- a/packages/vant/src/search/README.md
+++ b/packages/vant/src/search/README.md
@@ -202,7 +202,7 @@ The component provides the following CSS variables, which can be used to customi
 | Name | Default Value | Description |
 | --- | --- | --- |
 | --van-search-padding | _10px var(--van-padding-sm)_ | - |
-| --van-search-background-color | _var(--van-white)_ | - |
+| --van-search-background-color | _var(--van-background-color-light)_ | - |
 | --van-search-content-background-color | _var(--van-gray-1)_ | - |
 | --van-search-input-height | _34px_ | - |
 | --van-search-label-padding | _0 5px_ | - |
diff --git a/packages/vant/src/search/README.zh-CN.md b/packages/vant/src/search/README.zh-CN.md
index 1289ffc07..824425b4b 100644
--- a/packages/vant/src/search/README.zh-CN.md
+++ b/packages/vant/src/search/README.zh-CN.md
@@ -211,19 +211,19 @@ searchRef.value?.focus();
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                  | 默认值                       | 描述 |
-| ------------------------------------- | ---------------------------- | ---- |
-| --van-search-padding                  | _10px var(--van-padding-sm)_ | -    |
-| --van-search-background-color         | _var(--van-white)_           | -    |
-| --van-search-content-background-color | _var(--van-gray-1)_          | -    |
-| --van-search-input-height             | _34px_                       | -    |
-| --van-search-label-padding            | _0 5px_                      | -    |
-| --van-search-label-color              | _var(--van-text-color)_      | -    |
-| --van-search-label-font-size          | _var(--van-font-size-md)_    | -    |
-| --van-search-left-icon-color          | _var(--van-gray-6)_          | -    |
-| --van-search-action-padding           | _0 var(--van-padding-xs)_    | -    |
-| --van-search-action-text-color        | _var(--van-text-color)_      | -    |
-| --van-search-action-font-size         | _var(--van-font-size-md)_    | -    |
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --van-search-padding | _10px var(--van-padding-sm)_ | - |
+| --van-search-background-color | _var(--van-background-color-light)_ | - |
+| --van-search-content-background-color | _var(--van-gray-1)_ | - |
+| --van-search-input-height | _34px_ | - |
+| --van-search-label-padding | _0 5px_ | - |
+| --van-search-label-color | _var(--van-text-color)_ | - |
+| --van-search-label-font-size | _var(--van-font-size-md)_ | - |
+| --van-search-left-icon-color | _var(--van-gray-6)_ | - |
+| --van-search-action-padding | _0 var(--van-padding-xs)_ | - |
+| --van-search-action-text-color | _var(--van-text-color)_ | - |
+| --van-search-action-font-size | _var(--van-font-size-md)_ | - |
 
 ## 常见问题
 
diff --git a/packages/vant/src/search/var.less b/packages/vant/src/search/var.less
index dd182aea8..dc90e962f 100644
--- a/packages/vant/src/search/var.less
+++ b/packages/vant/src/search/var.less
@@ -1,7 +1,7 @@
 @import '../style/var.less';
 
 @search-padding: 10px var(--van-padding-sm);
-@search-background-color: var(--van-white);
+@search-background-color: var(--van-background-color-light);
 @search-content-background-color: var(--van-gray-1);
 @search-input-height: 34px;
 @search-label-padding: 0 5px;
diff --git a/packages/vant/src/share-sheet/README.md b/packages/vant/src/share-sheet/README.md
index 1300b6e5b..59c0fba78 100644
--- a/packages/vant/src/share-sheet/README.md
+++ b/packages/vant/src/share-sheet/README.md
@@ -249,4 +249,4 @@ The component provides the following CSS variables, which can be used to customi
 | --van-share-sheet-option-description-font-size | _var(--van-font-size-sm)_ | - |
 | --van-share-sheet-cancel-button-font-size | _var(--van-font-size-lg)_ | - |
 | --van-share-sheet-cancel-button-height | _48px_ | - |
-| --van-share-sheet-cancel-button-background | _var(--van-white)_ | - |
+| --van-share-sheet-cancel-button-background | _var(--van-background-color-light)_ | - |
diff --git a/packages/vant/src/share-sheet/README.zh-CN.md b/packages/vant/src/share-sheet/README.zh-CN.md
index 34739c254..1e4870077 100644
--- a/packages/vant/src/share-sheet/README.zh-CN.md
+++ b/packages/vant/src/share-sheet/README.zh-CN.md
@@ -263,7 +263,7 @@ import type {
 | --van-share-sheet-option-description-font-size | _var(--van-font-size-sm)_ | - |
 | --van-share-sheet-cancel-button-font-size | _var(--van-font-size-lg)_ | - |
 | --van-share-sheet-cancel-button-height | _48px_ | - |
-| --van-share-sheet-cancel-button-background | _var(--van-white)_ | - |
+| --van-share-sheet-cancel-button-background | _var(--van-background-color-light)_ | - |
 
 ## 常见问题
 
diff --git a/packages/vant/src/share-sheet/var.less b/packages/vant/src/share-sheet/var.less
index 5a6f8b8d8..27b45aeba 100644
--- a/packages/vant/src/share-sheet/var.less
+++ b/packages/vant/src/share-sheet/var.less
@@ -15,4 +15,4 @@
 @share-sheet-option-description-font-size: var(--van-font-size-sm);
 @share-sheet-cancel-button-font-size: var(--van-font-size-lg);
 @share-sheet-cancel-button-height: 48px;
-@share-sheet-cancel-button-background: var(--van-white);
+@share-sheet-cancel-button-background: var(--van-background-color-light);
diff --git a/packages/vant/src/sidebar-item/var.less b/packages/vant/src/sidebar-item/var.less
index bec926520..1480cbfe6 100644
--- a/packages/vant/src/sidebar-item/var.less
+++ b/packages/vant/src/sidebar-item/var.less
@@ -12,4 +12,4 @@
 @sidebar-selected-border-width: 4px;
 @sidebar-selected-border-height: 16px;
 @sidebar-selected-border-color: var(--van-danger-color);
-@sidebar-selected-background-color: var(--van-white);
+@sidebar-selected-background-color: var(--van-background-color-light);
diff --git a/packages/vant/src/sidebar/README.md b/packages/vant/src/sidebar/README.md
index 12d396c58..abd7a6a64 100644
--- a/packages/vant/src/sidebar/README.md
+++ b/packages/vant/src/sidebar/README.md
@@ -153,4 +153,4 @@ The component provides the following CSS variables, which can be used to customi
 | --van-sidebar-selected-border-width | _4px_ | - |
 | --van-sidebar-selected-border-height | _16px_ | - |
 | --van-sidebar-selected-border-color | _var(--van-danger-color)_ | - |
-| --van-sidebar-selected-background-color | _var(--van-white)_ | - |
+| --van-sidebar-selected-background-color | _var(--van-background-color-light)_ | - |
diff --git a/packages/vant/src/sidebar/README.zh-CN.md b/packages/vant/src/sidebar/README.zh-CN.md
index c8e03f77b..20ab4b6de 100644
--- a/packages/vant/src/sidebar/README.zh-CN.md
+++ b/packages/vant/src/sidebar/README.zh-CN.md
@@ -161,4 +161,4 @@ import type { SidebarProps, SidebarItemProps } from 'vant';
 | --van-sidebar-selected-border-width | _4px_ | - |
 | --van-sidebar-selected-border-height | _16px_ | - |
 | --van-sidebar-selected-border-color | _var(--van-danger-color)_ | - |
-| --van-sidebar-selected-background-color | _var(--van-white)_ | - |
+| --van-sidebar-selected-background-color | _var(--van-background-color-light)_ | - |
diff --git a/packages/vant/src/sidebar/demo/index.vue b/packages/vant/src/sidebar/demo/index.vue
index 7d568a452..3502b4c8f 100644
--- a/packages/vant/src/sidebar/demo/index.vue
+++ b/packages/vant/src/sidebar/demo/index.vue
@@ -71,7 +71,7 @@ const onChange = (index: number) => Toast(`${t('title')} ${index + 1}`);
 
 <style lang="less">
 .demo-sidebar {
-  background-color: var(--van-white);
+  background-color: var(--van-background-color-light);
 
   .van-sidebar {
     margin-left: var(--van-padding-md);
diff --git a/packages/vant/src/skeleton/demo/index.vue b/packages/vant/src/skeleton/demo/index.vue
index 9d59cc7f7..e1d08e671 100644
--- a/packages/vant/src/skeleton/demo/index.vue
+++ b/packages/vant/src/skeleton/demo/index.vue
@@ -47,7 +47,7 @@ const show = ref(false);
 
 <style lang="less">
 .demo-skeleton {
-  background-color: var(--van-white);
+  background-color: var(--van-background-color-light);
 
   .van-switch {
     margin: 0 var(--van-padding-md) var(--van-padding-xs);
diff --git a/packages/vant/src/slider/README.md b/packages/vant/src/slider/README.md
index 6a8936ba8..83094808d 100644
--- a/packages/vant/src/slider/README.md
+++ b/packages/vant/src/slider/README.md
@@ -204,5 +204,5 @@ The component provides the following CSS variables, which can be used to customi
 | --van-slider-button-width | _24px_ | - |
 | --van-slider-button-height | _24px_ | - |
 | --van-slider-button-border-radius | _50%_ | - |
-| --van-slider-button-background-color | _var(--van-white)_ | - |
+| --van-slider-button-background-color | _var(--van-background-color-light)_ | - |
 | --van-slider-button-box-shadow | _0 1px 2px rgba(0, 0, 0, 0.5)_ | - |
diff --git a/packages/vant/src/slider/README.zh-CN.md b/packages/vant/src/slider/README.zh-CN.md
index 560c91c45..f61661b61 100644
--- a/packages/vant/src/slider/README.zh-CN.md
+++ b/packages/vant/src/slider/README.zh-CN.md
@@ -206,5 +206,5 @@ import type { SliderProps } from 'vant';
 | --van-slider-button-width | _24px_ | - |
 | --van-slider-button-height | _24px_ | - |
 | --van-slider-button-border-radius | _50%_ | - |
-| --van-slider-button-background-color | _var(--van-white)_ | - |
+| --van-slider-button-background-color | _var(--van-background-color-light)_ | - |
 | --van-slider-button-box-shadow | _0 1px 2px rgba(0, 0, 0, 0.5)_ | - |
diff --git a/packages/vant/src/slider/demo/index.vue b/packages/vant/src/slider/demo/index.vue
index 51ea8739a..a4b699730 100644
--- a/packages/vant/src/slider/demo/index.vue
+++ b/packages/vant/src/slider/demo/index.vue
@@ -96,7 +96,7 @@ const onChange = (value: string) => Toast(t('text') + value);
 
 <style lang="less">
 .demo-slider {
-  background: var(--van-white);
+  background: var(--van-background-color-light);
   user-select: none;
 
   .van-doc-demo-block {
diff --git a/packages/vant/src/slider/var.less b/packages/vant/src/slider/var.less
index 5906e1929..adcf1417a 100644
--- a/packages/vant/src/slider/var.less
+++ b/packages/vant/src/slider/var.less
@@ -7,5 +7,5 @@
 @slider-button-width: 24px;
 @slider-button-height: 24px;
 @slider-button-border-radius: 50%;
-@slider-button-background-color: var(--van-white);
+@slider-button-background-color: var(--van-background-color-light);
 @slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
diff --git a/packages/vant/src/stepper/index.less b/packages/vant/src/stepper/index.less
index d07482afd..fed44b85e 100644
--- a/packages/vant/src/stepper/index.less
+++ b/packages/vant/src/stepper/index.less
@@ -142,7 +142,7 @@
 
     .van-stepper__minus {
       color: var(--van-stepper-button-round-theme-color);
-      background-color: var(--van-white);
+      background-color: var(--van-background-color-light);
       border: 1px solid var(--van-stepper-button-round-theme-color);
     }
   }
diff --git a/packages/vant/src/steps/README.md b/packages/vant/src/steps/README.md
index 8ffbd164f..c02eef013 100644
--- a/packages/vant/src/steps/README.md
+++ b/packages/vant/src/steps/README.md
@@ -128,4 +128,4 @@ The component provides the following CSS variables, which can be used to customi
 | --van-step-circle-size | _5px_ | - |
 | --van-step-circle-color | _var(--van-gray-6)_ | - |
 | --van-step-horizontal-title-font-size | _var(--van-font-size-sm)_ | - |
-| --van-steps-background-color | _var(--van-white)_ | - |
+| --van-steps-background-color | _var(--van-background-color-light)_ | - |
diff --git a/packages/vant/src/steps/README.zh-CN.md b/packages/vant/src/steps/README.zh-CN.md
index e95aca2a4..9869ffe12 100644
--- a/packages/vant/src/steps/README.zh-CN.md
+++ b/packages/vant/src/steps/README.zh-CN.md
@@ -121,17 +121,17 @@ import type { StepsProps, StepsDirection } from 'vant';
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                  | 默认值                     | 描述 |
-| ------------------------------------- | -------------------------- | ---- |
-| --van-step-text-color                 | _var(--van-gray-6)_        | -    |
-| --van-step-active-color               | _var(--van-success-color)_ | -    |
-| --van-step-process-text-color         | _var(--van-text-color)_    | -    |
-| --van-step-font-size                  | _var(--van-font-size-md)_  | -    |
-| --van-step-line-color                 | _var(--van-border-color)_  | -    |
-| --van-step-finish-line-color          | _var(--van-success-color)_ | -    |
-| --van-step-finish-text-color          | _var(--van-text-color)_    | -    |
-| --van-step-icon-size                  | _12px_                     | -    |
-| --van-step-circle-size                | _5px_                      | -    |
-| --van-step-circle-color               | _var(--van-gray-6)_        | -    |
-| --van-step-horizontal-title-font-size | _var(--van-font-size-sm)_  | -    |
-| --van-steps-background-color          | _var(--van-white)_         | -    |
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --van-step-text-color | _var(--van-gray-6)_ | - |
+| --van-step-active-color | _var(--van-success-color)_ | - |
+| --van-step-process-text-color | _var(--van-text-color)_ | - |
+| --van-step-font-size | _var(--van-font-size-md)_ | - |
+| --van-step-line-color | _var(--van-border-color)_ | - |
+| --van-step-finish-line-color | _var(--van-success-color)_ | - |
+| --van-step-finish-text-color | _var(--van-text-color)_ | - |
+| --van-step-icon-size | _12px_ | - |
+| --van-step-circle-size | _5px_ | - |
+| --van-step-circle-color | _var(--van-gray-6)_ | - |
+| --van-step-horizontal-title-font-size | _var(--van-font-size-sm)_ | - |
+| --van-steps-background-color | _var(--van-background-color-light)_ | - |
diff --git a/packages/vant/src/steps/var.less b/packages/vant/src/steps/var.less
index dc0bf0707..b882923ce 100644
--- a/packages/vant/src/steps/var.less
+++ b/packages/vant/src/steps/var.less
@@ -1,3 +1,3 @@
 @import '../style/var.less';
 
-@steps-background-color: var(--van-white);
+@steps-background-color: var(--van-background-color-light);
diff --git a/packages/vant/src/style/demo/index.vue b/packages/vant/src/style/demo/index.vue
index 5b83e6918..1f2a09809 100644
--- a/packages/vant/src/style/demo/index.vue
+++ b/packages/vant/src/style/demo/index.vue
@@ -77,7 +77,7 @@ const animate = (newName: string) => {
 
   .van-hairline--top {
     height: 30px;
-    background-color: var(--van-white);
+    background-color: var(--van-background-color-light);
 
     &::after {
       top: 5px;
diff --git a/packages/vant/src/style/var.less b/packages/vant/src/style/var.less
index ca63499a0..42f92081f 100644
--- a/packages/vant/src/style/var.less
+++ b/packages/vant/src/style/var.less
@@ -30,7 +30,7 @@
 @active-opacity: 0.7;
 @disabled-opacity: 0.5;
 @background-color: var(--van-gray-1);
-@background-color-light: #fafafa;
+@background-color-light: var(--van-white);
 @text-link-color: #576b95;
 
 // Padding
diff --git a/packages/vant/src/submit-bar/README.md b/packages/vant/src/submit-bar/README.md
index 27d5394f5..c48f976ee 100644
--- a/packages/vant/src/submit-bar/README.md
+++ b/packages/vant/src/submit-bar/README.md
@@ -140,7 +140,7 @@ The component provides the following CSS variables, which can be used to customi
 | --- | --- | --- |
 | --van-submit-bar-height | _50px_ | - |
 | --van-submit-bar-z-index | _100_ | - |
-| --van-submit-bar-background-color | _var(--van-white)_ | - |
+| --van-submit-bar-background-color | _var(--van-background-color-light)_ | - |
 | --van-submit-bar-button-width | _110px_ | - |
 | --van-submit-bar-price-color | _var(--van-danger-color)_ | - |
 | --van-submit-bar-price-font-size | _var(--van-font-size-sm)_ | - |
diff --git a/packages/vant/src/submit-bar/README.zh-CN.md b/packages/vant/src/submit-bar/README.zh-CN.md
index 48ba89889..c0e0a890c 100644
--- a/packages/vant/src/submit-bar/README.zh-CN.md
+++ b/packages/vant/src/submit-bar/README.zh-CN.md
@@ -147,7 +147,7 @@ import type { SubmitBarProps } from 'vant';
 | --- | --- | --- |
 | --van-submit-bar-height | _50px_ | - |
 | --van-submit-bar-z-index | _100_ | - |
-| --van-submit-bar-background-color | _var(--van-white)_ | - |
+| --van-submit-bar-background-color | _var(--van-background-color-light)_ | - |
 | --van-submit-bar-button-width | _110px_ | - |
 | --van-submit-bar-price-color | _var(--van-danger-color)_ | - |
 | --van-submit-bar-price-font-size | _var(--van-font-size-sm)_ | - |
diff --git a/packages/vant/src/submit-bar/var.less b/packages/vant/src/submit-bar/var.less
index 951869b7a..0b8767d53 100644
--- a/packages/vant/src/submit-bar/var.less
+++ b/packages/vant/src/submit-bar/var.less
@@ -2,7 +2,7 @@
 
 @submit-bar-height: 50px;
 @submit-bar-z-index: 100;
-@submit-bar-background-color: var(--van-white);
+@submit-bar-background-color: var(--van-background-color-light);
 @submit-bar-button-width: 110px;
 @submit-bar-price-color: var(--van-danger-color);
 @submit-bar-price-font-size: var(--van-font-size-md);
diff --git a/packages/vant/src/swipe-cell/demo/index.vue b/packages/vant/src/swipe-cell/demo/index.vue
index d3eb31dda..77a1e7ebd 100644
--- a/packages/vant/src/swipe-cell/demo/index.vue
+++ b/packages/vant/src/swipe-cell/demo/index.vue
@@ -100,7 +100,7 @@ const beforeClose = ({ position }: { position: string }) => {
 
   .van-card {
     margin: 0;
-    background-color: var(--van-white);
+    background-color: var(--van-background-color-light);
   }
 
   .delete-button {
diff --git a/packages/vant/src/switch/README.md b/packages/vant/src/switch/README.md
index a360194a9..e5fe74c90 100644
--- a/packages/vant/src/switch/README.md
+++ b/packages/vant/src/switch/README.md
@@ -141,9 +141,9 @@ The component provides the following CSS variables, which can be used to customi
 | --van-switch-width | _2em_ | - |
 | --van-switch-height | _1em_ | - |
 | --van-switch-node-size | _1em_ | - |
-| --van-switch-node-background-color | _var(--van-white)_ | - |
+| --van-switch-node-background-color | _var(--van-background-color-light)_ | - |
 | --van-switch-node-box-shadow | _0 3px 1px 0 rgba(0, 0, 0, 0.05)_ | - |
-| --van-switch-background-color | _var(--van-white)_ | - |
+| --van-switch-background-color | _var(--van-background-color-light)_ | - |
 | --van-switch-on-background-color | _var(--van-primary-color)_ | - |
 | --van-switch-transition-duration | _var(--van-animation-duration-base)_ | - |
 | --van-switch-disabled-opacity | _var(--van-disabled-opacity)_ | - |
diff --git a/packages/vant/src/switch/README.zh-CN.md b/packages/vant/src/switch/README.zh-CN.md
index 46b3c34b3..b325a5355 100644
--- a/packages/vant/src/switch/README.zh-CN.md
+++ b/packages/vant/src/switch/README.zh-CN.md
@@ -153,9 +153,9 @@ import type { SwitchProps } from 'vant';
 | --van-switch-width | _2em_ | - |
 | --van-switch-height | _1em_ | - |
 | --van-switch-node-size | _1em_ | - |
-| --van-switch-node-background-color | _var(--van-white)_ | - |
+| --van-switch-node-background-color | _var(--van-background-color-light)_ | - |
 | --van-switch-node-box-shadow | _0 3px 1px 0 rgba(0, 0, 0, 0.05)_ | - |
-| --van-switch-background-color | _var(--van-white)_ | - |
+| --van-switch-background-color | _var(--van-background-color-light)_ | - |
 | --van-switch-on-background-color | _var(--van-primary-color)_ | - |
 | --van-switch-transition-duration | _var(--van-animation-duration-base)_ | - |
 | --van-switch-disabled-opacity | _var(--van-disabled-opacity)_ | - |
diff --git a/packages/vant/src/switch/var.less b/packages/vant/src/switch/var.less
index 670f71bc5..ef561d045 100644
--- a/packages/vant/src/switch/var.less
+++ b/packages/vant/src/switch/var.less
@@ -4,10 +4,10 @@
 @switch-width: 2em;
 @switch-height: 1em;
 @switch-node-size: 1em;
-@switch-node-background-color: var(--van-white);
+@switch-node-background-color: var(--van-background-color-light);
 @switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05),
   0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
-@switch-background-color: var(--van-white);
+@switch-background-color: var(--van-background-color-light);
 @switch-on-background-color: var(--van-primary-color);
 @switch-transition-duration: var(--van-animation-duration-base);
 @switch-disabled-opacity: var(--van-disabled-opacity);
diff --git a/packages/vant/src/tab/README.md b/packages/vant/src/tab/README.md
index b933ecdfc..163c7a031 100644
--- a/packages/vant/src/tab/README.md
+++ b/packages/vant/src/tab/README.md
@@ -321,17 +321,17 @@ tabsRef.value?.scrollTo(0);
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
 
-| Name                            | Default Value               | Description |
-| ------------------------------- | --------------------------- | ----------- |
-| --van-tab-text-color            | _var(--van-gray-7)_         | -           |
-| --van-tab-active-text-color     | _var(--van-text-color)_     | -           |
-| --van-tab-disabled-text-color   | _var(--van-gray-5)_         | -           |
-| --van-tab-font-size             | _var(--van-font-size-md)_   | -           |
-| --van-tab-line-height           | _var(--van-line-height-md)_ | -           |
-| --van-tabs-default-color        | _var(--van-danger-color)_   | -           |
-| --van-tabs-line-height          | _44px_                      | -           |
-| --van-tabs-card-height          | _30px_                      | -           |
-| --van-tabs-nav-background-color | _var(--van-white)_          | -           |
-| --van-tabs-bottom-bar-width     | _40px_                      | -           |
-| --van-tabs-bottom-bar-height    | _3px_                       | -           |
-| --van-tabs-bottom-bar-color     | _var(--van-danger-color)_   | -           |
+| Name | Default Value | Description |
+| --- | --- | --- |
+| --van-tab-text-color | _var(--van-gray-7)_ | - |
+| --van-tab-active-text-color | _var(--van-text-color)_ | - |
+| --van-tab-disabled-text-color | _var(--van-gray-5)_ | - |
+| --van-tab-font-size | _var(--van-font-size-md)_ | - |
+| --van-tab-line-height | _var(--van-line-height-md)_ | - |
+| --van-tabs-default-color | _var(--van-danger-color)_ | - |
+| --van-tabs-line-height | _44px_ | - |
+| --van-tabs-card-height | _30px_ | - |
+| --van-tabs-nav-background-color | _var(--van-background-color-light)_ | - |
+| --van-tabs-bottom-bar-width | _40px_ | - |
+| --van-tabs-bottom-bar-height | _3px_ | - |
+| --van-tabs-bottom-bar-color | _var(--van-danger-color)_ | - |
diff --git a/packages/vant/src/tab/README.zh-CN.md b/packages/vant/src/tab/README.zh-CN.md
index 26afb112d..ae9dd7d27 100644
--- a/packages/vant/src/tab/README.zh-CN.md
+++ b/packages/vant/src/tab/README.zh-CN.md
@@ -334,20 +334,20 @@ tabsRef.value?.scrollTo(0);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                            | 默认值                      | 描述 |
-| ------------------------------- | --------------------------- | ---- |
-| --van-tab-text-color            | _var(--van-gray-7)_         | -    |
-| --van-tab-active-text-color     | _var(--van-text-color)_     | -    |
-| --van-tab-disabled-text-color   | _var(--van-gray-5)_         | -    |
-| --van-tab-font-size             | _var(--van-font-size-md)_   | -    |
-| --van-tab-line-height           | _var(--van-line-height-md)_ | -    |
-| --van-tabs-default-color        | _var(--van-danger-color)_   | -    |
-| --van-tabs-line-height          | _44px_                      | -    |
-| --van-tabs-card-height          | _30px_                      | -    |
-| --van-tabs-nav-background-color | _var(--van-white)_          | -    |
-| --van-tabs-bottom-bar-width     | _40px_                      | -    |
-| --van-tabs-bottom-bar-height    | _3px_                       | -    |
-| --van-tabs-bottom-bar-color     | _var(--van-danger-color)_   | -    |
+| 名称                            | 默认值                              | 描述 |
+| ------------------------------- | ----------------------------------- | ---- |
+| --van-tab-text-color            | _var(--van-gray-7)_                 | -    |
+| --van-tab-active-text-color     | _var(--van-text-color)_             | -    |
+| --van-tab-disabled-text-color   | _var(--van-gray-5)_                 | -    |
+| --van-tab-font-size             | _var(--van-font-size-md)_           | -    |
+| --van-tab-line-height           | _var(--van-line-height-md)_         | -    |
+| --van-tabs-default-color        | _var(--van-danger-color)_           | -    |
+| --van-tabs-line-height          | _44px_                              | -    |
+| --van-tabs-card-height          | _30px_                              | -    |
+| --van-tabs-nav-background-color | _var(--van-background-color-light)_ | -    |
+| --van-tabs-bottom-bar-width     | _40px_                              | -    |
+| --van-tabs-bottom-bar-height    | _3px_                               | -    |
+| --van-tabs-bottom-bar-color     | _var(--van-danger-color)_           | -    |
 
 ## 常见问题
 
diff --git a/packages/vant/src/tab/demo/index.vue b/packages/vant/src/tab/demo/index.vue
index 666ff5437..d023c140f 100644
--- a/packages/vant/src/tab/demo/index.vue
+++ b/packages/vant/src/tab/demo/index.vue
@@ -184,7 +184,7 @@ const beforeChange = (name: number) => {
 
   .van-tab__pane {
     padding: 24px 20px;
-    background-color: var(--van-white);
+    background-color: var(--van-background-color-light);
   }
 
   .van-tabs--card .van-tab__pane {
diff --git a/packages/vant/src/tabbar-item/var.less b/packages/vant/src/tabbar-item/var.less
index 98103dbcb..769a0de40 100644
--- a/packages/vant/src/tabbar-item/var.less
+++ b/packages/vant/src/tabbar-item/var.less
@@ -3,7 +3,7 @@
 @tabbar-item-font-size: var(--van-font-size-sm);
 @tabbar-item-text-color: var(--van-gray-7);
 @tabbar-item-active-color: var(--van-primary-color);
-@tabbar-item-active-background-color: var(--van-white);
+@tabbar-item-active-background-color: var(--van-background-color-light);
 @tabbar-item-line-height: 1;
 @tabbar-item-icon-size: 22px;
 @tabbar-item-icon-margin-bottom: var(--van-padding-base);
diff --git a/packages/vant/src/tabbar/README.md b/packages/vant/src/tabbar/README.md
index 14fec3ae7..cdcc8e407 100644
--- a/packages/vant/src/tabbar/README.md
+++ b/packages/vant/src/tabbar/README.md
@@ -218,11 +218,11 @@ The component provides the following CSS variables, which can be used to customi
 | --- | --- | --- |
 | --van-tabbar-height | _50px_ | - |
 | --van-tabbar-z-index | _1_ | - |
-| --van-tabbar-background-color | _var(--van-white)_ | - |
+| --van-tabbar-background-color | _var(--van-background-color-light)_ | - |
 | --van-tabbar-item-font-size | _var(--van-font-size-sm)_ | - |
 | --van-tabbar-item-text-color | _var(--van-gray-7)_ | - |
 | --van-tabbar-item-active-color | _var(--van-primary-color)_ | - |
-| --van-tabbar-item-active-background-color | _var(--van-white)_ | - |
+| --van-tabbar-item-active-background-color | _var(--van-background-color-light)_ | - |
 | --van-tabbar-item-line-height | _1_ | - |
 | --van-tabbar-item-icon-size | _22px_ | - |
 | --van-tabbar-item-icon-margin-bottom | _var(--van-padding-base)_ | - |
diff --git a/packages/vant/src/tabbar/README.zh-CN.md b/packages/vant/src/tabbar/README.zh-CN.md
index b505dde92..404c115cb 100644
--- a/packages/vant/src/tabbar/README.zh-CN.md
+++ b/packages/vant/src/tabbar/README.zh-CN.md
@@ -230,11 +230,11 @@ import type { TabbarProps, TabbarItemProps } from 'vant';
 | --- | --- | --- |
 | --van-tabbar-height | _50px_ | - |
 | --van-tabbar-z-index | _1_ | - |
-| --van-tabbar-background-color | _var(--van-white)_ | - |
+| --van-tabbar-background-color | _var(--van-background-color-light)_ | - |
 | --van-tabbar-item-font-size | _var(--van-font-size-sm)_ | - |
 | --van-tabbar-item-text-color | _var(--van-gray-7)_ | - |
 | --van-tabbar-item-active-color | _var(--van-primary-color)_ | - |
-| --van-tabbar-item-active-background-color | _var(--van-white)_ | - |
+| --van-tabbar-item-active-background-color | _var(--van-background-color-light)_ | - |
 | --van-tabbar-item-line-height | _1_ | - |
 | --van-tabbar-item-icon-size | _22px_ | - |
 | --van-tabbar-item-icon-margin-bottom | _var(--van-padding-base)_ | - |
diff --git a/packages/vant/src/tabbar/var.less b/packages/vant/src/tabbar/var.less
index aaf04270c..658e09bd0 100644
--- a/packages/vant/src/tabbar/var.less
+++ b/packages/vant/src/tabbar/var.less
@@ -2,4 +2,4 @@
 
 @tabbar-height: 50px;
 @tabbar-z-index: 1;
-@tabbar-background-color: var(--van-white);
+@tabbar-background-color: var(--van-background-color-light);
diff --git a/packages/vant/src/tabs/var.less b/packages/vant/src/tabs/var.less
index 63e1ce98e..b15510b4d 100644
--- a/packages/vant/src/tabs/var.less
+++ b/packages/vant/src/tabs/var.less
@@ -8,7 +8,7 @@
 @tabs-default-color: var(--van-danger-color);
 @tabs-line-height: 44px;
 @tabs-card-height: 30px;
-@tabs-nav-background-color: var(--van-white);
+@tabs-nav-background-color: var(--van-background-color-light);
 @tabs-bottom-bar-width: 40px;
 @tabs-bottom-bar-height: 3px;
 @tabs-bottom-bar-color: @tabs-default-color;
diff --git a/packages/vant/src/tag/README.md b/packages/vant/src/tag/README.md
index 897280c89..e10e0c9bd 100644
--- a/packages/vant/src/tag/README.md
+++ b/packages/vant/src/tag/README.md
@@ -147,4 +147,4 @@ The component provides the following CSS variables, which can be used to customi
 | --van-tag-success-color | _var(--van-success-color)_ | - |
 | --van-tag-warning-color | _var(--van-warning-color)_ | - |
 | --van-tag-default-color | _var(--van-gray-6)_ | - |
-| --van-tag-plain-background-color | _var(--van-white)_ | - |
+| --van-tag-plain-background-color | _var(--van-background-color-light)_ | - |
diff --git a/packages/vant/src/tag/README.zh-CN.md b/packages/vant/src/tag/README.zh-CN.md
index f03aea842..6e3c05fc3 100644
--- a/packages/vant/src/tag/README.zh-CN.md
+++ b/packages/vant/src/tag/README.zh-CN.md
@@ -161,4 +161,4 @@ import type { TagSize, TagType, TagProps } from 'vant';
 | --van-tag-success-color | _var(--van-success-color)_ | - |
 | --van-tag-warning-color | _var(--van-warning-color)_ | - |
 | --van-tag-default-color | _var(--van-gray-6)_ | - |
-| --van-tag-plain-background-color | _var(--van-white)_ | - |
+| --van-tag-plain-background-color | _var(--van-background-color-light)_ | - |
diff --git a/packages/vant/src/tag/var.less b/packages/vant/src/tag/var.less
index 3b0680cb8..a8801c381 100644
--- a/packages/vant/src/tag/var.less
+++ b/packages/vant/src/tag/var.less
@@ -15,4 +15,4 @@
 @tag-success-color: var(--van-success-color);
 @tag-warning-color: var(--van-warning-color);
 @tag-default-color: var(--van-gray-6);
-@tag-plain-background-color: var(--van-white);
+@tag-plain-background-color: var(--van-background-color-light);
diff --git a/packages/vant/src/tree-select/README.md b/packages/vant/src/tree-select/README.md
index 6c30d9bfd..85f5c5d2b 100644
--- a/packages/vant/src/tree-select/README.md
+++ b/packages/vant/src/tree-select/README.md
@@ -246,7 +246,7 @@ The component provides the following CSS variables, which can be used to customi
 | --- | --- | --- |
 | --van-tree-select-font-size | _var(--van-font-size-md)_ | - |
 | --van-tree-select-nav-background-color | _var(--van-background-color)_ | - |
-| --van-tree-select-content-background-color | _var(--van-white)_ | - |
+| --van-tree-select-content-background-color | _var(--van-background-color-light)_ | - |
 | --van-tree-select-nav-item-padding | _14px var(--van-padding-sm)_ | - |
 | --van-tree-select-item-height | _48px_ | - |
 | --van-tree-select-item-active-color | _var(--van-danger-color)_ | - |
diff --git a/packages/vant/src/tree-select/README.zh-CN.md b/packages/vant/src/tree-select/README.zh-CN.md
index 75d11a824..b09817cb9 100644
--- a/packages/vant/src/tree-select/README.zh-CN.md
+++ b/packages/vant/src/tree-select/README.zh-CN.md
@@ -252,7 +252,7 @@ import type { TreeSelectItem, TreeSelectChild, TreeSelectProps } from 'vant';
 | --- | --- | --- |
 | --van-tree-select-font-size | _var(--van-font-size-md)_ | - |
 | --van-tree-select-nav-background-color | _var(--van-background-color)_ | - |
-| --van-tree-select-content-background-color | _var(--van-white)_ | - |
+| --van-tree-select-content-background-color | _var(--van-background-color-light)_ | - |
 | --van-tree-select-nav-item-padding | _14px var(--van-padding-sm)_ | - |
 | --van-tree-select-item-height | _48px_ | - |
 | --van-tree-select-item-active-color | _var(--van-danger-color)_ | - |
diff --git a/packages/vant/src/tree-select/var.less b/packages/vant/src/tree-select/var.less
index 72d75084e..54dd825d3 100644
--- a/packages/vant/src/tree-select/var.less
+++ b/packages/vant/src/tree-select/var.less
@@ -2,7 +2,7 @@
 
 @tree-select-font-size: var(--van-font-size-md);
 @tree-select-nav-background-color: var(--van-background-color);
-@tree-select-content-background-color: var(--van-white);
+@tree-select-content-background-color: var(--van-background-color-light);
 @tree-select-nav-item-padding: 14px var(--van-padding-sm);
 @tree-select-item-height: 48px;
 @tree-select-item-active-color: var(--van-danger-color);
diff --git a/packages/vant/src/uploader/demo/index.vue b/packages/vant/src/uploader/demo/index.vue
index 580ecd028..2843a8c96 100644
--- a/packages/vant/src/uploader/demo/index.vue
+++ b/packages/vant/src/uploader/demo/index.vue
@@ -180,7 +180,7 @@ const onOversize = (file: UploaderFileListItem, detail: unknown) => {
 
 <style lang="less">
 .demo-uploader {
-  background-color: var(--van-white);
+  background-color: var(--van-background-color-light);
 
   .van-uploader {
     margin-left: var(--van-padding-md);