fix: attach css variables to :root element (#11026)

packages/vant-cli/site/common/style/vars.less

@@ -1,4 +1,4 @@
-body {
+:root {
   // colors
   --van-doc-black: #000;
   --van-doc-white: #fff;

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,

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 {