Refactor app theme management (#15455)

src/status_im/events.cljs

@@ -117,7 +117,7 @@
   (let [current-theme-type (get-in cofx [:db :multiaccount :appearance])]
     (when (and (multiaccounts.model/logged-in? cofx)
                (= current-theme-type status-im2.constants/theme-type-system))
-      {:multiaccounts.ui/switch-theme
+      {:multiaccounts.ui/switch-theme-fx
        [(get-in db [:multiaccount :appearance])
         (:view-id db) true]})))
 

src/status_im/multiaccounts/core.cljs

@@ -5,14 +5,13 @@
             [status-im2.common.bottom-sheet.events :as bottom-sheet]
             [status-im.multiaccounts.update.core :as multiaccounts.update]
             [status-im.native-module.core :as native-module]
-            [status-im.theme.core :as theme]
             [utils.re-frame :as rf]
             [quo2.foundations.colors :as colors]
             [status-im2.constants :as constants]
             [status-im.utils.gfycat.core :as gfycat]
             [status-im.utils.identicon :as identicon]
             [status-im2.setup.hot-reload :as hot-reload]
-            [status-im2.common.theme.core :as utils.theme]
+            [status-im2.common.theme.core :as theme]
             [taoensso.timbre :as log]
             [status-im2.contexts.shell.animation :as shell.animation]
             [status-im.contact.db :as contact.db]))
@@ -137,16 +136,16 @@
     {::blank-preview-flag-changed private?}))
 
 (re-frame/reg-fx
- :multiaccounts.ui/switch-theme
+ :multiaccounts.ui/switch-theme-fx
  (fn [[theme-type view-id reload-ui?]]
    (let [[theme status-bar-theme nav-bar-color]
          ;; Status bar theme represents status bar icons colors, so opposite to app theme
          (if (or (= theme-type constants/theme-type-dark)
                  (and (= theme-type constants/theme-type-system)
-                      (utils.theme/dark-mode?)))
+                      (theme/device-theme-dark?)))
            [:dark :light colors/neutral-100]
            [:light :dark colors/white])]
-     (theme/change-theme theme)
+     (theme/set-theme theme)
      (re-frame/dispatch [:change-root-status-bar-style
                          (if (shell.animation/home-stack-open?) status-bar-theme :light)])
      (when reload-ui?
@@ -158,9 +157,17 @@
   {:events [:multiaccounts.ui/appearance-switched]}
   [cofx theme]
   (rf/merge cofx
-            {:multiaccounts.ui/switch-theme [theme :appearance true]}
+            {:multiaccounts.ui/switch-theme-fx [theme :appearance true]}
             (multiaccounts.update/multiaccount-update :appearance theme {})))
 
+(rf/defn switch-theme
+  {:events [:multiaccounts.ui/switch-theme]}
+  [cofx theme view-id]
+  (let [theme (or theme
+                  (get-in cofx [:db :multiaccount :appearance])
+                  constants/theme-type-dark)]
+    {:multiaccounts.ui/switch-theme-fx [theme view-id false]}))
+
 (rf/defn switch-profile-picture-show-to
   {:events [:multiaccounts.ui/profile-picture-show-to-switched]}
   [cofx id]

src/status_im/multiaccounts/login/core.cljs

@@ -339,10 +339,6 @@
     {:method     "permissions_getDappPermissions"
      :on-success #(re-frame/dispatch [::initialize-dapp-permissions %])}]})
 
-(rf/defn initialize-appearance
-  [cofx]
-  {:multiaccounts.ui/switch-theme [(get-in cofx [:db :multiaccount :appearance]) nil false]})
-
 (rf/defn get-group-chat-invitations
   [_]
   {:json-rpc/call
@@ -394,7 +390,6 @@
                 #(do (re-frame/dispatch [:chats-list/load-success %])
                      (rf/dispatch [:communities/get-user-requests-to-join])
                      (re-frame/dispatch [::get-chats-callback]))})
-              (initialize-appearance)
               (initialize-wallet-connect)
               (get-node-config)
               (communities/fetch)
@@ -532,7 +527,6 @@
                                 (assoc-in [:multiaccount :multiaccounts/first-account] first-account?))
                ::get-tokens [network-id accounts recovered-account?]}
               (finish-keycard-setup)
-              (initialize-appearance)
               (transport/start-messenger)
               (communities/fetch)
               (data-store.chats/fetch-chats-rpc
@@ -636,8 +630,7 @@
        login)
       (rf/merge
        cofx
-       {:db                 (dissoc db :goto-key-storage?)
+       {:db (dissoc db :goto-key-storage?)}
-        :theme/change-theme :dark}
        (when keycard-account?
          {:db (-> db
                   (assoc-in [:keycard :pin :status] nil)

src/status_im/theme/core.cljs

@@ -1,14 +0,0 @@
-(ns status-im.theme.core
-  (:require [quo.theme :as quo.theme]
-            [quo2.theme :as quo2.theme]
-            [re-frame.core :as re-frame]))
-
-(defn change-theme
-  [theme]
-  (quo.theme/set-theme theme)
-  (quo2.theme/set-theme theme))
-
-(re-frame/reg-fx
- :theme/change-theme
- (fn [theme]
-   (change-theme theme)))

src/status_im2/common/theme/core.cljs

@@ -1,17 +1,24 @@
 (ns status-im2.common.theme.core
-  (:require [react-native.core :as rn]))
+  (:require [quo.theme :as quo]
+            [quo2.theme :as quo2]
+            [react-native.core :as rn]))
 
-(def initial-mode (atom (rn/get-color-scheme)))
+(def device-theme (atom (rn/get-color-scheme)))
 
 ;; Note - don't use value returned by change listener
 ;; https://github.com/facebook/react-native/issues/28525
-(defn add-mode-change-listener
+(defn add-device-theme-change-listener
   [callback]
-  (rn/appearance-add-change-listener #(let [mode (rn/get-color-scheme)]
+  (rn/appearance-add-change-listener #(let [theme (rn/get-color-scheme)]
-                                        (when-not (= mode @initial-mode)
+                                        (when-not (= theme @device-theme)
-                                          (reset! initial-mode mode)
+                                          (reset! device-theme theme)
-                                          (callback (keyword mode))))))
+                                          (callback (keyword theme))))))
 
-(defn dark-mode?
+(defn device-theme-dark?
   []
-  (= @initial-mode "dark"))
+  (= @device-theme "dark"))
+
+(defn set-theme
+  [value]
+  (quo/set-theme value)
+  (quo2/set-theme value))

src/status_im2/contexts/quo_preview/main.cljs

@@ -4,9 +4,9 @@
     [quo2.components.buttons.button :as quo2-button]
     [quo2.components.markdown.text :as quo2-text]
     [quo2.foundations.colors :as colors]
-    [quo2.theme :as theme]
     [re-frame.core :as re-frame]
     [react-native.core :as rn]
+    [status-im2.common.theme.core :as theme]
     [status-im2.contexts.quo-preview.animated-header-list.animated-header-list :as animated-header-list]
     [status-im2.contexts.quo-preview.avatars.account-avatar :as account-avatar]
     [status-im2.contexts.quo-preview.avatars.channel-avatar :as channel-avatar]

src/status_im2/events.cljs

@@ -1,7 +1,5 @@
 (ns status-im2.events
   (:require [clojure.string :as string]
-            [quo.theme :as quo.theme]
-            [quo2.theme :as quo2.theme]
             [re-frame.core :as re-frame]
             [status-im.multiaccounts.login.core :as multiaccounts.login]
             [status-im.native-module.core :as status]
@@ -32,10 +30,8 @@
 (re-frame/reg-fx
  :setup/init-theme
  (fn []
-   (theme/add-mode-change-listener #(re-frame/dispatch [:system-theme-mode-changed %]))
+   (theme/add-device-theme-change-listener
-   (quo2.theme/set-theme :dark)
+    #(re-frame/dispatch [:system-theme-mode-changed %]))))
-   ;; TODO legacy support
-   (quo.theme/set-theme :dark)))
 
 (rf/defn initialize-views
   {:events [:setup/initialize-view]}

src/status_im2/navigation/core.cljs

@@ -190,6 +190,9 @@
    (let [root (get (roots/roots) new-root-id)]
      (log/debug :init-root-fx new-root-id)
      (dismiss-all-modals)
+     (re-frame/dispatch [:multiaccounts.ui/switch-theme
+                         (get roots/themes new-root-id)
+                         new-root-id])
      (reset! state/root-id (or (get-in root [:root :stack :id]) new-root-id))
      (navigation/set-root root))))
 

src/status_im2/navigation/roots.cljs

@@ -1,5 +1,6 @@
 (ns status-im2.navigation.roots
-  (:require [quo2.foundations.colors :as colors]
+  (:require [status-im2.constants :as constants]
+            [quo2.foundations.colors :as colors]
             [react-native.platform :as platform]
             [status-im2.navigation.view :as views]
             [status-im2.navigation.state :as state]))
@@ -136,6 +137,16 @@
                                     (status-bar-options)
                                     {:topBar (assoc (topbar-options) :visible false)})}}}})
 
+;; Theme Order for navigation roots
+;; 1. Themes hardcoded in below map
+;; 2. If nil or no entry in map, then theme stored in
+;;    [:db :multiaccount :appearance] will be used (for mulitaccounts)
+;; 3). Fallback theme - Dark
+(def themes
+  {:intro       constants/theme-type-dark
+   :profiles    constants/theme-type-dark
+   :shell-stack nil})
+
 (defn roots
   []
   ;;TABS
@@ -146,8 +157,8 @@
            {:stack {:id       :intro
                     :children [{:component {:name    :intro
                                             :id      :intro
-                                            :options {:statusBar {:style :light}
+                                            :options (merge (status-bar-options)
-                                                      :topBar    {:visible false}}}}]}}}}
+                                                            {:topBar {:visible false}})}}]}}}}
          {:shell-stack
           {:root
            {:stack {:id       :shell-stack