fix: ios pwa dark theme set status bar color

Signed-off-by: BobDu <i@bobdu.cc>
chatgpt-web-dev · Jan 15, 2024 · 35608f4 · 35608f4
1 parent 26ec966
commit 35608f4
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
 	<link rel="apple-touch-icon" href="/favicon.ico">
 	<meta name="viewport"
 		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
+    <meta name="theme-color">
 	<title>${SITE_TITLE}</title>
 </head>
 

diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
@@ -31,10 +31,14 @@ export function useTheme() {
   watch(
     () => isDark.value,
     (dark) => {
-      if (dark)
+      if (dark) {
         document.documentElement.classList.add('dark')
-      else
+        document.querySelector('head meta[name="theme-color"]')?.setAttribute('content', '#121212')
+      }
+      else {
         document.documentElement.classList.remove('dark')
+        document.querySelector('head meta[name="theme-color"]')?.setAttribute('content', '#eee')
+      }
     },
     { immediate: true },
   )