fix(android): fix status bar style (#10147)

packages/frontend/apps/android/App/app/capacitor.build.gradle

@@ -11,6 +11,7 @@ apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
     implementation project(':capacitor-app')
     implementation project(':capacitor-keyboard')
+    implementation project(':capacitor-status-bar')
     implementation project(':capgo-inappbrowser')
 
 }

packages/frontend/apps/android/App/app/src/main/java/app/affine/pro/MainActivity.kt

@@ -4,6 +4,7 @@ import android.os.Build
 import android.os.Bundle
 import androidx.annotation.RequiresApi
 import com.capacitorjs.plugins.keyboard.KeyboardPlugin
+import com.capacitorjs.plugins.statusbar.StatusBarPlugin
 import com.getcapacitor.BridgeActivity
 import com.getcapacitor.plugin.CapacitorCookies
 import com.getcapacitor.plugin.CapacitorHttp
@@ -20,6 +21,7 @@ class MainActivity : BridgeActivity() {
                 CapacitorCookies::class.java,
                 InAppBrowserPlugin::class.java,
                 KeyboardPlugin::class.java,
+                StatusBarPlugin::class.java,
             )
         )
     }

packages/frontend/apps/android/App/capacitor.settings.gradle

@@ -8,5 +8,8 @@ project(':capacitor-app').projectDir = new File('../../../../../node_modules/@ca
 include ':capacitor-keyboard'
 project(':capacitor-keyboard').projectDir = new File('../../../../../node_modules/@capacitor/keyboard/android')
 
+include ':capacitor-status-bar'
+project(':capacitor-status-bar').projectDir = new File('../../../../../node_modules/@capacitor/status-bar/android')
+
 include ':capgo-inappbrowser'
 project(':capgo-inappbrowser').projectDir = new File('../../../../../node_modules/@capgo/inappbrowser/android')

packages/frontend/apps/android/package.json

@@ -18,9 +18,11 @@
     "@capacitor/app": "^7.0.0",
     "@capacitor/core": "^7.0.0",
     "@capacitor/keyboard": "^7.0.0",
+    "@capacitor/status-bar": "^7.0.0",
     "@capgo/inappbrowser": "^7.1.0",
     "@sentry/react": "^8.44.0",
     "@toeverything/infra": "workspace:*",
+    "next-themes": "^0.4.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^6.28.0"

packages/frontend/apps/android/src/app.tsx

@@ -18,10 +18,12 @@ import { configureBrowserWorkspaceFlavours } from '@affine/core/modules/workspac
 import { StoreManagerClient } from '@affine/nbstore/worker/client';
 import { App as CapacitorApp } from '@capacitor/app';
 import { Keyboard } from '@capacitor/keyboard';
+import { StatusBar, Style } from '@capacitor/status-bar';
 import { InAppBrowser } from '@capgo/inappbrowser';
 import { Framework, FrameworkRoot, getCurrentStore } from '@toeverything/infra';
 import { OpClient } from '@toeverything/infra/op';
-import { Suspense } from 'react';
+import { useTheme } from 'next-themes';
+import { Suspense, useEffect } from 'react';
 import { RouterProvider } from 'react-router-dom';
 
 const storeManagerClient = new StoreManagerClient(
@@ -127,12 +129,32 @@ CapacitorApp.addListener('appUrlOpen', ({ url }) => {
   console.error(e);
 });
 
+const StatusBarProvider = () => {
+  const { resolvedTheme } = useTheme();
+
+  useEffect(() => {
+    StatusBar.setStyle({
+      style:
+        resolvedTheme === 'dark'
+          ? Style.Dark
+          : resolvedTheme === 'light'
+            ? Style.Light
+            : Style.Default,
+    }).catch(e => {
+      console.error(`Failed to set status bar style: ${e}`);
+    });
+  }, [resolvedTheme]);
+
+  return null;
+};
+
 export function App() {
   return (
     <Suspense>
       <FrameworkRoot framework={frameworkProvider}>
         <I18nProvider>
           <AffineContext store={getCurrentStore()}>
+            <StatusBarProvider />
             <RouterProvider
               fallbackElement={<AppFallback />}
               router={router}