diff --git a/packages/vant-cli/site/common/iframe-router.js b/packages/vant-cli/site/common/iframe-sync.js
similarity index 68%
rename from packages/vant-cli/site/common/iframe-router.js
rename to packages/vant-cli/site/common/iframe-sync.js
index 4a798f976..dec1dc354 100644
--- a/packages/vant-cli/site/common/iframe-router.js
+++ b/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') {
diff --git a/packages/vant-cli/site/common/style/vars.less b/packages/vant-cli/site/common/style/vars.less
index ba47238ca..94a433f8c 100644
--- a/packages/vant-cli/site/common/style/vars.less
+++ b/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;
diff --git a/packages/vant-cli/site/desktop/App.vue b/packages/vant-cli/site/desktop/App.vue
index d513fb73f..c0b58dfc0 100644
--- a/packages/vant-cli/site/desktop/App.vue
+++ b/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"
>
@@ -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(
diff --git a/packages/vant-cli/site/desktop/components/Header.vue b/packages/vant-cli/site/desktop/components/Header.vue
index a9818f3ae..f1ec24f11 100644
--- a/packages/vant-cli/site/desktop/components/Header.vue
+++ b/packages/vant-cli/site/desktop/components/Header.vue
@@ -21,7 +21,7 @@
-