Fix: android nav bar and status bar color (#7385)

* fix(android): set nav bar and status bar color

Close #7382

src/main/frontend/handler.cljs

@@ -219,13 +219,15 @@
 
   (-> (p/let [repos (get-repos)
               _ (state/set-repos! repos)
-              _ (restore-and-setup! repos)])
+              _ (restore-and-setup! repos)]
+        (when (mobile-util/native-platform?)
+          (p/do!
+           (mobile-util/hide-splash)
+           (state/restore-mobile-theme!))))
       (p/catch (fn [e]
                  (js/console.error "Error while restoring repos: " e)))
       (p/finally (fn []
                    (state/set-db-restoring! false))))
-  (when (mobile-util/native-platform?)
-    (mobile-util/hide-splash))
 
   (db/run-batch-txs!)
   (file/<ratelimit-file-writes!)

src/main/frontend/state.cljs

@@ -1114,7 +1114,7 @@ Similar to re-frame subscriptions"
 
 (defn set-theme-mode!
   [mode]
-  (when (mobile-util/native-ios?)
+  (when (mobile-util/native-platform?)
     (if (= mode "light")
       (util/set-theme-light)
       (util/set-theme-dark)))
@@ -1137,7 +1137,7 @@ Similar to re-frame subscriptions"
       (set-state! :ui/system-theme? false)
       (storage/set :ui/system-theme? false))))
 
-(defn toggle-theme
+(defn- toggle-theme
   [theme]
   (if (= theme "dark") "light" "dark"))
 
@@ -1152,6 +1152,17 @@ Similar to re-frame subscriptions"
    (set-state! (if mode [:ui/custom-theme (keyword mode)] :ui/custom-theme) theme)
    (storage/set :ui/custom-theme (:ui/custom-theme @state))))
 
+(defn restore-mobile-theme!
+  "Restore mobile theme setting from local storage"
+  []
+  (let [mode (or (storage/get :ui/theme) "light")
+        system-theme? (storage/get :ui/system-theme?)]
+    (when (and (not system-theme?)
+               (mobile-util/native-platform?))
+      (if (= mode "light")
+        (util/set-theme-light)
+        (util/set-theme-dark)))))
+
 (defn set-editing-block-dom-id!
   [block-dom-id]
   (set-state! :editor/block-dom-id block-dom-id))

src/main/frontend/util.cljc

@@ -6,6 +6,7 @@
             ["/frontend/selection" :as selection]
             ["/frontend/utils" :as utils]
             ["@capacitor/status-bar" :refer [^js StatusBar Style]]
+            ["@hugotomazi/capacitor-navigation-bar" :refer [^js NavigationBar]]
             ["grapheme-splitter" :as GraphemeSplitter]
             ["remove-accents" :as removeAccents]
             ["sanitize-filename" :as sanitizeFilename]
@@ -16,7 +17,7 @@
             [cljs-time.core :as t]
             [clojure.pprint]
             [dommy.core :as d]
-            [frontend.mobile.util :refer [native-platform?]]
+            [frontend.mobile.util :as mobile-util]
             [logseq.graph-parser.util :as gp-util]
             [goog.dom :as gdom]
             [goog.object :as gobj]
@@ -91,7 +92,7 @@
 
 #?(:cljs
    (defn mobile?
-       "Triggering condition: Mobile phones
+     "Triggering condition: Mobile phones
         *** Warning!!! ***
         For UX logic only! Don't use for FS logic
         iPad / Android Pad doesn't trigger!"
@@ -114,7 +115,7 @@
 #?(:cljs
    (do
      (def nfs? (and (not (electron?))
-                    (not (native-platform?))))
+                    (not (mobile-util/native-platform?))))
      (def web-platform? nfs?)))
 
 #?(:cljs
@@ -163,17 +164,24 @@
      []
      (gobj/get js/window "innerWidth")))
 
+;; Keep the following colors in sync with common.css
 #?(:cljs
    (defn set-theme-light
      []
      (p/do!
-      (.setStyle StatusBar (clj->js {:style (.-Light Style)})))))
+      (.setStyle StatusBar (clj->js {:style (.-Light Style)}))
+      (when (mobile-util/native-android?)
+        (.setColor NavigationBar (clj->js {:color "#ffffff"}))
+        (.setBackgroundColor StatusBar (clj->js {:color "#ffffff"}))))))
 
 #?(:cljs
    (defn set-theme-dark
      []
      (p/do!
-      (.setStyle StatusBar (clj->js {:style (.-Dark Style)})))))
+      (.setStyle StatusBar (clj->js {:style (.-Dark Style)}))
+      (when (mobile-util/native-android?)
+        (.setColor NavigationBar (clj->js {:color "#002b36"}))
+        (.setBackgroundColor StatusBar (clj->js {:color "#002b36"}))))))
 
 (defn find-first
   [pred coll]
@@ -818,9 +826,9 @@
        (let [block-id (.-id block)
              block-ids (mapv #(.-id %) blocks)]
          (when-let [index (.indexOf block-ids block-id)]
-          (let [idx (dec index)]
-            (when (>= idx 0)
-              (nth-safe blocks idx))))))))
+           (let [idx (dec index)]
+             (when (>= idx 0)
+               (nth-safe blocks idx))))))))
 
 #?(:cljs
    (defn get-next-block-non-collapsed
@@ -829,9 +837,9 @@
        (let [block-id (.-id block)
              block-ids (mapv #(.-id %) blocks)]
          (when-let [index (.indexOf block-ids block-id)]
-          (let [idx (inc index)]
-            (when (>= (count blocks) idx)
-              (nth-safe blocks idx))))))))
+           (let [idx (inc index)]
+             (when (>= (count blocks) idx)
+               (nth-safe blocks idx))))))))
 
 #?(:cljs
    (defn get-next-block-non-collapsed-skip
@@ -840,14 +848,14 @@
        (let [block-id (.-id block)
              block-ids (mapv #(.-id %) blocks)]
          (when-let [index (.indexOf block-ids block-id)]
-          (loop [idx (inc index)]
-            (when (>= (count blocks) idx)
-              (let [block (nth-safe blocks idx)
-                    nested? (->> (array-seq (gdom/getElementsByClass "selected"))
-                                 (some (fn [dom] (.contains dom block))))]
-                (if nested?
-                  (recur (inc idx))
-                  block)))))))))
+           (loop [idx (inc index)]
+             (when (>= (count blocks) idx)
+               (let [block (nth-safe blocks idx)
+                     nested? (->> (array-seq (gdom/getElementsByClass "selected"))
+                                  (some (fn [dom] (.contains dom block))))]
+                 (if nested?
+                   (recur (inc idx))
+                   block)))))))))
 
 (defn rand-str
   [n]
@@ -934,9 +942,9 @@
      "Normalize string for searching (loose)"
      [s remove-accents?]
      (let [normalize-str (.normalize (string/lower-case s) "NFKC")]
-      (if remove-accents?
-        (removeAccents  normalize-str)
-        normalize-str))))
+       (if remove-accents?
+         (removeAccents  normalize-str)
+         normalize-str))))
 
 #?(:cljs
    (def page-name-sanity-lc
@@ -944,10 +952,10 @@
      gp-util/page-name-sanity-lc))
 
 #?(:cljs
- (defn safe-page-name-sanity-lc
-   [s]
-   (if (string? s)
-     (page-name-sanity-lc s) s)))
+   (defn safe-page-name-sanity-lc
+     [s]
+     (if (string? s)
+       (page-name-sanity-lc s) s)))
 
 (defn get-page-original-name
   [page]
@@ -1286,7 +1294,7 @@
 #?(:cljs
    (defn scroll-editor-cursor
      [^js/HTMLElement el & {:keys [to-vw-one-quarter?]}]
-     (when (and el (or (native-platform?) mobile?))
+     (when (and el (or (mobile-util/native-platform?) mobile?))
        (let [box-rect    (.getBoundingClientRect el)
              box-top     (.-top box-rect)
              box-bottom  (.-bottom box-rect)
@@ -1428,4 +1436,4 @@
                   (-> (.blob data)
                       (.then (fn [blob]
                                (js/navigator.clipboard.write (clj->js [(js/ClipboardItem. (clj->js {(.-type blob) blob}))]))))
-                      (.catch js/console.error)))))))
+                      (.catch js/console.error)))))))