feat(@vant/cli): mobile site support dark mode

packages/vant-cli/site/mobile/App.vue

@@ -10,10 +10,31 @@
 </template>
 
 <script>
+import { watch } from 'vue';
 import DemoNav from './components/DemoNav.vue';
+import { useCurrentTheme } from '../common/iframe-sync';
+import { config } from 'site-mobile-shared';
 
 export default {
   components: { DemoNav },
+
+  setup() {
+    const theme = useCurrentTheme();
+
+    watch(
+      theme,
+      (newVal, oldVal) => {
+        document.body.classList.remove(`van-doc-theme-${oldVal}`);
+        document.body.classList.add(`van-doc-theme-${newVal}`);
+
+        const { darkModeClass } = config.site;
+        if (darkModeClass) {
+          document.body.classList.toggle(darkModeClass, newVal === 'dark');
+        }
+      },
+      { immediate: true }
+    );
+  },
 };
 </script>
 
@@ -24,6 +45,10 @@ body {
   min-width: 100vw;
 }
 
+.van-doc-theme-dark {
+  background-color: var(--van-doc-background);
+}
+
 ::-webkit-scrollbar {
   width: 0;
   background: transparent;

packages/vant-cli/site/mobile/components/DemoNav.vue

@@ -42,7 +42,7 @@ export default {
   align-items: center;
   justify-content: center;
   height: 56px;
-  background-color: #fff;
+  background-color: var(--van-doc-background-light);
 
   &__title {
     font-weight: 600;

packages/vant-cli/site/mobile/router.js

@@ -4,7 +4,7 @@ import DemoHome from './components/DemoHome.vue';
 import { decamelize } from '../common';
 import { demos, config } from 'site-mobile-shared';
 import { getLang, setDefaultLang } from '../common/locales';
-import { listenToSyncPath, syncPathToParent } from '../common/iframe-router';
+import { listenToSyncPath, syncPathToParent } from '../common/iframe-sync';
 
 const { locales, defaultLang } = config.site;