From 98b999d911c41ac1a73e6ef375b4966befe69b20 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Thu, 27 Jan 2022 10:35:57 +0800
Subject: [PATCH] refactor: rename --van-background-light to --van-background-2

---
 packages/vant-cli/site/mobile/App.vue         |  2 +-
 .../docs/markdown/migrate-from-v3.zh-CN.md    |  1 +
 packages/vant/src/action-bar-icon/index.less  |  2 +-
 packages/vant/src/action-bar/README.md        |  4 +--
 packages/vant/src/action-bar/README.zh-CN.md  | 30 ++++++++--------
 packages/vant/src/action-bar/index.less       |  2 +-
 packages/vant/src/action-sheet/README.md      |  2 +-
 .../vant/src/action-sheet/README.zh-CN.md     |  2 +-
 packages/vant/src/action-sheet/index.less     |  2 +-
 packages/vant/src/address-list/index.less     |  4 +--
 packages/vant/src/badge/demo/index.vue        |  2 +-
 packages/vant/src/badge/index.less            |  2 +-
 packages/vant/src/button/README.md            |  2 +-
 packages/vant/src/button/README.zh-CN.md      |  2 +-
 packages/vant/src/button/demo/index.vue       |  2 +-
 packages/vant/src/button/index.less           |  2 +-
 packages/vant/src/calendar/README.md          |  2 +-
 packages/vant/src/calendar/README.zh-CN.md    |  2 +-
 packages/vant/src/calendar/index.less         |  2 +-
 packages/vant/src/card/demo/index.vue         |  2 +-
 packages/vant/src/cell-group/index.less       |  2 +-
 packages/vant/src/cell/README.md              |  4 +--
 packages/vant/src/cell/README.zh-CN.md        |  4 +--
 packages/vant/src/cell/index.less             |  2 +-
 packages/vant/src/col/demo/index.vue          |  2 +-
 packages/vant/src/collapse-item/index.less    |  2 +-
 packages/vant/src/collapse/README.md          |  2 +-
 packages/vant/src/collapse/README.zh-CN.md    |  2 +-
 packages/vant/src/config-provider/README.md   |  2 +-
 .../vant/src/config-provider/README.zh-CN.md  |  2 +-
 packages/vant/src/contact-list/index.less     |  2 +-
 packages/vant/src/count-down/demo/index.vue   |  2 +-
 packages/vant/src/coupon-list/README.md       |  2 +-
 packages/vant/src/coupon-list/README.zh-CN.md |  2 +-
 packages/vant/src/coupon-list/index.less      |  4 +--
 packages/vant/src/coupon/index.less           |  2 +-
 packages/vant/src/dialog/README.md            |  2 +-
 packages/vant/src/dialog/README.zh-CN.md      |  2 +-
 packages/vant/src/dialog/index.less           |  2 +-
 packages/vant/src/divider/demo/index.vue      |  2 +-
 packages/vant/src/dropdown-menu/README.md     |  2 +-
 .../vant/src/dropdown-menu/README.zh-CN.md    |  2 +-
 packages/vant/src/dropdown-menu/index.less    |  2 +-
 packages/vant/src/empty/demo/index.vue        |  2 +-
 packages/vant/src/grid-item/index.less        |  2 +-
 packages/vant/src/grid/README.md              |  2 +-
 packages/vant/src/grid/README.zh-CN.md        |  2 +-
 packages/vant/src/icon/demo/index.vue         |  2 +-
 packages/vant/src/image/demo/index.vue        |  2 +-
 packages/vant/src/index-anchor/index.less     |  2 +-
 packages/vant/src/index-bar/README.md         |  2 +-
 packages/vant/src/index-bar/README.zh-CN.md   | 30 ++++++++--------
 packages/vant/src/loading/demo/index.vue      |  2 +-
 packages/vant/src/nav-bar/README.md           | 20 +++++------
 packages/vant/src/nav-bar/README.zh-CN.md     | 20 +++++------
 packages/vant/src/nav-bar/index.less          |  2 +-
 packages/vant/src/notice-bar/demo/index.vue   |  2 +-
 packages/vant/src/number-keyboard/index.less  |  2 +-
 packages/vant/src/overlay/demo/index.vue      |  4 +--
 packages/vant/src/pagination/README.md        |  2 +-
 packages/vant/src/pagination/README.zh-CN.md  |  2 +-
 packages/vant/src/pagination/index.less       |  2 +-
 packages/vant/src/password-input/README.md    |  2 +-
 .../vant/src/password-input/README.zh-CN.md   | 34 +++++++++----------
 packages/vant/src/password-input/index.less   |  2 +-
 packages/vant/src/picker/README.md            |  2 +-
 packages/vant/src/picker/README.zh-CN.md      | 34 +++++++++----------
 packages/vant/src/picker/index.less           |  2 +-
 packages/vant/src/popover/README.md           |  2 +-
 packages/vant/src/popover/README.zh-CN.md     |  2 +-
 packages/vant/src/popover/index.less          |  2 +-
 packages/vant/src/popup/README.md             |  2 +-
 packages/vant/src/popup/README.zh-CN.md       |  2 +-
 packages/vant/src/popup/index.less            |  2 +-
 packages/vant/src/progress/demo/index.vue     |  2 +-
 packages/vant/src/pull-refresh/demo/index.vue |  2 +-
 packages/vant/src/rate/demo/index.vue         |  2 +-
 packages/vant/src/search/README.md            | 26 +++++++-------
 packages/vant/src/search/README.zh-CN.md      | 26 +++++++-------
 packages/vant/src/search/index.less           |  2 +-
 packages/vant/src/share-sheet/README.md       |  2 +-
 packages/vant/src/share-sheet/README.zh-CN.md |  2 +-
 packages/vant/src/share-sheet/index.less      |  2 +-
 packages/vant/src/sidebar-item/index.less     |  2 +-
 packages/vant/src/sidebar/README.md           |  2 +-
 packages/vant/src/sidebar/README.zh-CN.md     | 32 ++++++++---------
 packages/vant/src/sidebar/demo/index.vue      |  2 +-
 packages/vant/src/skeleton/demo/index.vue     |  2 +-
 packages/vant/src/slider/demo/index.vue       |  2 +-
 packages/vant/src/step/index.less             |  2 +-
 packages/vant/src/stepper/index.less          |  2 +-
 packages/vant/src/steps/README.md             |  2 +-
 packages/vant/src/steps/README.zh-CN.md       | 28 +++++++--------
 packages/vant/src/steps/index.less            |  2 +-
 packages/vant/src/sticky/demo/index.vue       |  2 +-
 packages/vant/src/style/css-variables.less    | 10 +++---
 packages/vant/src/style/demo/index.vue        |  2 +-
 packages/vant/src/submit-bar/README.md        |  2 +-
 packages/vant/src/submit-bar/README.zh-CN.md  |  2 +-
 packages/vant/src/submit-bar/index.less       |  2 +-
 packages/vant/src/swipe-cell/demo/index.vue   |  2 +-
 packages/vant/src/switch/README.md            |  2 +-
 packages/vant/src/switch/README.zh-CN.md      |  2 +-
 packages/vant/src/switch/index.less           |  2 +-
 packages/vant/src/tab/README.md               | 28 +++++++--------
 packages/vant/src/tab/README.zh-CN.md         | 28 +++++++--------
 packages/vant/src/tab/demo/index.vue          |  2 +-
 packages/vant/src/tabbar-item/index.less      |  2 +-
 packages/vant/src/tabbar/README.md            |  4 +--
 packages/vant/src/tabbar/README.zh-CN.md      | 24 ++++++-------
 packages/vant/src/tabbar/index.less           |  2 +-
 packages/vant/src/tabs/index.less             |  2 +-
 packages/vant/src/tag/README.md               |  2 +-
 packages/vant/src/tag/README.zh-CN.md         |  2 +-
 packages/vant/src/tag/index.less              |  2 +-
 packages/vant/src/tree-select/README.md       |  2 +-
 packages/vant/src/tree-select/README.zh-CN.md | 20 +++++------
 packages/vant/src/tree-select/index.less      |  2 +-
 packages/vant/src/uploader/demo/index.vue     |  2 +-
 119 files changed, 307 insertions(+), 304 deletions(-)

diff --git a/packages/vant-cli/site/mobile/App.vue b/packages/vant-cli/site/mobile/App.vue
index 5293487b8..84fa98292 100644
--- a/packages/vant-cli/site/mobile/App.vue
+++ b/packages/vant-cli/site/mobile/App.vue
@@ -46,7 +46,7 @@ body {
 }
 
 .van-doc-theme-dark {
-  background-color: var(--van-doc-black);
+  background-color: #000;
 }
 
 ::-webkit-scrollbar {
diff --git a/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md b/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md
index f36489e60..68ab4ce5e 100644
--- a/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md
+++ b/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md
@@ -67,6 +67,7 @@ animation-duration               ->  duration
 animation-timing-function-enter  ->  ease-out
 animation-timing-function-leave  ->  ease-in
 background-color                 ->  background
+background-color-light           ->  background-2
 border-radius                    ->  radius
 border-width-base                ->  border-width
 box-shadow                       ->  shadow
diff --git a/packages/vant/src/action-bar-icon/index.less b/packages/vant/src/action-bar-icon/index.less
index 809efdc39..a652fc1ba 100644
--- a/packages/vant/src/action-bar-icon/index.less
+++ b/packages/vant/src/action-bar-icon/index.less
@@ -6,7 +6,7 @@ body {
   --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: var(--van-background-light);
+  --van-action-bar-icon-background: var(--van-background-2);
 }
 
 .van-action-bar-icon {
diff --git a/packages/vant/src/action-bar/README.md b/packages/vant/src/action-bar/README.md
index 4f78bfe0c..0dc35ca68 100644
--- a/packages/vant/src/action-bar/README.md
+++ b/packages/vant/src/action-bar/README.md
@@ -154,7 +154,7 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Default Value | Description |
 | --- | --- | --- |
-| --van-action-bar-background | _var(--van-background-light)_ | - |
+| --van-action-bar-background | _var(--van-background-2)_ | - |
 | --van-action-bar-height | _50px_ | - |
 | --van-action-bar-icon-width | _48px_ | - |
 | --van-action-bar-icon-height | _100%_ | - |
@@ -163,7 +163,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 | _var(--van-background-light)_ | - |
+| --van-action-bar-icon-background | _var(--van-background-2)_ | - |
 | --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 e7123fa1b..7f416a29d 100644
--- a/packages/vant/src/action-bar/README.zh-CN.md
+++ b/packages/vant/src/action-bar/README.zh-CN.md
@@ -156,18 +156,18 @@ import type {
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                  | 默认值                        | 描述 |
-| ------------------------------------- | ----------------------------- | ---- |
-| --van-action-bar-background           | _var(--van-background-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      | _var(--van-background-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)_     | -    |
+| 名称                                  | 默认值                       | 描述 |
+| ------------------------------------- | ---------------------------- | ---- |
+| --van-action-bar-background           | _var(--van-background-2)_    | -    |
+| --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      | _var(--van-background-2)_    | -    |
+| --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/index.less b/packages/vant/src/action-bar/index.less
index 86c3feced..ffbb4c462 100644
--- a/packages/vant/src/action-bar/index.less
+++ b/packages/vant/src/action-bar/index.less
@@ -1,5 +1,5 @@
 body {
-  --van-action-bar-background: var(--van-background-light);
+  --van-action-bar-background: var(--van-background-2);
   --van-action-bar-height: 50px;
 }
 
diff --git a/packages/vant/src/action-sheet/README.md b/packages/vant/src/action-sheet/README.md
index 4cc1a07eb..f8b9a9a90 100644
--- a/packages/vant/src/action-sheet/README.md
+++ b/packages/vant/src/action-sheet/README.md
@@ -247,7 +247,7 @@ The component provides the following CSS variables, which can be used to customi
 | --van-action-sheet-description-color | _var(--van-text-color-2)_ | - |
 | --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-background-light)_ | - |
+| --van-action-sheet-item-background | _var(--van-background-2)_ | - |
 | --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 52fad6774..bccb4ce7d 100644
--- a/packages/vant/src/action-sheet/README.zh-CN.md
+++ b/packages/vant/src/action-sheet/README.zh-CN.md
@@ -259,7 +259,7 @@ import type { ActionSheetProps, ActionSheetAction } from 'vant';
 | --van-action-sheet-description-color | _var(--van-text-color-2)_ | - |
 | --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-background-light)_ | - |
+| --van-action-sheet-item-background | _var(--van-background-2)_ | - |
 | --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/index.less b/packages/vant/src/action-sheet/index.less
index b54e07780..3c2e6fe7b 100644
--- a/packages/vant/src/action-sheet/index.less
+++ b/packages/vant/src/action-sheet/index.less
@@ -7,7 +7,7 @@ body {
   --van-action-sheet-description-color: var(--van-text-color-2);
   --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-background-light);
+  --van-action-sheet-item-background: var(--van-background-2);
   --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/address-list/index.less b/packages/vant/src/address-list/index.less
index 1c50e0c1d..d129925a8 100644
--- a/packages/vant/src/address-list/index.less
+++ b/packages/vant/src/address-list/index.less
@@ -28,7 +28,7 @@ body {
     width: 100%;
     padding-left: var(--van-padding-md);
     padding-right: var(--van-padding-md);
-    background-color: var(--van-background-light);
+    background-color: var(--van-background-2);
   }
 
   &__add {
@@ -46,7 +46,7 @@ body {
 
 .van-address-item {
   padding: var(--van-address-list-item-padding);
-  background-color: var(--van-background-light);
+  background-color: var(--van-background-2);
   border-radius: var(--van-radius-lg);
 
   &:not(:last-child) {
diff --git a/packages/vant/src/badge/demo/index.vue b/packages/vant/src/badge/demo/index.vue
index 1599f9d43..79cf6e16a 100644
--- a/packages/vant/src/badge/demo/index.vue
+++ b/packages/vant/src/badge/demo/index.vue
@@ -102,7 +102,7 @@ const t = useTranslate({
 
 <style lang="less">
 .demo-badge {
-  background-color: var(--van-background-light);
+  background-color: var(--van-background-2);
 
   .van-badge__wrapper {
     margin-left: var(--van-padding-md);
diff --git a/packages/vant/src/badge/index.less b/packages/vant/src/badge/index.less
index 6b2d1eaca..0fa213308 100644
--- a/packages/vant/src/badge/index.less
+++ b/packages/vant/src/badge/index.less
@@ -23,7 +23,7 @@ body {
   line-height: 1.2;
   text-align: center;
   background: var(--van-badge-background);
-  border: var(--van-badge-border-width) solid var(--van-background-light);
+  border: var(--van-badge-border-width) solid var(--van-background-2);
   border-radius: var(--van-radius-max);
 
   &--fixed {
diff --git a/packages/vant/src/button/README.md b/packages/vant/src/button/README.md
index 91174bd40..cce8f15b7 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 | _var(--van-background-light)_ | - |
+| --van-button-default-background | _var(--van-background-2)_ | - |
 | --van-button-default-border-color | _var(--van-gray-4)_ | - |
 | --van-button-primary-color | _var(--van-white)_ | - |
 | --van-button-primary-background | _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 700833bc9..a1baf78bc 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   | _var(--van-background-light)_ | -    |
+| --van-button-default-background   | _var(--van-background-2)_     | -    |
 | --van-button-default-border-color | _var(--van-gray-4)_           | -    |
 | --van-button-primary-color        | _var(--van-white)_            | -    |
 | --van-button-primary-background   | _var(--van-primary-color)_    | -    |
diff --git a/packages/vant/src/button/demo/index.vue b/packages/vant/src/button/demo/index.vue
index 903cf4f3e..4613486d7 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-background-light);
+  background: var(--van-background-2);
 
   .van-button {
     &--large {
diff --git a/packages/vant/src/button/index.less b/packages/vant/src/button/index.less
index 02a7cf6c4..0fdd9b9e6 100644
--- a/packages/vant/src/button/index.less
+++ b/packages/vant/src/button/index.less
@@ -12,7 +12,7 @@ body {
   --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: var(--van-background-light);
+  --van-button-default-background: var(--van-background-2);
   --van-button-default-border-color: var(--van-gray-4);
   --van-button-primary-color: var(--van-white);
   --van-button-primary-background: var(--van-primary-color);
diff --git a/packages/vant/src/calendar/README.md b/packages/vant/src/calendar/README.md
index cf469455c..e1ae42f7e 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 | _var(--van-background-light)_ | - |
+| --van-calendar-background | _var(--van-background-2)_ | - |
 | --van-calendar-popup-height | _80%_ | - |
 | --van-calendar-header-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 b02a2324d..e1f6f5465 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 | _var(--van-background-light)_ | - |
+| --van-calendar-background | _var(--van-background-2)_ | - |
 | --van-calendar-popup-height | _80%_ | - |
 | --van-calendar-header-shadow | _0 2px 10px rgba(125, 126, 128, 0.16)_ | - |
 | --van-calendar-header-title-height | _44px_ | - |
diff --git a/packages/vant/src/calendar/index.less b/packages/vant/src/calendar/index.less
index f208dfc77..4b8e145c1 100644
--- a/packages/vant/src/calendar/index.less
+++ b/packages/vant/src/calendar/index.less
@@ -1,5 +1,5 @@
 body {
-  --van-calendar-background: var(--van-background-light);
+  --van-calendar-background: var(--van-background-2);
   --van-calendar-popup-height: 80%;
   --van-calendar-header-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);
   --van-calendar-header-title-height: 44px;
diff --git a/packages/vant/src/card/demo/index.vue b/packages/vant/src/card/demo/index.vue
index 58a54ec3b..853e2b056 100644
--- a/packages/vant/src/card/demo/index.vue
+++ b/packages/vant/src/card/demo/index.vue
@@ -71,6 +71,6 @@ const imageURL = 'https://img.yzcdn.cn/vant/ipad.jpeg';
 
 <style lang="less">
 .demo-card {
-  background-color: var(--van-background-light);
+  background-color: var(--van-background-2);
 }
 </style>
diff --git a/packages/vant/src/cell-group/index.less b/packages/vant/src/cell-group/index.less
index c1c88178c..1c9d3ab84 100644
--- a/packages/vant/src/cell-group/index.less
+++ b/packages/vant/src/cell-group/index.less
@@ -1,5 +1,5 @@
 body {
-  --van-cell-group-background: var(--van-background-light);
+  --van-cell-group-background: var(--van-background-2);
   --van-cell-group-title-color: var(--van-text-color-2);
   --van-cell-group-title-padding: var(--van-padding-md) var(--van-padding-md);
   --van-cell-group-title-font-size: var(--van-font-size-md);
diff --git a/packages/vant/src/cell/README.md b/packages/vant/src/cell/README.md
index fab509c86..c09cecc33 100644
--- a/packages/vant/src/cell/README.md
+++ b/packages/vant/src/cell/README.md
@@ -218,7 +218,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 | _var(--van-background-light)_ | - |
+| --van-cell-background | _var(--van-background-2)_ | - |
 | --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 @@ 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 | _var(--van-background-light)_ | - |
+| --van-cell-group-background | _var(--van-background-2)_ | - |
 | --van-cell-group-title-color | _var(--van-text-color-2)_ | - |
 | --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 ab199d4ac..70cbb7920 100644
--- a/packages/vant/src/cell/README.zh-CN.md
+++ b/packages/vant/src/cell/README.zh-CN.md
@@ -223,7 +223,7 @@ import type {
 | --van-cell-vertical-padding | _10px_ | - |
 | --van-cell-horizontal-padding | _var(--van-padding-md)_ | - |
 | --van-cell-text-color | _var(--van-text-color)_ | - |
-| --van-cell-background | _var(--van-background-light)_ | - |
+| --van-cell-background | _var(--van-background-2)_ | - |
 | --van-cell-border-color | _var(--van-border-color)_ | - |
 | --van-cell-active-color | _var(--van-active-color)_ | - |
 | --van-cell-required-color | _var(--van-danger-color)_ | - |
@@ -237,7 +237,7 @@ import type {
 | --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 | _var(--van-background-light)_ | - |
+| --van-cell-group-background | _var(--van-background-2)_ | - |
 | --van-cell-group-title-color | _var(--van-text-color-2)_ | - |
 | --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/index.less b/packages/vant/src/cell/index.less
index 07f2b0110..0b7f379aa 100644
--- a/packages/vant/src/cell/index.less
+++ b/packages/vant/src/cell/index.less
@@ -6,7 +6,7 @@ body {
   --van-cell-vertical-padding: 10px;
   --van-cell-horizontal-padding: var(--van-padding-md);
   --van-cell-text-color: var(--van-text-color);
-  --van-cell-background: var(--van-background-light);
+  --van-cell-background: var(--van-background-2);
   --van-cell-border-color: var(--van-border-color);
   --van-cell-active-color: var(--van-active-color);
   --van-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 d05143189..e99f37506 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-background-light);
+  background: var(--van-background-2);
 
   .van-doc-demo-block {
     padding: 0 var(--van-padding-md);
diff --git a/packages/vant/src/collapse-item/index.less b/packages/vant/src/collapse-item/index.less
index c1beaaf5b..5d95f9496 100644
--- a/packages/vant/src/collapse-item/index.less
+++ b/packages/vant/src/collapse-item/index.less
@@ -7,7 +7,7 @@ body {
   --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-text-color-2);
-  --van-collapse-item-content-background: var(--van-background-light);
+  --van-collapse-item-content-background: var(--van-background-2);
   --van-collapse-item-title-disabled-color: var(--van-text-color-3);
 }
 
diff --git a/packages/vant/src/collapse/README.md b/packages/vant/src/collapse/README.md
index d53910397..15b034e69 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-text-color-2)_ | - |
-| --van-collapse-item-content-background | _var(--van-background-light)_ | - |
+| --van-collapse-item-content-background | _var(--van-background-2)_ | - |
 | --van-collapse-item-title-disabled-color | _var(--van-text-color-3)_ | - |
diff --git a/packages/vant/src/collapse/README.zh-CN.md b/packages/vant/src/collapse/README.zh-CN.md
index 8668863ab..45b7f20ea 100644
--- a/packages/vant/src/collapse/README.zh-CN.md
+++ b/packages/vant/src/collapse/README.zh-CN.md
@@ -213,5 +213,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-text-color-2)_ | - |
-| --van-collapse-item-content-background | _var(--van-background-light)_ | - |
+| --van-collapse-item-content-background | _var(--van-background-2)_ | - |
 | --van-collapse-item-title-disabled-color | _var(--van-text-color-3)_ | - |
diff --git a/packages/vant/src/config-provider/README.md b/packages/vant/src/config-provider/README.md
index ba88354cd..04da5b3eb 100644
--- a/packages/vant/src/config-provider/README.md
+++ b/packages/vant/src/config-provider/README.md
@@ -163,7 +163,7 @@ There are all **Basic Variables** below, for component CSS Variables, please ref
 --van-active-opacity: 0.6;
 --van-disabled-opacity: 0.5;
 --van-background: var(--van-gray-1);
---van-background-light: var(--van-white);
+--van-background-2: var(--van-white);
 
 // Padding
 --van-padding-base: 4px;
diff --git a/packages/vant/src/config-provider/README.zh-CN.md b/packages/vant/src/config-provider/README.zh-CN.md
index 0c1b73baf..838688bbb 100644
--- a/packages/vant/src/config-provider/README.zh-CN.md
+++ b/packages/vant/src/config-provider/README.zh-CN.md
@@ -165,7 +165,7 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 --van-active-opacity: 0.6;
 --van-disabled-opacity: 0.5;
 --van-background: var(--van-gray-1);
---van-background-light: var(--van-white);
+--van-background-2: var(--van-white);
 
 // Padding
 --van-padding-base: 4px;
diff --git a/packages/vant/src/contact-list/index.less b/packages/vant/src/contact-list/index.less
index 1b8d7b6e7..233fdbd2e 100644
--- a/packages/vant/src/contact-list/index.less
+++ b/packages/vant/src/contact-list/index.less
@@ -55,7 +55,7 @@ body {
     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-background-light);
+    background-color: var(--van-background-2);
   }
 
   &__add {
diff --git a/packages/vant/src/count-down/demo/index.vue b/packages/vant/src/count-down/demo/index.vue
index 165afa1bd..b1a2e4c60 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-background-light);
+  background-color: var(--van-background-2);
 
   .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 171a32a44..b37e9fba1 100644
--- a/packages/vant/src/coupon-list/README.md
+++ b/packages/vant/src/coupon-list/README.md
@@ -169,7 +169,7 @@ The component provides the following CSS variables, which can be used to customi
 | --van-coupon-content-height | _84px_ | - |
 | --van-coupon-content-padding | _14px 0_ | - |
 | --van-coupon-content-text-color | _var(--van-text-color)_ | - |
-| --van-coupon-background | _var(--van-background-light)_ | - |
+| --van-coupon-background | _var(--van-background-2)_ | - |
 | --van-coupon-active-background | _var(--van-active-color)_ | - |
 | --van-coupon-radius | _var(--van-radius-lg)_ | - |
 | --van-coupon-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 bfdce8fd5..4d1aa21f4 100644
--- a/packages/vant/src/coupon-list/README.zh-CN.md
+++ b/packages/vant/src/coupon-list/README.zh-CN.md
@@ -171,7 +171,7 @@ import type { CouponCellProps, CouponListProps } from 'vant';
 | --van-coupon-content-height | _84px_ | - |
 | --van-coupon-content-padding | _14px 0_ | - |
 | --van-coupon-content-text-color | _var(--van-text-color)_ | - |
-| --van-coupon-background | _var(--van-background-light)_ | - |
+| --van-coupon-background | _var(--van-background-2)_ | - |
 | --van-coupon-active-background | _var(--van-active-color)_ | - |
 | --van-coupon-radius | _var(--van-radius-lg)_ | - |
 | --van-coupon-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 f344d842e..3b48a426e 100644
--- a/packages/vant/src/coupon-list/index.less
+++ b/packages/vant/src/coupon-list/index.less
@@ -37,7 +37,7 @@ body {
   &__exchange-bar {
     display: flex;
     align-items: center;
-    background-color: var(--van-background-light);
+    background-color: var(--van-background-2);
   }
 
   &__exchange {
@@ -72,7 +72,7 @@ body {
     width: 100%;
     padding: 5px var(--van-padding-md);
     font-weight: var(--van-font-bold);
-    background-color: var(--van-background-light);
+    background-color: var(--van-background-2);
   }
 
   &__close {
diff --git a/packages/vant/src/coupon/index.less b/packages/vant/src/coupon/index.less
index 18b9cf8bb..164998e1e 100644
--- a/packages/vant/src/coupon/index.less
+++ b/packages/vant/src/coupon/index.less
@@ -5,7 +5,7 @@ body {
   --van-coupon-content-height: 84px;
   --van-coupon-content-padding: 14px 0;
   --van-coupon-content-text-color: var(--van-text-color);
-  --van-coupon-background: var(--van-background-light);
+  --van-coupon-background: var(--van-background-2);
   --van-coupon-active-background: var(--van-active-color);
   --van-coupon-radius: var(--van-radius-lg);
   --van-coupon-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 df5db2fde..02e052290 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-duration-base)_ | - |
 | --van-dialog-radius | _16px_ | - |
-| --van-dialog-background | _var(--van-background-light)_ | - |
+| --van-dialog-background | _var(--van-background-2)_ | - |
 | --van-dialog-header-font-weight | _var(--van-font-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 4136ff971..169a07c69 100644
--- a/packages/vant/src/dialog/README.zh-CN.md
+++ b/packages/vant/src/dialog/README.zh-CN.md
@@ -293,7 +293,7 @@ import type {
 | --van-dialog-font-size | _var(--van-font-size-lg)_ | - |
 | --van-dialog-transition | _var(--van-duration-base)_ | - |
 | --van-dialog-radius | _16px_ | - |
-| --van-dialog-background | _var(--van-background-light)_ | - |
+| --van-dialog-background | _var(--van-background-2)_ | - |
 | --van-dialog-header-font-weight | _var(--van-font-bold)_ | - |
 | --van-dialog-header-line-height | _24px_ | - |
 | --van-dialog-header-padding-top | _26px_ | - |
diff --git a/packages/vant/src/dialog/index.less b/packages/vant/src/dialog/index.less
index fee1468b9..db20cc604 100644
--- a/packages/vant/src/dialog/index.less
+++ b/packages/vant/src/dialog/index.less
@@ -4,7 +4,7 @@ body {
   --van-dialog-font-size: var(--van-font-size-lg);
   --van-dialog-transition: var(--van-duration-base);
   --van-dialog-radius: 16px;
-  --van-dialog-background: var(--van-background-light);
+  --van-dialog-background: var(--van-background-2);
   --van-dialog-header-font-weight: var(--van-font-bold);
   --van-dialog-header-line-height: 24px;
   --van-dialog-header-padding-top: 26px;
diff --git a/packages/vant/src/divider/demo/index.vue b/packages/vant/src/divider/demo/index.vue
index 637bf5d2e..9dbda9a71 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-background-light);
+  background-color: var(--van-background-2);
 
   .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 ceff44669..3729e12bb 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 | _var(--van-background-light)_ | - |
+| --van-dropdown-menu-background | _var(--van-background-2)_ | - |
 | --van-dropdown-menu-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 254eb89b9..bb8abf819 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 | _var(--van-background-light)_ | - |
+| --van-dropdown-menu-background | _var(--van-background-2)_ | - |
 | --van-dropdown-menu-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/index.less b/packages/vant/src/dropdown-menu/index.less
index 08fd94d3a..ab60c97a2 100644
--- a/packages/vant/src/dropdown-menu/index.less
+++ b/packages/vant/src/dropdown-menu/index.less
@@ -1,6 +1,6 @@
 body {
   --van-dropdown-menu-height: 48px;
-  --van-dropdown-menu-background: var(--van-background-light);
+  --van-dropdown-menu-background: var(--van-background-2);
   --van-dropdown-menu-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
   --van-dropdown-menu-title-font-size: 15px;
   --van-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 3698ec29e..41e867da8 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-background-light);
+  background: var(--van-background-2);
 
   .custom-image {
     .van-empty__image {
diff --git a/packages/vant/src/grid-item/index.less b/packages/vant/src/grid-item/index.less
index a1b56dd8b..4c1963c50 100644
--- a/packages/vant/src/grid-item/index.less
+++ b/packages/vant/src/grid-item/index.less
@@ -1,6 +1,6 @@
 body {
   --van-grid-item-content-padding: var(--van-padding-md) var(--van-padding-xs);
-  --van-grid-item-content-background: var(--van-background-light);
+  --van-grid-item-content-background: var(--van-background-2);
   --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.md b/packages/vant/src/grid/README.md
index 483649d9a..7a061483d 100644
--- a/packages/vant/src/grid/README.md
+++ b/packages/vant/src/grid/README.md
@@ -160,7 +160,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 | _var(--van-background-light)_ | - |
+| --van-grid-item-content-background | _var(--van-background-2)_ | - |
 | --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 14f46431b..8d2ad3162 100644
--- a/packages/vant/src/grid/README.zh-CN.md
+++ b/packages/vant/src/grid/README.zh-CN.md
@@ -176,7 +176,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 | _var(--van-background-light)_ | - |
+| --van-grid-item-content-background | _var(--van-background-2)_ | - |
 | --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/icon/demo/index.vue b/packages/vant/src/icon/demo/index.vue
index dfdfd0927..e165665a6 100644
--- a/packages/vant/src/icon/demo/index.vue
+++ b/packages/vant/src/icon/demo/index.vue
@@ -197,7 +197,7 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
   &-tab-panel {
     width: auto;
     margin: 20px;
-    background-color: var(--van-background-light);
+    background-color: var(--van-background-2);
     border-radius: 12px;
   }
 
diff --git a/packages/vant/src/image/demo/index.vue b/packages/vant/src/image/demo/index.vue
index 66890fa43..07742654a 100644
--- a/packages/vant/src/image/demo/index.vue
+++ b/packages/vant/src/image/demo/index.vue
@@ -124,7 +124,7 @@ const positions2 = ['top', 'center', 'bottom'] as const;
 <style lang="less">
 .demo-image {
   overflow-x: hidden;
-  background-color: var(--van-background-light);
+  background-color: var(--van-background-2);
 
   .van-row {
     padding: 0 var(--van-padding-md);
diff --git a/packages/vant/src/index-anchor/index.less b/packages/vant/src/index-anchor/index.less
index ba4da4a38..d59ad2c40 100644
--- a/packages/vant/src/index-anchor/index.less
+++ b/packages/vant/src/index-anchor/index.less
@@ -7,7 +7,7 @@ body {
   --van-index-anchor-line-height: 32px;
   --van-index-anchor-background: transparent;
   --van-index-anchor-sticky-text-color: var(--van-primary-color);
-  --van-index-anchor-sticky-background: var(--van-background-light);
+  --van-index-anchor-sticky-background: var(--van-background-2);
 }
 
 .van-index-anchor {
diff --git a/packages/vant/src/index-bar/README.md b/packages/vant/src/index-bar/README.md
index 19619561f..1a3d84a3a 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 | _transparent_ | - |
 | --van-index-anchor-sticky-text-color | _var(--van-primary-color)_ | - |
-| --van-index-anchor-sticky-background | _var(--van-background-light)_ | - |
+| --van-index-anchor-sticky-background | _var(--van-background-2)_ | - |
diff --git a/packages/vant/src/index-bar/README.zh-CN.md b/packages/vant/src/index-bar/README.zh-CN.md
index c286a441a..864fb552a 100644
--- a/packages/vant/src/index-bar/README.zh-CN.md
+++ b/packages/vant/src/index-bar/README.zh-CN.md
@@ -134,18 +134,18 @@ indexBarRef.value?.scrollTo('B');
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                 | 默认值                        | 描述 |
-| ------------------------------------ | ----------------------------- | ---- |
-| --van-index-bar-sidebar-z-index      | _2_                           | -    |
-| --van-index-bar-index-font-size      | _var(--van-font-size-xs)_     | -    |
-| --van-index-bar-index-line-height    | _var(--van-line-height-xs)_   | -    |
-| --van-index-bar-index-active-color   | _var(--van-primary-color)_    | -    |
-| --van-index-anchor-z-index           | _1_                           | -    |
-| --van-index-anchor-padding           | _0 var(--van-padding-md)_     | -    |
-| --van-index-anchor-text-color        | _var(--van-text-color)_       | -    |
-| --van-index-anchor-font-weight       | _var(--van-font-bold)_        | -    |
-| --van-index-anchor-font-size         | _var(--van-font-size-md)_     | -    |
-| --van-index-anchor-line-height       | _32px_                        | -    |
-| --van-index-anchor-background        | _transparent_                 | -    |
-| --van-index-anchor-sticky-text-color | _var(--van-primary-color)_    | -    |
-| --van-index-anchor-sticky-background | _var(--van-background-light)_ | -    |
+| 名称                                 | 默认值                      | 描述 |
+| ------------------------------------ | --------------------------- | ---- |
+| --van-index-bar-sidebar-z-index      | _2_                         | -    |
+| --van-index-bar-index-font-size      | _var(--van-font-size-xs)_   | -    |
+| --van-index-bar-index-line-height    | _var(--van-line-height-xs)_ | -    |
+| --van-index-bar-index-active-color   | _var(--van-primary-color)_  | -    |
+| --van-index-anchor-z-index           | _1_                         | -    |
+| --van-index-anchor-padding           | _0 var(--van-padding-md)_   | -    |
+| --van-index-anchor-text-color        | _var(--van-text-color)_     | -    |
+| --van-index-anchor-font-weight       | _var(--van-font-bold)_      | -    |
+| --van-index-anchor-font-size         | _var(--van-font-size-md)_   | -    |
+| --van-index-anchor-line-height       | _32px_                      | -    |
+| --van-index-anchor-background        | _transparent_               | -    |
+| --van-index-anchor-sticky-text-color | _var(--van-primary-color)_  | -    |
+| --van-index-anchor-sticky-background | _var(--van-background-2)_   | -    |
diff --git a/packages/vant/src/loading/demo/index.vue b/packages/vant/src/loading/demo/index.vue
index b94e6a91f..a37ea1889 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-background-light);
+  background: var(--van-background-2);
 
   .van-loading {
     display: inline-block;
diff --git a/packages/vant/src/nav-bar/README.md b/packages/vant/src/nav-bar/README.md
index 424fb9134..eaa048863 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       | _var(--van-background-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_                           | -           |
+| Name                           | Default Value              | Description |
+| ------------------------------ | -------------------------- | ----------- |
+| --van-nav-bar-height           | _46px_                     | -           |
+| --van-nav-bar-background       | _var(--van-background-2)_  | -           |
+| --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 6975ac0a1..f9dc2924c 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       | _var(--van-background-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_                           | -    |
+| 名称                           | 默认值                     | 描述 |
+| ------------------------------ | -------------------------- | ---- |
+| --van-nav-bar-height           | _46px_                     | -    |
+| --van-nav-bar-background       | _var(--van-background-2)_  | -    |
+| --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/index.less b/packages/vant/src/nav-bar/index.less
index 0caea2066..cba2f9383 100644
--- a/packages/vant/src/nav-bar/index.less
+++ b/packages/vant/src/nav-bar/index.less
@@ -1,6 +1,6 @@
 body {
   --van-nav-bar-height: 46px;
-  --van-nav-bar-background: var(--van-background-light);
+  --van-nav-bar-background: var(--van-background-2);
   --van-nav-bar-arrow-size: 16px;
   --van-nav-bar-icon-color: var(--van-primary-color);
   --van-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 d02527332..d4cfb436e 100644
--- a/packages/vant/src/notice-bar/demo/index.vue
+++ b/packages/vant/src/notice-bar/demo/index.vue
@@ -81,7 +81,7 @@ const t = useTranslate({
 
 <style lang="less">
 .demo-notice-bar {
-  background: var(--van-background-light);
+  background: var(--van-background-2);
 
   .van-notice-bar:not(:first-of-type) {
     margin-top: 4px;
diff --git a/packages/vant/src/number-keyboard/index.less b/packages/vant/src/number-keyboard/index.less
index 79c49a49a..93f034f01 100644
--- a/packages/vant/src/number-keyboard/index.less
+++ b/packages/vant/src/number-keyboard/index.less
@@ -3,7 +3,7 @@ body {
   --van-number-keyboard-key-height: 48px;
   --van-number-keyboard-key-font-size: 28px;
   --van-number-keyboard-key-active-color: var(--van-gray-3);
-  --van-number-keyboard-key-background: var(--van-background-light);
+  --van-number-keyboard-key-background: var(--van-background-2);
   --van-number-keyboard-delete-font-size: var(--van-font-size-lg);
   --van-number-keyboard-title-color: var(--van-gray-7);
   --van-number-keyboard-title-height: 34px;
diff --git a/packages/vant/src/overlay/demo/index.vue b/packages/vant/src/overlay/demo/index.vue
index 39295ad21..e300ecbf4 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-background-light);
+  background: var(--van-background-2);
 
   .wrapper {
     display: flex;
@@ -59,7 +59,7 @@ const showEmbedded = ref(false);
   .block {
     width: 120px;
     height: 120px;
-    background-color: var(--van-background-light);
+    background-color: var(--van-background-2);
     border-radius: 4px;
   }
 }
diff --git a/packages/vant/src/pagination/README.md b/packages/vant/src/pagination/README.md
index 51dbd07ae..bd858d1c8 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 | _var(--van-background)_ | - |
-| --van-pagination-background | _var(--van-background-light)_ | - |
+| --van-pagination-background | _var(--van-background-2)_ | - |
 | --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 0ec5432a1..9e895f1b4 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 | _var(--van-background)_ | - |
-| --van-pagination-background | _var(--van-background-light)_ | - |
+| --van-pagination-background | _var(--van-background-2)_ | - |
 | --van-pagination-desc-color | _var(--van-gray-7)_ | - |
 | --van-pagination-disabled-opacity | _var(--van-disabled-opacity)_ | - |
diff --git a/packages/vant/src/pagination/index.less b/packages/vant/src/pagination/index.less
index 879fe9395..48246d4fc 100644
--- a/packages/vant/src/pagination/index.less
+++ b/packages/vant/src/pagination/index.less
@@ -5,7 +5,7 @@ body {
   --van-pagination-item-default-color: var(--van-primary-color);
   --van-pagination-item-disabled-color: var(--van-gray-7);
   --van-pagination-item-disabled-background: var(--van-background);
-  --van-pagination-background: var(--van-background-light);
+  --van-pagination-background: var(--van-background-2);
   --van-pagination-desc-color: var(--van-gray-7);
   --van-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 74de779e2..b39b0aac9 100644
--- a/packages/vant/src/password-input/README.md
+++ b/packages/vant/src/password-input/README.md
@@ -168,7 +168,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-radius | _6px_ | - |
-| --van-password-input-background | _var(--van-background-light)_ | - |
+| --van-password-input-background | _var(--van-background-2)_ | - |
 | --van-password-input-info-color | _var(--van-text-color-2)_ | - |
 | --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 1d254d845..b19688a0b 100644
--- a/packages/vant/src/password-input/README.zh-CN.md
+++ b/packages/vant/src/password-input/README.zh-CN.md
@@ -172,20 +172,20 @@ import type { PasswordInputProps } from 'vant';
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                  | 默认值                        | 描述 |
-| ------------------------------------- | ----------------------------- | ---- |
-| --van-password-input-height           | _50px_                        | -    |
-| --van-password-input-margin           | _0 var(--van-padding-md)_     | -    |
-| --van-password-input-font-size        | _20px_                        | -    |
-| --van-password-input-radius           | _6px_                         | -    |
-| --van-password-input-background       | _var(--van-background-light)_ | -    |
-| --van-password-input-info-color       | _var(--van-text-color-2)_     | -    |
-| --van-password-input-info-font-size   | _var(--van-font-size-md)_     | -    |
-| --van-password-input-error-info-color | _var(--van-danger-color)_     | -    |
-| --van-password-input-dot-size         | _10px_                        | -    |
-| --van-password-input-dot-color        | _var(--van-text-color)_       | -    |
-| --van-password-input-text-color       | _var(--van-text-color)_       | -    |
-| --van-password-input-cursor-color     | _var(--van-text-color)_       | -    |
-| --van-password-input-cursor-width     | _1px_                         | -    |
-| --van-password-input-cursor-height    | _40%_                         | -    |
-| --van-password-input-cursor-duration  | _1s_                          | -    |
+| 名称                                  | 默认值                    | 描述 |
+| ------------------------------------- | ------------------------- | ---- |
+| --van-password-input-height           | _50px_                    | -    |
+| --van-password-input-margin           | _0 var(--van-padding-md)_ | -    |
+| --van-password-input-font-size        | _20px_                    | -    |
+| --van-password-input-radius           | _6px_                     | -    |
+| --van-password-input-background       | _var(--van-background-2)_ | -    |
+| --van-password-input-info-color       | _var(--van-text-color-2)_ | -    |
+| --van-password-input-info-font-size   | _var(--van-font-size-md)_ | -    |
+| --van-password-input-error-info-color | _var(--van-danger-color)_ | -    |
+| --van-password-input-dot-size         | _10px_                    | -    |
+| --van-password-input-dot-color        | _var(--van-text-color)_   | -    |
+| --van-password-input-text-color       | _var(--van-text-color)_   | -    |
+| --van-password-input-cursor-color     | _var(--van-text-color)_   | -    |
+| --van-password-input-cursor-width     | _1px_                     | -    |
+| --van-password-input-cursor-height    | _40%_                     | -    |
+| --van-password-input-cursor-duration  | _1s_                      | -    |
diff --git a/packages/vant/src/password-input/index.less b/packages/vant/src/password-input/index.less
index fadbe2466..212cfb9d5 100644
--- a/packages/vant/src/password-input/index.less
+++ b/packages/vant/src/password-input/index.less
@@ -3,7 +3,7 @@ body {
   --van-password-input-margin: 0 var(--van-padding-md);
   --van-password-input-font-size: 20px;
   --van-password-input-radius: 6px;
-  --van-password-input-background: var(--van-background-light);
+  --van-password-input-background: var(--van-background-2);
   --van-password-input-info-color: var(--van-text-color-2);
   --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/picker/README.md b/packages/vant/src/picker/README.md
index 7b896f471..cc5e9f3b1 100644
--- a/packages/vant/src/picker/README.md
+++ b/packages/vant/src/picker/README.md
@@ -396,7 +396,7 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Default Value | Description |
 | --- | --- | --- |
-| --van-picker-background | _var(--van-background-light)_ | - |
+| --van-picker-background | _var(--van-background-2)_ | - |
 | --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 5bb84113d..ea30293b4 100644
--- a/packages/vant/src/picker/README.zh-CN.md
+++ b/packages/vant/src/picker/README.zh-CN.md
@@ -413,23 +413,23 @@ pickerRef.value?.confirm();
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                 | 默认值                        | 描述 |
-| ------------------------------------ | ----------------------------- | ---- |
-| --van-picker-background              | _var(--van-background-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-link-color)_       | -    |
-| --van-picker-cancel-action-color     | _var(--van-text-color-2)_     | -    |
-| --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-text-color)_       | -    |
-| --van-picker-option-disabled-opacity | _0.3_                         | -    |
-| --van-picker-mask-color              | _linear-gradient_             | -    |
-| --van-picker-loading-icon-color      | _var(--van-primary-color)_    | -    |
-| --van-picker-loading-mask-color      | _rgba(255, 255, 255, 0.9)_    | -    |
+| 名称                                 | 默认值                      | 描述 |
+| ------------------------------------ | --------------------------- | ---- |
+| --van-picker-background              | _var(--van-background-2)_   | -    |
+| --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-link-color)_     | -    |
+| --van-picker-cancel-action-color     | _var(--van-text-color-2)_   | -    |
+| --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-text-color)_     | -    |
+| --van-picker-option-disabled-opacity | _0.3_                       | -    |
+| --van-picker-mask-color              | _linear-gradient_           | -    |
+| --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/index.less b/packages/vant/src/picker/index.less
index df2f517a1..3a673f331 100644
--- a/packages/vant/src/picker/index.less
+++ b/packages/vant/src/picker/index.less
@@ -1,5 +1,5 @@
 body {
-  --van-picker-background: var(--van-background-light);
+  --van-picker-background: var(--van-background-2);
   --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/popover/README.md b/packages/vant/src/popover/README.md
index d8457e4f8..08c64846d 100644
--- a/packages/vant/src/popover/README.md
+++ b/packages/vant/src/popover/README.md
@@ -286,7 +286,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 | _var(--van-background-light)_ | - |
+| --van-popover-light-background | _var(--van-background-2)_ | - |
 | --van-popover-light-action-disabled-text-color | _var(--van-text-color-3)_ | - |
 | --van-popover-dark-text-color | _var(--van-white)_ | - |
 | --van-popover-dark-background | _#4a4a4a_ | - |
diff --git a/packages/vant/src/popover/README.zh-CN.md b/packages/vant/src/popover/README.zh-CN.md
index f91909b61..614579278 100644
--- a/packages/vant/src/popover/README.zh-CN.md
+++ b/packages/vant/src/popover/README.zh-CN.md
@@ -298,7 +298,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 | _var(--van-background-light)_ | - |
+| --van-popover-light-background | _var(--van-background-2)_ | - |
 | --van-popover-light-action-disabled-text-color | _var(--van-text-color-3)_ | - |
 | --van-popover-dark-text-color | _var(--van-white)_ | - |
 | --van-popover-dark-background | _#4a4a4a_ | - |
diff --git a/packages/vant/src/popover/index.less b/packages/vant/src/popover/index.less
index 7ec4f8a6e..db5f99009 100644
--- a/packages/vant/src/popover/index.less
+++ b/packages/vant/src/popover/index.less
@@ -7,7 +7,7 @@ body {
   --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: var(--van-background-light);
+  --van-popover-light-background: var(--van-background-2);
   --van-popover-light-action-disabled-text-color: var(--van-text-color-3);
   --van-popover-dark-text-color: var(--van-white);
   --van-popover-dark-background: #4a4a4a;
diff --git a/packages/vant/src/popup/README.md b/packages/vant/src/popup/README.md
index 253dfcaa1..406a57ac3 100644
--- a/packages/vant/src/popup/README.md
+++ b/packages/vant/src/popup/README.md
@@ -167,7 +167,7 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Default Value | Description |
 | --- | --- | --- |
-| --van-popup-background | _var(--van-background-light)_ | - |
+| --van-popup-background | _var(--van-background-2)_ | - |
 | --van-popup-transition | _transform var(--van-duration-base)_ | - |
 | --van-popup-round-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 50162ccaa..66ff4bcf3 100644
--- a/packages/vant/src/popup/README.zh-CN.md
+++ b/packages/vant/src/popup/README.zh-CN.md
@@ -173,7 +173,7 @@ import type {
 
 | 名称                           | 默认值                               | 描述 |
 | ------------------------------ | ------------------------------------ | ---- |
-| --van-popup-background         | _var(--van-background-light)_        | -    |
+| --van-popup-background         | _var(--van-background-2)_            | -    |
 | --van-popup-transition         | _transform var(--van-duration-base)_ | -    |
 | --van-popup-round-radius       | _16px_                               | -    |
 | --van-popup-close-icon-size    | _22px_                               | -    |
diff --git a/packages/vant/src/popup/index.less b/packages/vant/src/popup/index.less
index 13df7e5f3..afde74aea 100644
--- a/packages/vant/src/popup/index.less
+++ b/packages/vant/src/popup/index.less
@@ -1,5 +1,5 @@
 body {
-  --van-popup-background: var(--van-background-light);
+  --van-popup-background: var(--van-background-2);
   --van-popup-transition: transform var(--van-duration-base);
   --van-popup-round-radius: 16px;
   --van-popup-close-icon-size: 22px;
diff --git a/packages/vant/src/progress/demo/index.vue b/packages/vant/src/progress/demo/index.vue
index 760cc0b7a..191631b70 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-background-light);
+  background: var(--van-background-2);
 
   .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 110ccc36d..18981de36 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-background-light);
+  background-color: var(--van-background-2);
 
   .van-pull-refresh {
     height: calc(100vh - 50px);
diff --git a/packages/vant/src/rate/demo/index.vue b/packages/vant/src/rate/demo/index.vue
index fd6674b31..ef84bc3d7 100644
--- a/packages/vant/src/rate/demo/index.vue
+++ b/packages/vant/src/rate/demo/index.vue
@@ -88,7 +88,7 @@ const onChange = (value: number) => Toast(t('toastContent', value));
 <style lang="less">
 .demo-rate {
   padding-bottom: 20px;
-  background-color: var(--van-background-light);
+  background-color: var(--van-background-2);
 
   .van-rate {
     margin-left: var(--van-padding-md);
diff --git a/packages/vant/src/search/README.md b/packages/vant/src/search/README.md
index e872913c3..dec8a27f7 100644
--- a/packages/vant/src/search/README.md
+++ b/packages/vant/src/search/README.md
@@ -219,16 +219,16 @@ searchRef.value?.focus();
 
 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-search-padding | _10px var(--van-padding-sm)_ | - |
-| --van-search-background | _var(--van-background-light)_ | - |
-| --van-search-content-background | _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)_ | - |
+| Name                            | Default Value                | Description |
+| ------------------------------- | ---------------------------- | ----------- |
+| --van-search-padding            | _10px var(--van-padding-sm)_ | -           |
+| --van-search-background         | _var(--van-background-2)_    | -           |
+| --van-search-content-background | _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/README.zh-CN.md b/packages/vant/src/search/README.zh-CN.md
index 58d3a86d3..df8a78d6b 100644
--- a/packages/vant/src/search/README.zh-CN.md
+++ b/packages/vant/src/search/README.zh-CN.md
@@ -231,19 +231,19 @@ searchRef.value?.focus();
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                            | 默认值                        | 描述 |
-| ------------------------------- | ----------------------------- | ---- |
-| --van-search-padding            | _10px var(--van-padding-sm)_  | -    |
-| --van-search-background         | _var(--van-background-light)_ | -    |
-| --van-search-content-background | _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         | _var(--van-background-2)_    | -    |
+| --van-search-content-background | _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/index.less b/packages/vant/src/search/index.less
index e6dad8d1c..2c670cabf 100644
--- a/packages/vant/src/search/index.less
+++ b/packages/vant/src/search/index.less
@@ -1,6 +1,6 @@
 body {
   --van-search-padding: 10px var(--van-padding-sm);
-  --van-search-background: var(--van-background-light);
+  --van-search-background: var(--van-background-2);
   --van-search-content-background: var(--van-gray-1);
   --van-search-input-height: 34px;
   --van-search-label-padding: 0 5px;
diff --git a/packages/vant/src/share-sheet/README.md b/packages/vant/src/share-sheet/README.md
index 5c8193e35..c33181519 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-background-light)_ | - |
+| --van-share-sheet-cancel-button-background | _var(--van-background-2)_ | - |
diff --git a/packages/vant/src/share-sheet/README.zh-CN.md b/packages/vant/src/share-sheet/README.zh-CN.md
index aef82da84..a84a69ad1 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-background-light)_ | - |
+| --van-share-sheet-cancel-button-background | _var(--van-background-2)_ | - |
 
 ## 常见问题
 
diff --git a/packages/vant/src/share-sheet/index.less b/packages/vant/src/share-sheet/index.less
index 50aab826a..e0458cf35 100644
--- a/packages/vant/src/share-sheet/index.less
+++ b/packages/vant/src/share-sheet/index.less
@@ -15,7 +15,7 @@ body {
   --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-background-light);
+  --van-share-sheet-cancel-button-background: var(--van-background-2);
 }
 
 .van-share-sheet {
diff --git a/packages/vant/src/sidebar-item/index.less b/packages/vant/src/sidebar-item/index.less
index e2c7a5b00..591fe65b7 100644
--- a/packages/vant/src/sidebar-item/index.less
+++ b/packages/vant/src/sidebar-item/index.less
@@ -11,7 +11,7 @@ body {
   --van-sidebar-selected-border-width: 4px;
   --van-sidebar-selected-border-height: 16px;
   --van-sidebar-selected-border-color: var(--van-primary-color);
-  --van-sidebar-selected-background: var(--van-background-light);
+  --van-sidebar-selected-background: var(--van-background-2);
 }
 
 .van-sidebar-item {
diff --git a/packages/vant/src/sidebar/README.md b/packages/vant/src/sidebar/README.md
index ae03a8c6c..7bca9155b 100644
--- a/packages/vant/src/sidebar/README.md
+++ b/packages/vant/src/sidebar/README.md
@@ -154,4 +154,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-primary-color)_ | - |
-| --van-sidebar-selected-background | _var(--van-background-light)_ | - |
+| --van-sidebar-selected-background | _var(--van-background-2)_ | - |
diff --git a/packages/vant/src/sidebar/README.zh-CN.md b/packages/vant/src/sidebar/README.zh-CN.md
index 1971ca920..114e35842 100644
--- a/packages/vant/src/sidebar/README.zh-CN.md
+++ b/packages/vant/src/sidebar/README.zh-CN.md
@@ -147,19 +147,19 @@ import type { SidebarProps, SidebarItemProps } from 'vant';
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                 | 默认值                        | 描述 |
-| ------------------------------------ | ----------------------------- | ---- |
-| --van-sidebar-width                  | _80px_                        | -    |
-| --van-sidebar-font-size              | _var(--van-font-size-md)_     | -    |
-| --van-sidebar-line-height            | _var(--van-line-height-md)_   | -    |
-| --van-sidebar-text-color             | _var(--van-text-color)_       | -    |
-| --van-sidebar-disabled-text-color    | _var(--van-text-color-3)_     | -    |
-| --van-sidebar-padding                | _20px var(--van-padding-sm)_  | -    |
-| --van-sidebar-active-color           | _var(--van-active-color)_     | -    |
-| --van-sidebar-background             | _var(--van-background)_       | -    |
-| --van-sidebar-selected-font-weight   | _var(--van-font-bold)_        | -    |
-| --van-sidebar-selected-text-color    | _var(--van-text-color)_       | -    |
-| --van-sidebar-selected-border-width  | _4px_                         | -    |
-| --van-sidebar-selected-border-height | _16px_                        | -    |
-| --van-sidebar-selected-border-color  | _var(--van-primary-color)_    | -    |
-| --van-sidebar-selected-background    | _var(--van-background-light)_ | -    |
+| 名称                                 | 默认值                       | 描述 |
+| ------------------------------------ | ---------------------------- | ---- |
+| --van-sidebar-width                  | _80px_                       | -    |
+| --van-sidebar-font-size              | _var(--van-font-size-md)_    | -    |
+| --van-sidebar-line-height            | _var(--van-line-height-md)_  | -    |
+| --van-sidebar-text-color             | _var(--van-text-color)_      | -    |
+| --van-sidebar-disabled-text-color    | _var(--van-text-color-3)_    | -    |
+| --van-sidebar-padding                | _20px var(--van-padding-sm)_ | -    |
+| --van-sidebar-active-color           | _var(--van-active-color)_    | -    |
+| --van-sidebar-background             | _var(--van-background)_      | -    |
+| --van-sidebar-selected-font-weight   | _var(--van-font-bold)_       | -    |
+| --van-sidebar-selected-text-color    | _var(--van-text-color)_      | -    |
+| --van-sidebar-selected-border-width  | _4px_                        | -    |
+| --van-sidebar-selected-border-height | _16px_                       | -    |
+| --van-sidebar-selected-border-color  | _var(--van-primary-color)_   | -    |
+| --van-sidebar-selected-background    | _var(--van-background-2)_    | -    |
diff --git a/packages/vant/src/sidebar/demo/index.vue b/packages/vant/src/sidebar/demo/index.vue
index 1d9b0a495..46bc920a3 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-background-light);
+  background-color: var(--van-background-2);
 
   .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 1b72b17a5..36bd3a64c 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-background-light);
+  background-color: var(--van-background-2);
 
   .van-switch {
     margin: 0 var(--van-padding-md) var(--van-padding-xs);
diff --git a/packages/vant/src/slider/demo/index.vue b/packages/vant/src/slider/demo/index.vue
index dda5bc5e6..6561c0c1f 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-background-light);
+  background: var(--van-background-2);
   user-select: none;
 
   .van-doc-demo-block {
diff --git a/packages/vant/src/step/index.less b/packages/vant/src/step/index.less
index 811bd7613..25d35a88d 100644
--- a/packages/vant/src/step/index.less
+++ b/packages/vant/src/step/index.less
@@ -64,7 +64,7 @@ body {
       left: calc(var(--van-padding-xs) * -1);
       z-index: 1;
       padding: 0 var(--van-padding-xs);
-      background-color: var(--van-background-light);
+      background-color: var(--van-background-2);
       transform: translateY(-50%);
     }
 
diff --git a/packages/vant/src/stepper/index.less b/packages/vant/src/stepper/index.less
index dd143d5be..acbd5e17a 100644
--- a/packages/vant/src/stepper/index.less
+++ b/packages/vant/src/stepper/index.less
@@ -122,7 +122,7 @@ body {
 
     .van-stepper__minus {
       color: var(--van-stepper-button-round-theme-color);
-      background-color: var(--van-background-light);
+      background-color: var(--van-background-2);
       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 78826cb0f..5146be079 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 | _var(--van-background-light)_ | - |
+| --van-steps-background | _var(--van-background-2)_ | - |
diff --git a/packages/vant/src/steps/README.zh-CN.md b/packages/vant/src/steps/README.zh-CN.md
index ac6733b98..64b245443 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-text-color-2)_     | -    |
-| --van-step-active-color               | _var(--van-primary-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-primary-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                | _var(--van-background-light)_ | -    |
+| 名称                                  | 默认值                     | 描述 |
+| ------------------------------------- | -------------------------- | ---- |
+| --van-step-text-color                 | _var(--van-text-color-2)_  | -    |
+| --van-step-active-color               | _var(--van-primary-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-primary-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                | _var(--van-background-2)_  | -    |
diff --git a/packages/vant/src/steps/index.less b/packages/vant/src/steps/index.less
index 3aa919712..2dff8ad94 100644
--- a/packages/vant/src/steps/index.less
+++ b/packages/vant/src/steps/index.less
@@ -1,5 +1,5 @@
 body {
-  --van-steps-background: var(--van-background-light);
+  --van-steps-background: var(--van-background-2);
 }
 
 .van-steps {
diff --git a/packages/vant/src/sticky/demo/index.vue b/packages/vant/src/sticky/demo/index.vue
index 6c0fe4b37..24cb21211 100644
--- a/packages/vant/src/sticky/demo/index.vue
+++ b/packages/vant/src/sticky/demo/index.vue
@@ -40,7 +40,7 @@ const container = ref(null);
   <demo-block :title="t('setContainer')">
     <div
       ref="container"
-      style="height: 150px; background-color: var(--van-background-light)"
+      style="height: 150px; background-color: var(--van-background-2)"
     >
       <van-sticky :container="container">
         <van-button type="warning" style="margin-left: 215px">
diff --git a/packages/vant/src/style/css-variables.less b/packages/vant/src/style/css-variables.less
index 9d142adcb..a2c552a39 100644
--- a/packages/vant/src/style/css-variables.less
+++ b/packages/vant/src/style/css-variables.less
@@ -34,7 +34,8 @@ body {
   --van-active-opacity: 0.6;
   --van-disabled-opacity: 0.5;
   --van-background: var(--van-gray-1);
-  --van-background-light: var(--van-white);
+  --van-background-2: var(--van-white);
+  --van-background-3: var(--van-white);
 
   // Padding
   --van-padding-base: 4px;
@@ -79,10 +80,11 @@ body {
 
 .van-theme-dark {
   --van-text-color: #f5f5f5;
-  --van-text-color-secondary: #707070;
-  --van-text-color-tertiary: #4d4d4d;
+  --van-text-color-2: #707070;
+  --van-text-color-3: #4d4d4d;
   --van-border-color: #3a3a3c;
   --van-active-color: #3a3a3c;
   --van-background: #000;
-  --van-background-light: #2c2c2e;
+  --van-background-2: #1c1c1e;
+  --van-background-3: #37363b;
 }
diff --git a/packages/vant/src/style/demo/index.vue b/packages/vant/src/style/demo/index.vue
index b5bddb480..5bb49bdad 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-background-light);
+    background-color: var(--van-background-2);
 
     &::after {
       top: 5px;
diff --git a/packages/vant/src/submit-bar/README.md b/packages/vant/src/submit-bar/README.md
index 2e6b1e59a..39d854ceb 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 | _var(--van-background-light)_ | - |
+| --van-submit-bar-background | _var(--van-background-2)_ | - |
 | --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 0b48b0f50..79f1cea4d 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, SubmitBarTextAlign } from 'vant';
 | --- | --- | --- |
 | --van-submit-bar-height | _50px_ | - |
 | --van-submit-bar-z-index | _100_ | - |
-| --van-submit-bar-background | _var(--van-background-light)_ | - |
+| --van-submit-bar-background | _var(--van-background-2)_ | - |
 | --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/index.less b/packages/vant/src/submit-bar/index.less
index 737961740..1950b1ec7 100644
--- a/packages/vant/src/submit-bar/index.less
+++ b/packages/vant/src/submit-bar/index.less
@@ -1,7 +1,7 @@
 body {
   --van-submit-bar-height: 50px;
   --van-submit-bar-z-index: 100;
-  --van-submit-bar-background: var(--van-background-light);
+  --van-submit-bar-background: var(--van-background-2);
   --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/swipe-cell/demo/index.vue b/packages/vant/src/swipe-cell/demo/index.vue
index 204ae1f6a..ca6b53d4f 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-background-light);
+    background-color: var(--van-background-2);
   }
 
   .delete-button {
diff --git a/packages/vant/src/switch/README.md b/packages/vant/src/switch/README.md
index 544ddf0ae..1463ca85d 100644
--- a/packages/vant/src/switch/README.md
+++ b/packages/vant/src/switch/README.md
@@ -143,7 +143,7 @@ The component provides the following CSS variables, which can be used to customi
 | --van-switch-node-size | _1em_ | - |
 | --van-switch-node-background | _var(--van-white)_ | - |
 | --van-switch-node-shadow | _0 3px 1px 0 rgba(0, 0, 0, 0.05)_ | - |
-| --van-switch-background | _var(--van-background-light)_ | - |
+| --van-switch-background | _var(--van-background-2)_ | - |
 | --van-switch-on-background | _var(--van-primary-color)_ | - |
 | --van-switch-duration | _var(--van-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 2aa598f5b..db58f4f7a 100644
--- a/packages/vant/src/switch/README.zh-CN.md
+++ b/packages/vant/src/switch/README.zh-CN.md
@@ -155,7 +155,7 @@ import type { SwitchProps } from 'vant';
 | --van-switch-node-size | _1em_ | - |
 | --van-switch-node-background | _var(--van-white)_ | - |
 | --van-switch-node-shadow | _0 3px 1px 0 rgba(0, 0, 0, 0.05)_ | - |
-| --van-switch-background | _var(--van-background-light)_ | - |
+| --van-switch-background | _var(--van-background-2)_ | - |
 | --van-switch-on-background | _var(--van-primary-color)_ | - |
 | --van-switch-duration | _var(--van-duration-base)_ | - |
 | --van-switch-disabled-opacity | _var(--van-disabled-opacity)_ | - |
diff --git a/packages/vant/src/switch/index.less b/packages/vant/src/switch/index.less
index e73968c15..e02fe940a 100644
--- a/packages/vant/src/switch/index.less
+++ b/packages/vant/src/switch/index.less
@@ -5,7 +5,7 @@ body {
   --van-switch-node-size: 1em;
   --van-switch-node-background: var(--van-white);
   --van-switch-node-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05);
-  --van-switch-background: var(--van-background-light);
+  --van-switch-background: var(--van-background-3);
   --van-switch-on-background: var(--van-primary-color);
   --van-switch-duration: var(--van-duration-base);
   --van-switch-disabled-opacity: var(--van-disabled-opacity);
diff --git a/packages/vant/src/tab/README.md b/packages/vant/src/tab/README.md
index 73cc641c5..e1c854703 100644
--- a/packages/vant/src/tab/README.md
+++ b/packages/vant/src/tab/README.md
@@ -332,17 +332,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-text-color-3)_     | -           |
-| --van-tab-font-size           | _var(--van-font-size-md)_     | -           |
-| --van-tab-line-height         | _var(--van-line-height-md)_   | -           |
-| --van-tabs-default-color      | _var(--van-primary-color)_    | -           |
-| --van-tabs-line-height        | _44px_                        | -           |
-| --van-tabs-card-height        | _30px_                        | -           |
-| --van-tabs-nav-background     | _var(--van-background-light)_ | -           |
-| --van-tabs-bottom-bar-width   | _40px_                        | -           |
-| --van-tabs-bottom-bar-height  | _3px_                         | -           |
-| --van-tabs-bottom-bar-color   | _var(--van-primary-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-text-color-3)_   | -           |
+| --van-tab-font-size           | _var(--van-font-size-md)_   | -           |
+| --van-tab-line-height         | _var(--van-line-height-md)_ | -           |
+| --van-tabs-default-color      | _var(--van-primary-color)_  | -           |
+| --van-tabs-line-height        | _44px_                      | -           |
+| --van-tabs-card-height        | _30px_                      | -           |
+| --van-tabs-nav-background     | _var(--van-background-2)_   | -           |
+| --van-tabs-bottom-bar-width   | _40px_                      | -           |
+| --van-tabs-bottom-bar-height  | _3px_                       | -           |
+| --van-tabs-bottom-bar-color   | _var(--van-primary-color)_  | -           |
diff --git a/packages/vant/src/tab/README.zh-CN.md b/packages/vant/src/tab/README.zh-CN.md
index 51633121c..f1734f585 100644
--- a/packages/vant/src/tab/README.zh-CN.md
+++ b/packages/vant/src/tab/README.zh-CN.md
@@ -347,20 +347,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-text-color-3)_     | -    |
-| --van-tab-font-size           | _var(--van-font-size-md)_     | -    |
-| --van-tab-line-height         | _var(--van-line-height-md)_   | -    |
-| --van-tabs-default-color      | _var(--van-primary-color)_    | -    |
-| --van-tabs-line-height        | _44px_                        | -    |
-| --van-tabs-card-height        | _30px_                        | -    |
-| --van-tabs-nav-background     | _var(--van-background-light)_ | -    |
-| --van-tabs-bottom-bar-width   | _40px_                        | -    |
-| --van-tabs-bottom-bar-height  | _3px_                         | -    |
-| --van-tabs-bottom-bar-color   | _var(--van-primary-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-text-color-3)_   | -    |
+| --van-tab-font-size           | _var(--van-font-size-md)_   | -    |
+| --van-tab-line-height         | _var(--van-line-height-md)_ | -    |
+| --van-tabs-default-color      | _var(--van-primary-color)_  | -    |
+| --van-tabs-line-height        | _44px_                      | -    |
+| --van-tabs-card-height        | _30px_                      | -    |
+| --van-tabs-nav-background     | _var(--van-background-2)_   | -    |
+| --van-tabs-bottom-bar-width   | _40px_                      | -    |
+| --van-tabs-bottom-bar-height  | _3px_                       | -    |
+| --van-tabs-bottom-bar-color   | _var(--van-primary-color)_  | -    |
 
 ## 常见问题
 
diff --git a/packages/vant/src/tab/demo/index.vue b/packages/vant/src/tab/demo/index.vue
index 9591f3a87..456e380a3 100644
--- a/packages/vant/src/tab/demo/index.vue
+++ b/packages/vant/src/tab/demo/index.vue
@@ -187,7 +187,7 @@ const beforeChange = (name: number) => {
 
   .van-tab__panel {
     padding: 24px 20px;
-    background: var(--van-background-light);
+    background: var(--van-background-2);
   }
 
   .van-tabs--card .van-tab__panel {
diff --git a/packages/vant/src/tabbar-item/index.less b/packages/vant/src/tabbar-item/index.less
index 71076f9a4..ede691480 100644
--- a/packages/vant/src/tabbar-item/index.less
+++ b/packages/vant/src/tabbar-item/index.less
@@ -2,7 +2,7 @@ body {
   --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: var(--van-background-light);
+  --van-tabbar-item-active-background: var(--van-background-2);
   --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.md b/packages/vant/src/tabbar/README.md
index 3638641c5..786b09218 100644
--- a/packages/vant/src/tabbar/README.md
+++ b/packages/vant/src/tabbar/README.md
@@ -219,11 +219,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 | _var(--van-background-light)_ | - |
+| --van-tabbar-background | _var(--van-background-2)_ | - |
 | --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 | _var(--van-background-light)_ | - |
+| --van-tabbar-item-active-background | _var(--van-background-2)_ | - |
 | --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 db0eafa44..a822a5db6 100644
--- a/packages/vant/src/tabbar/README.zh-CN.md
+++ b/packages/vant/src/tabbar/README.zh-CN.md
@@ -227,15 +227,15 @@ import type { TabbarProps, TabbarItemProps } from 'vant';
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                 | 默认值                        | 描述 |
-| ------------------------------------ | ----------------------------- | ---- |
-| --van-tabbar-height                  | _50px_                        | -    |
-| --van-tabbar-z-index                 | _1_                           | -    |
-| --van-tabbar-background              | _var(--van-background-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  | _var(--van-background-light)_ | -    |
-| --van-tabbar-item-line-height        | _1_                           | -    |
-| --van-tabbar-item-icon-size          | _22px_                        | -    |
-| --van-tabbar-item-icon-margin-bottom | _var(--van-padding-base)_     | -    |
+| 名称                                 | 默认值                     | 描述 |
+| ------------------------------------ | -------------------------- | ---- |
+| --van-tabbar-height                  | _50px_                     | -    |
+| --van-tabbar-z-index                 | _1_                        | -    |
+| --van-tabbar-background              | _var(--van-background-2)_  | -    |
+| --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  | _var(--van-background-2)_  | -    |
+| --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/index.less b/packages/vant/src/tabbar/index.less
index 065542c74..abc4038e1 100644
--- a/packages/vant/src/tabbar/index.less
+++ b/packages/vant/src/tabbar/index.less
@@ -1,7 +1,7 @@
 body {
   --van-tabbar-height: 50px;
   --van-tabbar-z-index: 1;
-  --van-tabbar-background: var(--van-background-light);
+  --van-tabbar-background: var(--van-background-2);
 }
 
 .van-tabbar {
diff --git a/packages/vant/src/tabs/index.less b/packages/vant/src/tabs/index.less
index 68ed4f70d..313105fae 100644
--- a/packages/vant/src/tabs/index.less
+++ b/packages/vant/src/tabs/index.less
@@ -7,7 +7,7 @@ body {
   --van-tabs-default-color: var(--van-primary-color);
   --van-tabs-line-height: 44px;
   --van-tabs-card-height: 30px;
-  --van-tabs-nav-background: var(--van-background-light);
+  --van-tabs-nav-background: var(--van-background-2);
   --van-tabs-bottom-bar-width: 40px;
   --van-tabs-bottom-bar-height: 3px;
   --van-tabs-bottom-bar-color: var(--van-primary-color);
diff --git a/packages/vant/src/tag/README.md b/packages/vant/src/tag/README.md
index 084ac3449..0d06b947f 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 | _var(--van-background-light)_ | - |
+| --van-tag-plain-background | _var(--van-background-2)_ | - |
diff --git a/packages/vant/src/tag/README.zh-CN.md b/packages/vant/src/tag/README.zh-CN.md
index 7336f9f2a..296bdadfb 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 | _var(--van-background-light)_ | - |
+| --van-tag-plain-background | _var(--van-background-2)_ | - |
diff --git a/packages/vant/src/tag/index.less b/packages/vant/src/tag/index.less
index 4c72eab6e..0742a3de5 100644
--- a/packages/vant/src/tag/index.less
+++ b/packages/vant/src/tag/index.less
@@ -14,7 +14,7 @@ body {
   --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: var(--van-background-light);
+  --van-tag-plain-background: var(--van-background-2);
 }
 
 .van-tag {
diff --git a/packages/vant/src/tree-select/README.md b/packages/vant/src/tree-select/README.md
index 428a55da4..454e945b9 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 | _var(--van-background)_ | - |
-| --van-tree-select-content-background | _var(--van-background-light)_ | - |
+| --van-tree-select-content-background | _var(--van-background-2)_ | - |
 | --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 c58508b17..3183c4b0d 100644
--- a/packages/vant/src/tree-select/README.zh-CN.md
+++ b/packages/vant/src/tree-select/README.zh-CN.md
@@ -248,13 +248,13 @@ import type { TreeSelectItem, TreeSelectChild, TreeSelectProps } from 'vant';
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                  | 默认值                        | 描述 |
-| ------------------------------------- | ----------------------------- | ---- |
-| --van-tree-select-font-size           | _var(--van-font-size-md)_     | -    |
-| --van-tree-select-nav-background      | _var(--van-background)_       | -    |
-| --van-tree-select-content-background  | _var(--van-background-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)_     | -    |
-| --van-tree-select-item-disabled-color | _var(--van-gray-5)_           | -    |
-| --van-tree-select-item-selected-size  | _16px_                        | -    |
+| 名称                                  | 默认值                       | 描述 |
+| ------------------------------------- | ---------------------------- | ---- |
+| --van-tree-select-font-size           | _var(--van-font-size-md)_    | -    |
+| --van-tree-select-nav-background      | _var(--van-background)_      | -    |
+| --van-tree-select-content-background  | _var(--van-background-2)_    | -    |
+| --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)_    | -    |
+| --van-tree-select-item-disabled-color | _var(--van-gray-5)_          | -    |
+| --van-tree-select-item-selected-size  | _16px_                       | -    |
diff --git a/packages/vant/src/tree-select/index.less b/packages/vant/src/tree-select/index.less
index 69d512098..3cebe419b 100644
--- a/packages/vant/src/tree-select/index.less
+++ b/packages/vant/src/tree-select/index.less
@@ -1,7 +1,7 @@
 body {
   --van-tree-select-font-size: var(--van-font-size-md);
   --van-tree-select-nav-background: var(--van-background);
-  --van-tree-select-content-background: var(--van-background-light);
+  --van-tree-select-content-background: var(--van-background-2);
   --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/uploader/demo/index.vue b/packages/vant/src/uploader/demo/index.vue
index 69b21dbbd..8d9d849c4 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-background-light);
+  background-color: var(--van-background-2);
 
   .van-uploader {
     margin-left: var(--van-padding-md);