feat(ios): status bar style changes with logseq theme (#3947)

Co-authored-by: leizhe <[email protected]>

src/main/frontend/state.cljs

@@ -941,6 +941,10 @@
 (defn set-theme!
   [theme]
   (set-state! :ui/theme theme)
+  (when (mobile-util/native-ios?)
+    (if (= theme "white")
+      (util/set-theme-light)
+      (util/set-theme-dark)))
   (storage/set :ui/theme theme))
 
 (defn sync-system-theme!
@@ -959,10 +963,6 @@
       (storage/set :ui/system-theme? false))
     (sync-system-theme!)))
 
-(defn dark?
-  []
-  (= "dark" (:ui/theme @state)))
-
 (defn set-editing-block-dom-id!
   [block-dom-id]
   (set-state! :editor/block-dom-id block-dom-id))

src/main/frontend/util.cljc

@@ -129,6 +129,16 @@
      []
      (gobj/get js/window "innerWidth")))
 
+#?(:cljs
+   (defn set-theme-light
+     []
+     (utils/setStatusBarStyleLight)))
+
+#?(:cljs
+   (defn set-theme-dark
+     []
+     (utils/setStatusBarStyleDark)))
+
 (defn indexed
   [coll]
   (map-indexed vector coll))

src/main/frontend/utils.js

@@ -1,4 +1,5 @@
 import path from 'path/path.js'
+import { StatusBar, Style } from '@capacitor/status-bar'
 
 if (typeof window === 'undefined') {
   global.window = {}
@@ -294,3 +295,19 @@ export const nodePath = Object.assign({}, path, {
     return path.extname(input)
   }
 })
+
+export const setStatusBarStyleDark = async () => {
+  await StatusBar.setStyle({ style: Style.Dark });
+};
+
+export const setStatusBarStyleLight = async () => {
+  await StatusBar.setStyle({ style: Style.Light });
+};
+
+export const hideStatusBar = async () => {
+  await StatusBar.hide();
+};
+
+export const showStatusBar = async () => {
+  await StatusBar.show();
+};