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

packages/vant-cli/site/common/iframe-sync.js

@@ -1,7 +1,4 @@
-/**
- * 同步父窗口和 iframe 的 vue-router 状态
- */
-
+import { ref } from 'vue';
 import { config } from 'site-desktop-shared';
 
 let queue = [];
@@ -62,6 +59,40 @@ export function syncPathToChild() {
   }
 }
 
+export function syncThemeToChild(theme) {
+  const iframe = document.querySelector('iframe');
+  if (iframe) {
+    iframeReady(() => {
+      iframe.contentWindow.postMessage(
+        {
+          type: 'updateTheme',
+          value: theme,
+        },
+        '*'
+      );
+    });
+  }
+}
+
+export function getDefaultTheme() {
+  return window.localStorage.getItem('vantTheme') || 'light';
+}
+
+export function useCurrentTheme() {
+  const theme = ref(getDefaultTheme());
+
+  window.addEventListener('message', (event) => {
+    if (event.data?.type !== 'updateTheme') {
+      return;
+    }
+
+    const newTheme = event.data?.value || '';
+    theme.value = newTheme;
+  });
+
+  return theme;
+}
+
 export function listenToSyncPath(router) {
   window.addEventListener('message', (event) => {
     if (event.data?.type !== 'replacePath') {

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

@@ -1,4 +1,4 @@
-:root {
+body {
   // colors
   --van-doc-black: #1a1a1a;
   --van-doc-white: #fff;
@@ -55,9 +55,9 @@
   --van-doc-link-color: #1bb5fe;
 
   // background
-  --van-doc-background: var(--van-doc-black);
+  --van-doc-background: #202124;
   --van-doc-background-light: rgba(255, 255, 255, 0.06);
-  --van-doc-header-background: #011428;
+  --van-doc-header-background: rgba(1, 31, 60, 0.3);
   --van-doc-border-color: #3a3a3c;
   --van-doc-shadow-color: transparent;
 

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);

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;
 

packages/vant/vant.config.mjs

@@ -16,7 +16,7 @@ export default {
   },
   site: {
     defaultLang: 'en-US',
-    supportDarkMode: true,
+    darkModeClass: 'van-theme-dark',
     versions: [
       { label: 'v1', link: '/vant/v1/' },
       { label: 'v2', link: '/vant/' },