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}

yarn.lock

@@ -231,12 +231,14 @@ __metadata:
     "@capacitor/cli": "npm:^7.0.0"
     "@capacitor/core": "npm:^7.0.0"
     "@capacitor/keyboard": "npm:^7.0.0"
+    "@capacitor/status-bar": "npm:^7.0.0"
     "@capgo/inappbrowser": "npm:^7.1.0"
     "@sentry/react": "npm:^8.44.0"
     "@toeverything/infra": "workspace:*"
     "@types/react": "npm:^19.0.1"
     "@types/react-dom": "npm:^19.0.2"
     cross-env: "npm:^7.0.3"
+    next-themes: "npm:^0.4.4"
     react: "npm:^19.0.0"
     react-dom: "npm:^19.0.0"
     react-router-dom: "npm:^6.28.0"
@@ -4273,6 +4275,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@capacitor/status-bar@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "@capacitor/status-bar@npm:7.0.0"
+  peerDependencies:
+    "@capacitor/core": ">=7.0.0"
+  checksum: 10/c04cca182271792d20d353fe530ffa10c246bf815176711930f8db4cc67d18709a15e8ae5d298c87028f67da66bf40ead9fbc437c53b295bf4634f2cb4c5bf1b
+  languageName: node
+  linkType: hard
+
 "@capgo/inappbrowser@npm:^7.1.0":
   version: 7.1.6
   resolution: "@capgo/inappbrowser@npm:7.1.6"