diff --git a/frontend_nuxt/nuxt.config.ts b/frontend_nuxt/nuxt.config.ts index e11a587a9..66a0afb71 100644 --- a/frontend_nuxt/nuxt.config.ts +++ b/frontend_nuxt/nuxt.config.ts @@ -29,10 +29,13 @@ export default defineNuxtConfig({ let themeColor = '#fff'; + let themeStatus = 'default'; if (theme === 'dark') { themeColor = '#333'; + themeStatus = 'black-translucent'; } else { themeColor = '#ffffff'; + themeStatus = 'default'; } const androidMeta = document.createElement('meta'); @@ -41,8 +44,8 @@ export default defineNuxtConfig({ const iosMeta = document.createElement('meta'); iosMeta.name = 'apple-mobile-web-app-status-bar-style'; - iosMeta.content = themeColor; - + iosMeta.content = themeStatus; + document.head.appendChild(androidMeta); document.head.appendChild(iosMeta); } catch (e) { diff --git a/frontend_nuxt/utils/theme.js b/frontend_nuxt/utils/theme.js index 816fbe987..8f6206436 100644 --- a/frontend_nuxt/utils/theme.js +++ b/frontend_nuxt/utils/theme.js @@ -29,6 +29,7 @@ function apply(mode) { 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(); + const themeStatus = newMode === 'dark' ? 'black-translucent' : 'default' if (androidMeta) { androidMeta.content = themeColor @@ -40,11 +41,11 @@ function apply(mode) { } if (iosMeta) { - iosMeta.content = themeColor + iosMeta.content = themeStatus } else { const newIosMeta = document.createElement('meta') newIosMeta.name = 'apple-mobile-web-app-status-bar-style' - newIosMeta.content = themeColor + newIosMeta.content = themeStatus document.head.appendChild(newIosMeta) } }