diff --git a/frontend_nuxt/nuxt.config.ts b/frontend_nuxt/nuxt.config.ts index 3c680c484..e11a587a9 100644 --- a/frontend_nuxt/nuxt.config.ts +++ b/frontend_nuxt/nuxt.config.ts @@ -26,7 +26,28 @@ export default defineNuxtConfig({ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; const theme = mode === 'dark' || mode === 'light' ? mode : (prefersDark ? 'dark' : 'light'); document.documentElement.dataset.theme = theme; - } catch (e) {} + + + let themeColor = '#fff'; + if (theme === 'dark') { + themeColor = '#333'; + } else { + themeColor = '#ffffff'; + } + + const androidMeta = document.createElement('meta'); + androidMeta.name = 'theme-color'; + androidMeta.content = themeColor; + + const iosMeta = document.createElement('meta'); + iosMeta.name = 'apple-mobile-web-app-status-bar-style'; + iosMeta.content = themeColor; + + document.head.appendChild(androidMeta); + document.head.appendChild(iosMeta); + } catch (e) { + console.warn('Theme initialization failed:', e); + } })(); `, }, diff --git a/frontend_nuxt/utils/theme.js b/frontend_nuxt/utils/theme.js index d27fbc223..816fbe987 100644 --- a/frontend_nuxt/utils/theme.js +++ b/frontend_nuxt/utils/theme.js @@ -24,6 +24,29 @@ function apply(mode) { : mode if (root.dataset.theme === newMode) return root.dataset.theme = newMode + + // 更新 meta 标签 + const androidMeta = document.querySelector('meta[name="theme-color"]') + const iosMeta = document.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]') + const themeColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim(); + + if (androidMeta) { + androidMeta.content = themeColor + } else { + const newAndroidMeta = document.createElement('meta') + newAndroidMeta.name = 'theme-color' + newAndroidMeta.content = themeColor + document.head.appendChild(newAndroidMeta) + } + + if (iosMeta) { + iosMeta.content = themeColor + } else { + const newIosMeta = document.createElement('meta') + newIosMeta.name = 'apple-mobile-web-app-status-bar-style' + newIosMeta.content = themeColor + document.head.appendChild(newIosMeta) + } } export function initTheme() {