diff --git a/packages/vant/src/badge/demo/index.vue b/packages/vant/src/badge/demo/index.vue
index c8c06d735..1599f9d43 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-color-light);
+  background-color: var(--van-background-light);
 
   .van-badge__wrapper {
     margin-left: var(--van-padding-md);
diff --git a/packages/vant/src/button/demo/index.vue b/packages/vant/src/button/demo/index.vue
index b2d92f8f6..903cf4f3e 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-color-light);
+  background: var(--van-background-light);
 
   .van-button {
     &--large {
diff --git a/packages/vant/src/card/demo/index.vue b/packages/vant/src/card/demo/index.vue
index 901f4ec8d..58a54ec3b 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-color-light);
+  background-color: var(--van-background-light);
 }
 </style>
diff --git a/packages/vant/src/col/demo/index.vue b/packages/vant/src/col/demo/index.vue
index 33a1659d4..d05143189 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-color-light);
+  background: var(--van-background-light);
 
   .van-doc-demo-block {
     padding: 0 var(--van-padding-md);
diff --git a/packages/vant/src/count-down/demo/index.vue b/packages/vant/src/count-down/demo/index.vue
index fa27148b5..7625d1768 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-color-light);
+  background-color: var(--van-background-light);
 
   .van-count-down {
     margin-left: var(--van-padding-md);
diff --git a/packages/vant/src/divider/demo/index.vue b/packages/vant/src/divider/demo/index.vue
index a7b4aac84..637bf5d2e 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-color-light);
+  background-color: var(--van-background-light);
 
   .van-doc-demo-block__title {
     padding-top: var(--van-padding-md);
diff --git a/packages/vant/src/empty/demo/index.vue b/packages/vant/src/empty/demo/index.vue
index 0290533a6..3698ec29e 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-color-light);
+  background: var(--van-background-light);
 
   .custom-image {
     .van-empty__image {
diff --git a/packages/vant/src/icon/demo/index.vue b/packages/vant/src/icon/demo/index.vue
index 241361dde..dfdfd0927 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-color-light);
+    background-color: var(--van-background-light);
     border-radius: 12px;
   }
 
diff --git a/packages/vant/src/image/demo/index.vue b/packages/vant/src/image/demo/index.vue
index 4935cc831..66890fa43 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-color-light);
+  background-color: var(--van-background-light);
 
   .van-row {
     padding: 0 var(--van-padding-md);
diff --git a/packages/vant/src/loading/demo/index.vue b/packages/vant/src/loading/demo/index.vue
index eedb560d1..b94e6a91f 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-color-light);
+  background: var(--van-background-light);
 
   .van-loading {
     display: inline-block;
diff --git a/packages/vant/src/notice-bar/demo/index.vue b/packages/vant/src/notice-bar/demo/index.vue
index 17f71b48f..d02527332 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-color-light);
+  background: var(--van-background-light);
 
   .van-notice-bar:not(:first-of-type) {
     margin-top: 4px;
diff --git a/packages/vant/src/overlay/demo/index.vue b/packages/vant/src/overlay/demo/index.vue
index f4766520a..39295ad21 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-color-light);
+  background: var(--van-background-light);
 
   .wrapper {
     display: flex;
@@ -59,7 +59,7 @@ const showEmbedded = ref(false);
   .block {
     width: 120px;
     height: 120px;
-    background-color: var(--van-background-color-light);
+    background-color: var(--van-background-light);
     border-radius: 4px;
   }
 }
diff --git a/packages/vant/src/progress/demo/index.vue b/packages/vant/src/progress/demo/index.vue
index 428204fae..760cc0b7a 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-color-light);
+  background: var(--van-background-light);
 
   .van-progress {
     margin: 20px 16px;
diff --git a/packages/vant/src/pull-refresh/demo/index.vue b/packages/vant/src/pull-refresh/demo/index.vue
index e74b03e40..110ccc36d 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-color-light);
+  background-color: var(--van-background-light);
 
   .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 24b648883..fd6674b31 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-color-light);
+  background-color: var(--van-background-light);
 
   .van-rate {
     margin-left: var(--van-padding-md);
diff --git a/packages/vant/src/sidebar/demo/index.vue b/packages/vant/src/sidebar/demo/index.vue
index 3f875a4dd..2fce77348 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-color-light);
+  background-color: var(--van-background-light);
 
   .van-sidebar {
     margin-left: var(--van-padding-md);
diff --git a/packages/vant/src/skeleton/demo/index.vue b/packages/vant/src/skeleton/demo/index.vue
index e1d08e671..1b72b17a5 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-color-light);
+  background-color: var(--van-background-light);
 
   .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 a4b699730..2d629ceb9 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-color-light);
+  background: var(--van-background-light);
   user-select: none;
 
   .van-doc-demo-block {
diff --git a/packages/vant/src/sticky/demo/index.vue b/packages/vant/src/sticky/demo/index.vue
index 4b77033ac..6c0fe4b37 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-color-light)"
+      style="height: 150px; background-color: var(--van-background-light)"
     >
       <van-sticky :container="container">
         <van-button type="warning" style="margin-left: 215px">
diff --git a/packages/vant/src/style/demo/index.vue b/packages/vant/src/style/demo/index.vue
index 1f2a09809..b5bddb480 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-color-light);
+    background-color: var(--van-background-light);
 
     &::after {
       top: 5px;
diff --git a/packages/vant/src/swipe-cell/demo/index.vue b/packages/vant/src/swipe-cell/demo/index.vue
index 77a1e7ebd..204ae1f6a 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-color-light);
+    background-color: var(--van-background-light);
   }
 
   .delete-button {
diff --git a/packages/vant/src/tab/demo/index.vue b/packages/vant/src/tab/demo/index.vue
index 4f648cdae..9591f3a87 100644
--- a/packages/vant/src/tab/demo/index.vue
+++ b/packages/vant/src/tab/demo/index.vue
@@ -187,11 +187,11 @@ const beforeChange = (name: number) => {
 
   .van-tab__panel {
     padding: 24px 20px;
-    background-color: var(--van-background-color-light);
+    background: var(--van-background-light);
   }
 
   .van-tabs--card .van-tab__panel {
-    background-color: transparent;
+    background: transparent;
   }
 }
 </style>
diff --git a/packages/vant/src/uploader/demo/index.vue b/packages/vant/src/uploader/demo/index.vue
index 2843a8c96..69b21dbbd 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-color-light);
+  background-color: var(--van-background-light);
 
   .van-uploader {
     margin-left: var(--van-padding-md);