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

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

@@ -8,7 +8,7 @@
       :simulator="simulator"
       :has-simulator="hasSimulator"
       :lang-configs="langConfigs"
-      :support-dark-mode="supportDarkMode"
+      :dark-mode-class="darkModeClass"
     >
       <router-view />
     </van-doc>
@@ -28,7 +28,7 @@ export default {
   data() {
     return {
       hasSimulator: true,
-      supportDarkMode: config.site.supportDarkMode,
+      darkModeClass: config.site.darkModeClass,
     };
   },
 
@@ -72,18 +72,18 @@ export default {
   watch: {
     // eslint-disable-next-line
     '$route.path'() {
-      this.setTitleAndToogleSimulator();
+      this.setTitleAndToggleSimulator();
     },
 
     lang(val) {
       setLang(val);
-      this.setTitleAndToogleSimulator();
+      this.setTitleAndToggleSimulator();
     },
 
     config: {
       handler(val) {
         if (val) {
-          this.setTitleAndToogleSimulator();
+          this.setTitleAndToggleSimulator();
         }
       },
       immediate: true,
@@ -102,7 +102,7 @@ export default {
   },
 
   methods: {
-    setTitleAndToogleSimulator() {
+    setTitleAndToggleSimulator() {
       let { title } = this.config;
 
       const navItems = this.config.nav.reduce(

packages/vant-cli/site/desktop/components/Header.vue

@@ -21,7 +21,7 @@
             </a>
           </li>
 
-          <li v-if="supportDarkMode" class="van-doc-header__top-nav-item">
+          <li v-if="darkModeClass" class="van-doc-header__top-nav-item">
             <a
               class="van-doc-header__link"
               target="_blank"
@@ -76,6 +76,7 @@
 <script>
 import SearchInput from './SearchInput.vue';
 import { packageVersion } from 'site-desktop-shared';
+import { getDefaultTheme, syncThemeToChild } from '../../common/iframe-sync';
 
 export default {
   name: 'VanDocHeader',
@@ -89,12 +90,12 @@ export default {
     config: Object,
     versions: Array,
     langConfigs: Array,
-    supportDarkMode: Boolean,
+    darkModeClass: String,
   },
 
   data() {
     return {
-      currentTheme: this.getDefaultTheme(),
+      currentTheme: getDefaultTheme(),
       packageVersion,
       showVersionPop: false,
     };
@@ -136,16 +137,13 @@ export default {
         window.localStorage.setItem('vantTheme', newVal);
         document.body.classList.remove(`van-doc-theme-${oldVal}`);
         document.body.classList.add(`van-doc-theme-${newVal}`);
+        syncThemeToChild(newVal);
       },
       immediate: true,
     },
   },
 
   methods: {
-    getDefaultTheme() {
-      return window.localStorage.getItem('vantTheme') || 'light';
-    },
-
     toggleTheme() {
       this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light';
     },

packages/vant-cli/site/desktop/components/index.vue

@@ -5,7 +5,7 @@
       :config="config"
       :versions="versions"
       :lang-configs="langConfigs"
-      :support-dark-mode="supportDarkMode"
+      :dark-mode-class="darkModeClass"
       @switch-version="$emit('switch-version', $event)"
     />
     <doc-nav :lang="lang" :nav-config="config.nav" />
@@ -42,7 +42,7 @@ export default {
     simulator: String,
     langConfigs: Array,
     hasSimulator: Boolean,
-    supportDarkMode: Boolean,
+    darkModeClass: String,
     config: {
       type: Object,
       required: true,

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

@@ -3,7 +3,7 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 import { isMobile, decamelize } from '../common';
 import { config, documents } from 'site-desktop-shared';
 import { getLang, setDefaultLang } from '../common/locales';
-import { listenToSyncPath, syncPathToChild } from '../common/iframe-router';
+import { listenToSyncPath, syncPathToChild } from '../common/iframe-sync';
 
 if (isMobile) {
   location.replace('mobile.html' + location.hash);