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;