Fix status bar not visible in light theme

web/hooks/use-theme.ts

@@ -1,6 +1,8 @@
 'use client'
-import { useEffect } from 'react'
-import { usePersistentLocalState } from './use-persistent-local-state'
+import {useEffect} from 'react'
+import {usePersistentLocalState} from './use-persistent-local-state'
+import {Capacitor} from "@capacitor/core";
+import {StatusBar, Style} from "@capacitor/status-bar";
 
 type theme_option = 'light' | 'dark' | 'auto'
 
@@ -15,7 +17,7 @@ export const useTheme = () => {
     reRenderTheme()
   }
 
-  return { theme: themeState, setTheme }
+  return {theme: themeState, setTheme}
 }
 
 export const useThemeManager = () => {
@@ -37,12 +39,41 @@ export const useThemeManager = () => {
 // Without 1, there is a flash of light theme before the tailwind stylesheet loads.
 // Without 2, there is a flash of light theme when tailwind stylesheet loads, before the react hooks run.
 const reRenderTheme = () => {
-  const theme: theme_option | null =
-    JSON.parse(localStorage.getItem('theme') ?? 'null') ?? 'auto'
+  const theme: theme_option | null = getTheme()
 
-  if (theme === 'dark' || (theme !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+  if (isDark(theme)) {
     document.documentElement.classList.add('dark')
   } else {
     document.documentElement.classList.remove('dark')
   }
+
+  updateStatusBar()
 }
+
+function getTheme() {
+  return JSON.parse(localStorage.getItem('theme') ?? 'null') ?? 'auto'
+}
+
+function isDark(theme: theme_option | null) {
+  return theme === 'dark' || (theme !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+}
+
+
+export const updateStatusBar = async () => {
+  // Update status bar on native platforms
+  if (!Capacitor.isNativePlatform()) return
+  try {
+    const theme = getTheme()
+    if (isDark(theme)) {
+      // Dark theme: light text on dark background
+      await StatusBar.setStyle({style: Style.Dark});
+      // await StatusBar.setBackgroundColor({color: '#000000'}); // or your dark bg color
+    } else {
+      // Light theme: dark text on light background
+      await StatusBar.setStyle({style: Style.Light});
+      // await StatusBar.setBackgroundColor({color: '#ffffff'}); // or your light bg color
+    }
+  } catch (error) {
+    console.error('Failed to update status bar:', error);
+  }
+}

web/pages/_app.tsx

@@ -21,6 +21,7 @@ import {Keyboard} from "@capacitor/keyboard"
 import {IS_VERCEL} from "common/hosting/constants"
 import {getLocale, resetCachedLocale} from "web/lib/locale-cookie"
 import {I18nContext} from "web/lib/locale"
+import {updateStatusBar} from "web/hooks/use-theme";
 
 if (Capacitor.isNativePlatform()) {
   // Only runs on iOS/Android native
@@ -114,6 +115,10 @@ function MyApp(props: AppProps<PageProps>) {
     }
   }, [])
 
+  useEffect(() => {
+    updateStatusBar()
+  }, [])
+
   useEffect(() => {
     initTracking()