diff --git a/packages/vant-cli/site/common/style/vars.less b/packages/vant-cli/site/common/style/vars.less
index 97b9b4582..9580d4f5b 100644
--- a/packages/vant-cli/site/common/style/vars.less
+++ b/packages/vant-cli/site/common/style/vars.less
@@ -1,4 +1,4 @@
-body {
+:root {
   // colors
   --van-doc-black: #000;
   --van-doc-white: #fff;
diff --git a/packages/vant-cli/site/desktop/components/Header.vue b/packages/vant-cli/site/desktop/components/Header.vue
index d2a1abc98..e8ca3f655 100644
--- a/packages/vant-cli/site/desktop/components/Header.vue
+++ b/packages/vant-cli/site/desktop/components/Header.vue
@@ -138,8 +138,8 @@ export default {
     currentTheme: {
       handler(newVal, oldVal) {
         window.localStorage.setItem('vantTheme', newVal);
-        document.body.classList.remove(`van-doc-theme-${oldVal}`);
-        document.body.classList.add(`van-doc-theme-${newVal}`);
+        document.documentElement.classList.remove(`van-doc-theme-${oldVal}`);
+        document.documentElement.classList.add(`van-doc-theme-${newVal}`);
         syncThemeToChild(newVal);
       },
       immediate: true,
diff --git a/packages/vant-cli/site/mobile/App.vue b/packages/vant-cli/site/mobile/App.vue
index 84c524680..9fc6a51b0 100644
--- a/packages/vant-cli/site/mobile/App.vue
+++ b/packages/vant-cli/site/mobile/App.vue
@@ -24,12 +24,15 @@ export default {
     watch(
       theme,
       (newVal, oldVal) => {
-        document.body.classList.remove(`van-doc-theme-${oldVal}`);
-        document.body.classList.add(`van-doc-theme-${newVal}`);
+        document.documentElement.classList.remove(`van-doc-theme-${oldVal}`);
+        document.documentElement.classList.add(`van-doc-theme-${newVal}`);
 
         const { darkModeClass } = config.site;
         if (darkModeClass) {
-          document.body.classList.toggle(darkModeClass, newVal === 'dark');
+          document.documentElement.classList.toggle(
+            darkModeClass,
+            newVal === 'dark'
+          );
         }
       },
       { immediate: true }
@@ -43,6 +46,7 @@ export default {
 
 body {
   min-width: 100vw;
+  background-color: inherit;
 }
 
 .van-doc-theme-light {
diff --git a/packages/vant/src/action-bar-button/index.less b/packages/vant/src/action-bar-button/index.less
index 9df4bd0f6..8a519df7d 100644
--- a/packages/vant/src/action-bar-button/index.less
+++ b/packages/vant/src/action-bar-button/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --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-icon/index.less b/packages/vant/src/action-bar-icon/index.less
index 5163e4d4d..bbc52b48c 100644
--- a/packages/vant/src/action-bar-icon/index.less
+++ b/packages/vant/src/action-bar-icon/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-action-bar-icon-width: 48px;
   --van-action-bar-icon-height: 100%;
   --van-action-bar-icon-color: var(--van-text-color);
diff --git a/packages/vant/src/action-bar/index.less b/packages/vant/src/action-bar/index.less
index ffbb4c462..b0bdbd8dc 100644
--- a/packages/vant/src/action-bar/index.less
+++ b/packages/vant/src/action-bar/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-action-bar-background: var(--van-background-2);
   --van-action-bar-height: 50px;
 }
diff --git a/packages/vant/src/action-sheet/index.less b/packages/vant/src/action-sheet/index.less
index 3c2e6fe7b..a365deb25 100644
--- a/packages/vant/src/action-sheet/index.less
+++ b/packages/vant/src/action-sheet/index.less
@@ -1,6 +1,6 @@
 @import '../style/mixins/hairline';
 
-body {
+:root {
   --van-action-sheet-max-height: 80%;
   --van-action-sheet-header-height: 48px;
   --van-action-sheet-header-font-size: var(--van-font-size-lg);
diff --git a/packages/vant/src/address-edit/index.less b/packages/vant/src/address-edit/index.less
index 4329861f0..49cd59b58 100644
--- a/packages/vant/src/address-edit/index.less
+++ b/packages/vant/src/address-edit/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-address-edit-padding: var(--van-padding-sm);
   --van-address-edit-buttons-padding: var(--van-padding-xl)
     var(--van-padding-base);
diff --git a/packages/vant/src/address-list/index.less b/packages/vant/src/address-list/index.less
index 63e2e2a5a..b3710b57a 100644
--- a/packages/vant/src/address-list/index.less
+++ b/packages/vant/src/address-list/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-address-list-padding: var(--van-padding-sm) var(--van-padding-sm) 80px;
   --van-address-list-disabled-text-color: var(--van-text-color-2);
   --van-address-list-disabled-text-padding: calc(var(--van-padding-base) * 5) 0;
diff --git a/packages/vant/src/badge/index.less b/packages/vant/src/badge/index.less
index 0fa213308..4aa0083d9 100644
--- a/packages/vant/src/badge/index.less
+++ b/packages/vant/src/badge/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-badge-size: 16px;
   --van-badge-color: var(--van-white);
   --van-badge-padding: 0 3px;
diff --git a/packages/vant/src/button/index.less b/packages/vant/src/button/index.less
index 528afc617..6665e3d8d 100644
--- a/packages/vant/src/button/index.less
+++ b/packages/vant/src/button/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-button-mini-height: 24px;
   --van-button-mini-padding: 0 var(--van-padding-base);
   --van-button-mini-font-size: var(--van-font-size-xs);
diff --git a/packages/vant/src/calendar/index.less b/packages/vant/src/calendar/index.less
index 7fa46b279..0b4b82b48 100644
--- a/packages/vant/src/calendar/index.less
+++ b/packages/vant/src/calendar/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --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);
diff --git a/packages/vant/src/card/index.less b/packages/vant/src/card/index.less
index 863edef34..aeed8cf07 100644
--- a/packages/vant/src/card/index.less
+++ b/packages/vant/src/card/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-card-padding: var(--van-padding-xs) var(--van-padding-md);
   --van-card-font-size: var(--van-font-size-sm);
   --van-card-text-color: var(--van-text-color);
diff --git a/packages/vant/src/cascader/index.less b/packages/vant/src/cascader/index.less
index 0ed61a5b7..c1a53d94f 100644
--- a/packages/vant/src/cascader/index.less
+++ b/packages/vant/src/cascader/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-cascader-header-height: 48px;
   --van-cascader-header-padding: 0 var(--van-padding-md);
   --van-cascader-title-font-size: var(--van-font-size-lg);
diff --git a/packages/vant/src/cell-group/index.less b/packages/vant/src/cell-group/index.less
index 1c9d3ab84..d0e0d0617 100644
--- a/packages/vant/src/cell-group/index.less
+++ b/packages/vant/src/cell-group/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --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);
diff --git a/packages/vant/src/cell/index.less b/packages/vant/src/cell/index.less
index 7a2d48c79..0ab3bd3d6 100644
--- a/packages/vant/src/cell/index.less
+++ b/packages/vant/src/cell/index.less
@@ -1,6 +1,6 @@
 @import '../style/mixins/hairline';
 
-body {
+:root {
   --van-cell-font-size: var(--van-font-size-md);
   --van-cell-line-height: 24px;
   --van-cell-vertical-padding: 10px;
diff --git a/packages/vant/src/checkbox/index.less b/packages/vant/src/checkbox/index.less
index be80dc6ea..f64a42e98 100644
--- a/packages/vant/src/checkbox/index.less
+++ b/packages/vant/src/checkbox/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-checkbox-size: 20px;
   --van-checkbox-border-color: var(--van-gray-5);
   --van-checkbox-duration: var(--van-duration-fast);
diff --git a/packages/vant/src/circle/index.less b/packages/vant/src/circle/index.less
index 356c32939..503d5f484 100644
--- a/packages/vant/src/circle/index.less
+++ b/packages/vant/src/circle/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-circle-size: 100px;
   --van-circle-color: var(--van-primary-color);
   --van-circle-layer-color: var(--van-white);
diff --git a/packages/vant/src/collapse-item/index.less b/packages/vant/src/collapse-item/index.less
index aa92ea2da..90dff7527 100644
--- a/packages/vant/src/collapse-item/index.less
+++ b/packages/vant/src/collapse-item/index.less
@@ -1,6 +1,6 @@
 @import '../style/mixins/hairline';
 
-body {
+:root {
   --van-collapse-item-duration: var(--van-duration-base);
   --van-collapse-item-content-padding: var(--van-padding-sm)
     var(--van-padding-md);
diff --git a/packages/vant/src/config-provider/ConfigProvider.tsx b/packages/vant/src/config-provider/ConfigProvider.tsx
index 6873881da..4413619e4 100644
--- a/packages/vant/src/config-provider/ConfigProvider.tsx
+++ b/packages/vant/src/config-provider/ConfigProvider.tsx
@@ -73,10 +73,10 @@ export default defineComponent({
 
     if (inBrowser) {
       const addTheme = () => {
-        document.body.classList.add(`van-theme-${props.theme}`);
+        document.documentElement.classList.add(`van-theme-${props.theme}`);
       };
       const removeTheme = (theme = props.theme) => {
-        document.body.classList.remove(`van-theme-${theme}`);
+        document.documentElement.classList.remove(`van-theme-${theme}`);
       };
 
       watch(
diff --git a/packages/vant/src/config-provider/README.md b/packages/vant/src/config-provider/README.md
index 14d561c9e..ee83d6beb 100644
--- a/packages/vant/src/config-provider/README.md
+++ b/packages/vant/src/config-provider/README.md
@@ -69,10 +69,10 @@ Looking at the style of the Button component, you can see that the following var
 }
 ```
 
-The default values of these variables are defined on the `body` node:
+The default values of these variables are defined on the `:root` node:
 
 ```css
-body {
+:root {
   --van-white: #fff;
   --van-blue: #1989fa;
   --van-button-primary-color: var(--van-white);
@@ -88,7 +88,7 @@ You can directly override these CSS variables in the code, and the style of the
 
 ```css
 /* the Primary Button will turn red */
-body {
+:root {
   --van-button-primary-background: red;
 }
 ```
@@ -197,8 +197,8 @@ CSS variables in Vant are divided into **basic variables** and **component varia
 
 #### Modify Basic Variables
 
-- The basic variables can only be modified through the `body` selector.
-- The component variables can be modified through the `body` selector and `ConfigProvider` component.
+- The basic variables can only be modified through the `:root` selector.
+- The component variables can be modified through the `:root` selector and `ConfigProvider` component.
 
 #### Variables List
 
diff --git a/packages/vant/src/config-provider/README.zh-CN.md b/packages/vant/src/config-provider/README.zh-CN.md
index 2932a0116..66ff11a37 100644
--- a/packages/vant/src/config-provider/README.zh-CN.md
+++ b/packages/vant/src/config-provider/README.zh-CN.md
@@ -69,10 +69,10 @@ Vant 组件通过丰富的 [CSS 变量](https://developer.mozilla.org/zh-CN/docs
 }
 ```
 
-这些变量的默认值被定义在 `body` 节点上，body 下所有子节点都可以访问到这些变量：
+这些变量的默认值被定义在 `:root` 节点上，HTML 里的所有子节点都可以访问到这些变量：
 
 ```css
-body {
+:root {
   --van-white: #fff;
   --van-blue: #1989fa;
   --van-button-primary-color: var(--van-white);
@@ -88,7 +88,7 @@ body {
 
 ```css
 /* 添加这段样式后，Primary Button 会变成红色 */
-body {
+:root {
   --van-button-primary-background: red;
 }
 ```
@@ -148,7 +148,7 @@ export default {
 };
 ```
 
-> 注意：ConfigProvider 仅影响它的子组件的样式，不影响全局 body 节点。
+> 注意：ConfigProvider 仅影响它的子组件的样式，不影响全局 root 节点。
 
 ### 结合深色模式与 CSS 变量
 
@@ -199,8 +199,8 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 
 由于 CSS 变量继承机制的原因，两者的修改方式有一定差异：
 
-- 基础变量只能通过 `body 选择器` 修改，不能通过 `ConfigProvider 组件` 修改。
-- 组件变量可以通过 `body 选择器` 和 `ConfigProvider 组件` 修改。
+- 基础变量只能通过 `:root 选择器` 修改，不能通过 `ConfigProvider 组件` 修改。
+- 组件变量可以通过 `:root 选择器` 和 `ConfigProvider 组件` 修改。
 
 #### 变量列表
 
diff --git a/packages/vant/src/contact-card/index.less b/packages/vant/src/contact-card/index.less
index b5a6c646f..3fcc8f294 100644
--- a/packages/vant/src/contact-card/index.less
+++ b/packages/vant/src/contact-card/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-contact-card-padding: var(--van-padding-md);
   --van-contact-card-add-icon-size: 40px;
   --van-contact-card-add-icon-color: var(--van-primary-color);
diff --git a/packages/vant/src/contact-edit/index.less b/packages/vant/src/contact-edit/index.less
index 9e4d146ca..fc384f9fe 100644
--- a/packages/vant/src/contact-edit/index.less
+++ b/packages/vant/src/contact-edit/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-contact-edit-padding: var(--van-padding-md);
   --van-contact-edit-fields-radius: var(--van-radius-md);
   --van-contact-edit-buttons-padding: var(--van-padding-xl) 0;
diff --git a/packages/vant/src/contact-list/index.less b/packages/vant/src/contact-list/index.less
index f231a853b..d7b458307 100644
--- a/packages/vant/src/contact-list/index.less
+++ b/packages/vant/src/contact-list/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-contact-list-edit-icon-size: 16px;
   --van-contact-list-add-button-z-index: 999;
   --van-contact-list-radio-color: var(--van-primary-color);
diff --git a/packages/vant/src/count-down/index.less b/packages/vant/src/count-down/index.less
index 25fee0bc3..064c7b0a2 100644
--- a/packages/vant/src/count-down/index.less
+++ b/packages/vant/src/count-down/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-count-down-text-color: var(--van-text-color);
   --van-count-down-font-size: var(--van-font-size-md);
   --van-count-down-line-height: var(--van-line-height-md);
diff --git a/packages/vant/src/coupon-cell/index.less b/packages/vant/src/coupon-cell/index.less
index fd2f0b0bb..49c2a3d2b 100644
--- a/packages/vant/src/coupon-cell/index.less
+++ b/packages/vant/src/coupon-cell/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-coupon-cell-selected-text-color: var(--van-text-color);
 }
 
diff --git a/packages/vant/src/coupon-list/index.less b/packages/vant/src/coupon-list/index.less
index f1bd9045e..82e45597d 100644
--- a/packages/vant/src/coupon-list/index.less
+++ b/packages/vant/src/coupon-list/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-coupon-list-background: var(--van-background);
   --van-coupon-list-field-padding: 5px 0 5px var(--van-padding-md);
   --van-coupon-list-exchange-button-height: 32px;
@@ -16,7 +16,7 @@ body {
   &__field {
     padding: var(--van-coupon-list-field-padding);
 
-    .van-field__body {
+    .van-field__:root {
       height: 34px;
       padding-left: var(--van-padding-sm);
       line-height: 34px;
diff --git a/packages/vant/src/coupon/index.less b/packages/vant/src/coupon/index.less
index 3e3577b9f..c646fb5bb 100644
--- a/packages/vant/src/coupon/index.less
+++ b/packages/vant/src/coupon/index.less
@@ -1,6 +1,6 @@
 @import '../style/mixins/ellipsis';
 
-body {
+:root {
   --van-coupon-margin: 0 var(--van-padding-sm) var(--van-padding-sm);
   --van-coupon-content-height: 84px;
   --van-coupon-content-padding: 14px 0;
@@ -76,7 +76,7 @@ body {
     white-space: pre-wrap;
   }
 
-  &__body {
+  &__:root {
     position: relative;
     flex: 1;
     border-radius: 0 var(--van-coupon-radius) var(--van-coupon-radius) 0;
diff --git a/packages/vant/src/dialog/index.less b/packages/vant/src/dialog/index.less
index c7607e73b..3daddb217 100644
--- a/packages/vant/src/dialog/index.less
+++ b/packages/vant/src/dialog/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-dialog-width: 320px;
   --van-dialog-small-screen-width: 90%;
   --van-dialog-font-size: var(--van-font-size-lg);
diff --git a/packages/vant/src/divider/index.less b/packages/vant/src/divider/index.less
index 474434bbc..90ef8872c 100644
--- a/packages/vant/src/divider/index.less
+++ b/packages/vant/src/divider/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-divider-margin: var(--van-padding-md) 0;
   --van-divider-text-color: var(--van-text-color-2);
   --van-divider-font-size: var(--van-font-size-md);
diff --git a/packages/vant/src/dropdown-item/index.less b/packages/vant/src/dropdown-item/index.less
index 8ecb7caf4..0c7a78dbc 100644
--- a/packages/vant/src/dropdown-item/index.less
+++ b/packages/vant/src/dropdown-item/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-dropdown-item-z-index: 10;
 }
 
diff --git a/packages/vant/src/dropdown-menu/index.less b/packages/vant/src/dropdown-menu/index.less
index ab60c97a2..a6a7bb564 100644
--- a/packages/vant/src/dropdown-menu/index.less
+++ b/packages/vant/src/dropdown-menu/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-dropdown-menu-height: 48px;
   --van-dropdown-menu-background: var(--van-background-2);
   --van-dropdown-menu-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
diff --git a/packages/vant/src/empty/index.less b/packages/vant/src/empty/index.less
index 0c4b6082b..8f5ce07a8 100644
--- a/packages/vant/src/empty/index.less
+++ b/packages/vant/src/empty/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-empty-padding: var(--van-padding-xl) 0;
   --van-empty-image-size: 160px;
   --van-empty-description-margin-top: var(--van-padding-md);
diff --git a/packages/vant/src/field/index.less b/packages/vant/src/field/index.less
index 5c1466056..d793036c6 100644
--- a/packages/vant/src/field/index.less
+++ b/packages/vant/src/field/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-field-label-width: 6.2em;
   --van-field-label-color: var(--van-text-color);
   --van-field-label-margin-right: var(--van-padding-sm);
diff --git a/packages/vant/src/grid-item/index.less b/packages/vant/src/grid-item/index.less
index 1da5ca6fd..ffb541999 100644
--- a/packages/vant/src/grid-item/index.less
+++ b/packages/vant/src/grid-item/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-grid-item-content-padding: var(--van-padding-md) var(--van-padding-xs);
   --van-grid-item-content-background: var(--van-background-2);
   --van-grid-item-content-active-color: var(--van-active-color);
diff --git a/packages/vant/src/image-preview/index.less b/packages/vant/src/image-preview/index.less
index fe966e310..48d10375c 100644
--- a/packages/vant/src/image-preview/index.less
+++ b/packages/vant/src/image-preview/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-image-preview-index-text-color: var(--van-white);
   --van-image-preview-index-font-size: var(--van-font-size-md);
   --van-image-preview-index-line-height: var(--van-line-height-md);
diff --git a/packages/vant/src/image/index.less b/packages/vant/src/image/index.less
index fc774f43d..7a99b6907 100644
--- a/packages/vant/src/image/index.less
+++ b/packages/vant/src/image/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-image-placeholder-text-color: var(--van-text-color-2);
   --van-image-placeholder-font-size: var(--van-font-size-md);
   --van-image-placeholder-background: var(--van-background);
diff --git a/packages/vant/src/index-anchor/index.less b/packages/vant/src/index-anchor/index.less
index d59ad2c40..02a41afee 100644
--- a/packages/vant/src/index-anchor/index.less
+++ b/packages/vant/src/index-anchor/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-index-anchor-z-index: 1;
   --van-index-anchor-padding: 0 var(--van-padding-md);
   --van-index-anchor-text-color: var(--van-text-color);
diff --git a/packages/vant/src/index-bar/index.less b/packages/vant/src/index-bar/index.less
index 6e93d833f..f65cfb3e1 100644
--- a/packages/vant/src/index-bar/index.less
+++ b/packages/vant/src/index-bar/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --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);
diff --git a/packages/vant/src/list/index.less b/packages/vant/src/list/index.less
index 109fd0cc0..cf09171c3 100644
--- a/packages/vant/src/list/index.less
+++ b/packages/vant/src/list/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-list-text-color: var(--van-text-color-2);
   --van-list-text-font-size: var(--van-font-size-md);
   --van-list-text-line-height: 50px;
diff --git a/packages/vant/src/loading/index.less b/packages/vant/src/loading/index.less
index 5ec4f7174..5c795d9fb 100644
--- a/packages/vant/src/loading/index.less
+++ b/packages/vant/src/loading/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-loading-text-color: var(--van-text-color-2);
   --van-loading-text-font-size: var(--van-font-size-md);
   --van-loading-spinner-color: var(--van-gray-5);
diff --git a/packages/vant/src/nav-bar/index.less b/packages/vant/src/nav-bar/index.less
index cba2f9383..ec3835e6f 100644
--- a/packages/vant/src/nav-bar/index.less
+++ b/packages/vant/src/nav-bar/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-nav-bar-height: 46px;
   --van-nav-bar-background: var(--van-background-2);
   --van-nav-bar-arrow-size: 16px;
diff --git a/packages/vant/src/notice-bar/index.less b/packages/vant/src/notice-bar/index.less
index 3fc6aaf3a..1da435653 100644
--- a/packages/vant/src/notice-bar/index.less
+++ b/packages/vant/src/notice-bar/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-notice-bar-height: 40px;
   --van-notice-bar-padding: 0 var(--van-padding-md);
   --van-notice-bar-wrapable-padding: var(--van-padding-xs) var(--van-padding-md);
diff --git a/packages/vant/src/notify/index.less b/packages/vant/src/notify/index.less
index 8057b6d9a..20c0ec8bd 100644
--- a/packages/vant/src/notify/index.less
+++ b/packages/vant/src/notify/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-notify-text-color: var(--van-white);
   --van-notify-padding: var(--van-padding-xs) var(--van-padding-md);
   --van-notify-font-size: var(--van-font-size-md);
diff --git a/packages/vant/src/number-keyboard/index.less b/packages/vant/src/number-keyboard/index.less
index 93f034f01..5035d7686 100644
--- a/packages/vant/src/number-keyboard/index.less
+++ b/packages/vant/src/number-keyboard/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-number-keyboard-background: var(--van-gray-2);
   --van-number-keyboard-key-height: 48px;
   --van-number-keyboard-key-font-size: 28px;
diff --git a/packages/vant/src/overlay/index.less b/packages/vant/src/overlay/index.less
index 4b37a94bf..22c0a35d7 100644
--- a/packages/vant/src/overlay/index.less
+++ b/packages/vant/src/overlay/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-overlay-z-index: 1;
   --van-overlay-background: rgba(0, 0, 0, 0.7);
 }
diff --git a/packages/vant/src/pagination/index.less b/packages/vant/src/pagination/index.less
index 48246d4fc..d08d74ff4 100644
--- a/packages/vant/src/pagination/index.less
+++ b/packages/vant/src/pagination/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-pagination-height: 40px;
   --van-pagination-font-size: var(--van-font-size-md);
   --van-pagination-item-width: 36px;
diff --git a/packages/vant/src/password-input/index.less b/packages/vant/src/password-input/index.less
index 212cfb9d5..c7133bb17 100644
--- a/packages/vant/src/password-input/index.less
+++ b/packages/vant/src/password-input/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-password-input-height: 50px;
   --van-password-input-margin: 0 var(--van-padding-md);
   --van-password-input-font-size: 20px;
diff --git a/packages/vant/src/picker-group/index.less b/packages/vant/src/picker-group/index.less
index 46dcc5ba9..8e5512bb4 100644
--- a/packages/vant/src/picker-group/index.less
+++ b/packages/vant/src/picker-group/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-picker-group-background: var(--van-background-2);
 }
 
diff --git a/packages/vant/src/picker/index.less b/packages/vant/src/picker/index.less
index 1306d1711..3ae0bf85a 100644
--- a/packages/vant/src/picker/index.less
+++ b/packages/vant/src/picker/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-picker-background: var(--van-background-2);
   --van-picker-toolbar-height: 44px;
   --van-picker-title-font-size: var(--van-font-size-lg);
diff --git a/packages/vant/src/popover/index.less b/packages/vant/src/popover/index.less
index db5f99009..5301f9ca2 100644
--- a/packages/vant/src/popover/index.less
+++ b/packages/vant/src/popover/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-popover-arrow-size: 6px;
   --van-popover-radius: var(--van-radius-lg);
   --van-popover-action-width: 128px;
diff --git a/packages/vant/src/popup/index.less b/packages/vant/src/popup/index.less
index 492c9cb30..1730bbe9c 100644
--- a/packages/vant/src/popup/index.less
+++ b/packages/vant/src/popup/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-popup-background: var(--van-background-2);
   --van-popup-transition: transform var(--van-duration-base);
   --van-popup-round-radius: 16px;
diff --git a/packages/vant/src/progress/index.less b/packages/vant/src/progress/index.less
index 733c4be4e..b26bb233d 100644
--- a/packages/vant/src/progress/index.less
+++ b/packages/vant/src/progress/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-progress-height: 4px;
   --van-progress-color: var(--van-primary-color);
   --van-progress-inactive-color: var(--van-gray-5);
diff --git a/packages/vant/src/pull-refresh/index.less b/packages/vant/src/pull-refresh/index.less
index d73272a1c..8f2e2eba5 100644
--- a/packages/vant/src/pull-refresh/index.less
+++ b/packages/vant/src/pull-refresh/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-pull-refresh-head-height: 50px;
   --van-pull-refresh-head-font-size: var(--van-font-size-md);
   --van-pull-refresh-head-text-color: var(--van-text-color-2);
diff --git a/packages/vant/src/radio/index.less b/packages/vant/src/radio/index.less
index b1d97718a..eb8f55fab 100644
--- a/packages/vant/src/radio/index.less
+++ b/packages/vant/src/radio/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-radio-size: 20px;
   --van-radio-border-color: var(--van-gray-5);
   --van-radio-duration: var(--van-duration-fast);
diff --git a/packages/vant/src/rate/index.less b/packages/vant/src/rate/index.less
index f4b91d650..a576c28f4 100644
--- a/packages/vant/src/rate/index.less
+++ b/packages/vant/src/rate/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-rate-icon-size: 20px;
   --van-rate-icon-gutter: var(--van-padding-base);
   --van-rate-icon-void-color: var(--van-gray-5);
diff --git a/packages/vant/src/search/index.less b/packages/vant/src/search/index.less
index f10d810bb..f7e7a82e8 100644
--- a/packages/vant/src/search/index.less
+++ b/packages/vant/src/search/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-search-padding: 10px var(--van-padding-sm);
   --van-search-background: var(--van-background-2);
   --van-search-content-background: var(--van-background);
diff --git a/packages/vant/src/share-sheet/index.less b/packages/vant/src/share-sheet/index.less
index b65b5a3f3..b7fced343 100644
--- a/packages/vant/src/share-sheet/index.less
+++ b/packages/vant/src/share-sheet/index.less
@@ -1,6 +1,6 @@
 @import '../style/mixins/hairline';
 
-body {
+:root {
   --van-share-sheet-header-padding: var(--van-padding-sm) var(--van-padding-md);
   --van-share-sheet-title-color: var(--van-text-color);
   --van-share-sheet-title-font-size: var(--van-font-size-md);
diff --git a/packages/vant/src/sidebar-item/index.less b/packages/vant/src/sidebar-item/index.less
index d7d212cda..6256fae78 100644
--- a/packages/vant/src/sidebar-item/index.less
+++ b/packages/vant/src/sidebar-item/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --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);
diff --git a/packages/vant/src/sidebar/index.less b/packages/vant/src/sidebar/index.less
index 03bac2445..faa02e900 100644
--- a/packages/vant/src/sidebar/index.less
+++ b/packages/vant/src/sidebar/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-sidebar-width: 80px;
 }
 
diff --git a/packages/vant/src/skeleton/index.less b/packages/vant/src/skeleton/index.less
index 1d69c0ec4..61ec79b9d 100644
--- a/packages/vant/src/skeleton/index.less
+++ b/packages/vant/src/skeleton/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-skeleton-row-height: 16px;
   --van-skeleton-row-background: var(--van-active-color);
   --van-skeleton-row-margin-top: var(--van-padding-sm);
diff --git a/packages/vant/src/slider/index.less b/packages/vant/src/slider/index.less
index 36098a431..e74b506c9 100644
--- a/packages/vant/src/slider/index.less
+++ b/packages/vant/src/slider/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-slider-active-background: var(--van-primary-color);
   --van-slider-inactive-background: var(--van-gray-3);
   --van-slider-disabled-opacity: var(--van-disabled-opacity);
diff --git a/packages/vant/src/step/index.less b/packages/vant/src/step/index.less
index 25d35a88d..cb55e7e83 100644
--- a/packages/vant/src/step/index.less
+++ b/packages/vant/src/step/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --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);
diff --git a/packages/vant/src/stepper/index.less b/packages/vant/src/stepper/index.less
index acbd5e17a..ea44c69f3 100644
--- a/packages/vant/src/stepper/index.less
+++ b/packages/vant/src/stepper/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-stepper-background: var(--van-active-color);
   --van-stepper-button-icon-color: var(--van-text-color);
   --van-stepper-button-disabled-color: var(--van-background);
diff --git a/packages/vant/src/steps/index.less b/packages/vant/src/steps/index.less
index 2dff8ad94..475fa9181 100644
--- a/packages/vant/src/steps/index.less
+++ b/packages/vant/src/steps/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-steps-background: var(--van-background-2);
 }
 
diff --git a/packages/vant/src/sticky/index.less b/packages/vant/src/sticky/index.less
index c651e2e41..4a0e8f727 100644
--- a/packages/vant/src/sticky/index.less
+++ b/packages/vant/src/sticky/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-sticky-z-index: 99;
 }
 
diff --git a/packages/vant/src/style/css-variables.less b/packages/vant/src/style/css-variables.less
index bd661c17d..417c9de70 100644
--- a/packages/vant/src/style/css-variables.less
+++ b/packages/vant/src/style/css-variables.less
@@ -1,4 +1,4 @@
-body {
+:root {
   // Color Palette
   --van-black: #000;
   --van-white: #fff;
diff --git a/packages/vant/src/style/normalize.less b/packages/vant/src/style/normalize.less
index fa066bc4b..9b5c7c249 100644
--- a/packages/vant/src/style/normalize.less
+++ b/packages/vant/src/style/normalize.less
@@ -2,7 +2,7 @@ html {
   -webkit-tap-highlight-color: transparent;
 }
 
-body {
+:root {
   margin: 0;
   font-family: var(--van-base-font);
 }
diff --git a/packages/vant/src/submit-bar/index.less b/packages/vant/src/submit-bar/index.less
index 88f4782ed..ceb8dab9d 100644
--- a/packages/vant/src/submit-bar/index.less
+++ b/packages/vant/src/submit-bar/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-submit-bar-height: 50px;
   --van-submit-bar-z-index: 100;
   --van-submit-bar-background: var(--van-background-2);
diff --git a/packages/vant/src/swipe/index.less b/packages/vant/src/swipe/index.less
index 907426b39..f9baa15ed 100644
--- a/packages/vant/src/swipe/index.less
+++ b/packages/vant/src/swipe/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-swipe-indicator-size: 6px;
   --van-swipe-indicator-margin: var(--van-padding-sm);
   --van-swipe-indicator-active-opacity: 1;
diff --git a/packages/vant/src/switch/index.less b/packages/vant/src/switch/index.less
index 58a8506c2..8fe51e470 100644
--- a/packages/vant/src/switch/index.less
+++ b/packages/vant/src/switch/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-switch-size: 26px;
   --van-switch-width: calc(1.8em + 4px);
   --van-switch-height: calc(1em + 4px);
diff --git a/packages/vant/src/tabbar-item/index.less b/packages/vant/src/tabbar-item/index.less
index 52d3bc767..e66f907e4 100644
--- a/packages/vant/src/tabbar-item/index.less
+++ b/packages/vant/src/tabbar-item/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-tabbar-item-font-size: var(--van-font-size-sm);
   --van-tabbar-item-text-color: var(--van-text-color);
   --van-tabbar-item-active-color: var(--van-primary-color);
diff --git a/packages/vant/src/tabbar/index.less b/packages/vant/src/tabbar/index.less
index abc4038e1..cbf2f06e5 100644
--- a/packages/vant/src/tabbar/index.less
+++ b/packages/vant/src/tabbar/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-tabbar-height: 50px;
   --van-tabbar-z-index: 1;
   --van-tabbar-background: var(--van-background-2);
diff --git a/packages/vant/src/tabs/index.less b/packages/vant/src/tabs/index.less
index 313105fae..ae606be1a 100644
--- a/packages/vant/src/tabs/index.less
+++ b/packages/vant/src/tabs/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --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);
diff --git a/packages/vant/src/tag/index.less b/packages/vant/src/tag/index.less
index 0742a3de5..034709164 100644
--- a/packages/vant/src/tag/index.less
+++ b/packages/vant/src/tag/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-tag-padding: 0 var(--van-padding-base);
   --van-tag-text-color: var(--van-white);
   --van-tag-font-size: var(--van-font-size-sm);
diff --git a/packages/vant/src/toast/index.less b/packages/vant/src/toast/index.less
index a075ed550..1caf17eed 100644
--- a/packages/vant/src/toast/index.less
+++ b/packages/vant/src/toast/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-toast-max-width: 70%;
   --van-toast-font-size: var(--van-font-size-md);
   --van-toast-text-color: var(--van-white);
diff --git a/packages/vant/src/tree-select/index.less b/packages/vant/src/tree-select/index.less
index 60c494862..b3ec6296d 100644
--- a/packages/vant/src/tree-select/index.less
+++ b/packages/vant/src/tree-select/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --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);
diff --git a/packages/vant/src/uploader/index.less b/packages/vant/src/uploader/index.less
index c6a5030d1..4cb4c459e 100644
--- a/packages/vant/src/uploader/index.less
+++ b/packages/vant/src/uploader/index.less
@@ -1,4 +1,4 @@
-body {
+:root {
   --van-uploader-size: 80px;
   --van-uploader-icon-size: 24px;
   --van-uploader-icon-color: var(--van-gray-4);