From 31ca8f25b6b390cb7c9b42f060e2cc353bc7a028 Mon Sep 17 00:00:00 2001 From: aki-chang-dev <7299525+aki-chang-dev@users.noreply.github.com> Date: Thu, 13 Feb 2025 07:14:11 +0000 Subject: [PATCH] fix(android): fix status bar style (#10147) --- .../android/App/app/capacitor.build.gradle | 1 + .../main/java/app/affine/pro/MainActivity.kt | 2 ++ .../android/App/capacitor.settings.gradle | 3 +++ packages/frontend/apps/android/package.json | 2 ++ packages/frontend/apps/android/src/app.tsx | 24 ++++++++++++++++++- yarn.lock | 11 +++++++++ 6 files changed, 42 insertions(+), 1 deletion(-) diff --git a/packages/frontend/apps/android/App/app/capacitor.build.gradle b/packages/frontend/apps/android/App/app/capacitor.build.gradle index 464e4cd448..34285effe4 100644 --- a/packages/frontend/apps/android/App/app/capacitor.build.gradle +++ b/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') } diff --git a/packages/frontend/apps/android/App/app/src/main/java/app/affine/pro/MainActivity.kt b/packages/frontend/apps/android/App/app/src/main/java/app/affine/pro/MainActivity.kt index bbba5edb91..7a785865bf 100644 --- a/packages/frontend/apps/android/App/app/src/main/java/app/affine/pro/MainActivity.kt +++ b/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, ) ) } diff --git a/packages/frontend/apps/android/App/capacitor.settings.gradle b/packages/frontend/apps/android/App/capacitor.settings.gradle index 46eaad7d0b..ea13bcd033 100644 --- a/packages/frontend/apps/android/App/capacitor.settings.gradle +++ b/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') diff --git a/packages/frontend/apps/android/package.json b/packages/frontend/apps/android/package.json index 31886c97ed..901e484b62 100644 --- a/packages/frontend/apps/android/package.json +++ b/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" diff --git a/packages/frontend/apps/android/src/app.tsx b/packages/frontend/apps/android/src/app.tsx index 0407839efd..e0fa10b3d0 100644 --- a/packages/frontend/apps/android/src/app.tsx +++ b/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 ( + } router={router} diff --git a/yarn.lock b/yarn.lock index f1d6bd766e..84baf306be 100644 --- a/yarn.lock +++ b/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"