Improve theme switch (#20984)

src/legacy/status_im/events.cljs

@@ -102,8 +102,7 @@
   (let [current-theme-type (get-in cofx [:db :profile/profile :appearance])]
     (when (and (multiaccounts.model/logged-in? db)
                (= current-theme-type status-im.constants/theme-type-system))
-      {:profile.settings/switch-theme-fx
+      {:dispatch [:theme/switch]})))
-       [(get-in db [:profile/profile :appearance]) (:view-id db)]})))
 
 (defn- on-biometric-auth-fail
   [{:keys [code]}]

src/status_im/common/theme/effects.cljs

@@ -0,0 +1,8 @@
+(ns status-im.common.theme.effects
+  (:require
+    [status-im.common.theme.core :as theme]
+    [utils.re-frame :as rf]))
+
+(rf/reg-fx :theme/legacy-theme-fx
+ (fn [theme]
+   (theme/set-legacy-theme theme)))

src/status_im/common/theme/events.cljs

@@ -1,7 +1,8 @@
 (ns status-im.common.theme.events
   (:require
     [re-frame.core :as re-frame]
-    [status-im.common.theme.core :as theme]))
+    [status-im.common.theme.core :as theme]
+    [status-im.common.theme.utils :as utils]))
 
 (re-frame/reg-fx
  :theme/init-theme
@@ -10,5 +11,16 @@
 
 (re-frame/reg-event-fx
  :theme/switch
- (fn [{db :db} [theme]]
+ (fn [{db :db} [{:keys [theme view-id theme-type]}]]
-   {:db (assoc db :theme theme)}))
+   "Switches the theme and triggers related effects.
+   Parameters:
+   - theme: Optional theme keyword to apply. If not provided, defaults to the theme determined by theme-type.
+   - theme-type: Optional theme type to determine the theme. If not provided, defaults to the theme type from the user's profile.
+   - view-id: Optional view ID for updating status color. If not provided, uses the current view ID from the database."
+   (let [theme-type (or theme-type (get-in db [:profile/profile :appearance]))
+         theme      (or theme (utils/theme-type->theme-value theme-type))]
+     {:db (assoc db :theme theme)
+      :fx [[:theme/legacy-theme-fx theme]
+           [:dispatch
+            [:reload-status-nav-color
+             (or view-id (:view-id db))]]]})))

src/status_im/common/theme/utils.cljs

@@ -0,0 +1,17 @@
+(ns status-im.common.theme.utils
+  (:require
+    [status-im.common.theme.core :as theme]
+    [status-im.constants :as constants]))
+
+(defn theme-type->theme-value
+  "Converts theme type identifier to a theme keyword.
+  Returns `:light` or `:dark` based on `theme-type`:
+  - `theme-type-light` (1): Light theme.
+  - `theme-type-dark` (2): Dark theme.
+  - `theme-type-system` (0): Uses system preference."
+  [theme-type]
+  (condp = theme-type
+    constants/theme-type-dark   :dark
+    constants/theme-type-light  :light
+    constants/theme-type-system (if (theme/device-theme-dark?) :dark :light)
+    :dark))

src/status_im/contexts/preview/quo/common.cljs

@@ -19,10 +19,10 @@
       :icon-name  :i/close
       :right-side [{:icon-name (if light? :i/dark :i/light)
                     :on-press  #(if light?
-                                  (rf/dispatch [:theme/switch :dark])
+                                  (rf/dispatch [:theme/switch {:theme :dark}])
-                                  (rf/dispatch [:theme/switch :light]))}]
+                                  (rf/dispatch [:theme/switch {:theme :light}]))}]
       :on-press   #(if (or logged-in? (not= (rf/sub [:view-id]) :quo-preview))
                      (rf/dispatch [:navigate-back])
                      (do
-                       (rf/dispatch [:theme/switch :dark])
+                       (rf/dispatch [:theme/switch {:theme :dark}])
                        (rf/dispatch [:init-root root])))}]))

src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs

@@ -50,7 +50,7 @@
      (fn []
        (rn/use-effect (fn []
                         (when @blur?
-                          (rf/dispatch [:theme/switch :dark])))
+                          (rf/dispatch [:theme/switch {:theme :dark}])))
                       [@blur?])
        [preview/preview-container {:state state :descriptor descriptor}
         [rn/view

src/status_im/contexts/preview/quo/preview.cljs

@@ -377,8 +377,8 @@
     (rn/use-effect (fn []
                      (when blur-dark-only?
                        (if blur?
-                         (rf/dispatch [:theme/switch :dark])
+                         (rf/dispatch [:theme/switch {:theme :dark}])
-                         (rf/dispatch [:theme/switch :light]))))
+                         (rf/dispatch [:theme/switch {:theme :light}]))))
                    [blur? blur-dark-only?])
     [rn/view
      {:style {:top  (safe-area/get-top)

src/status_im/contexts/profile/login/events.cljs

@@ -4,7 +4,6 @@
     [native-module.core :as native-module]
     [status-im.common.keychain.events :as keychain]
     [status-im.config :as config]
-    [status-im.constants :as constants]
     status-im.contexts.profile.login.effects
     [status-im.contexts.profile.rpc :as profile.rpc]
     [status-im.feature-flags :as ff]
@@ -80,11 +79,7 @@
                   [[:dispatch [:onboarding/finalize-setup]]]
 
                   :else
-                  [[:profile.settings/switch-theme-fx
+                  [[:dispatch [:init-root :shell-stack]]
-                    [(or (:appearance settings)
-                         constants/theme-type-dark)
-                     :shell-stack]]
-                   [:dispatch [:init-root :shell-stack]]
                    [:dispatch [:profile/show-testnet-mode-banner-if-enabled]]]))})))
 
 ;; login phase 2: we want to load and show chats faster, so we split login into 2 phases

src/status_im/contexts/profile/settings/effects.cljs

@@ -1,10 +1,7 @@
 (ns status-im.contexts.profile.settings.effects
   (:require [native-module.core :as native-module]
             [re-frame.core :as re-frame]
-            [react-native.platform :as platform]
+            [react-native.platform :as platform]))
-            [status-im.common.theme.core :as theme]
-            [status-im.constants :as constants]
-            [utils.re-frame :as rf]))
 
 (re-frame/reg-fx
  :profile.settings/blank-preview-flag-changed
@@ -16,15 +13,3 @@
  (fn [value]
    (when platform/android?
      (native-module/toggle-webview-debug value))))
-
-(re-frame/reg-fx
- :profile.settings/switch-theme-fx
- (fn [[theme-type view-id]]
-   (let [theme (if (or (= theme-type constants/theme-type-dark)
-                       (and (= theme-type constants/theme-type-system)
-                            (theme/device-theme-dark?)))
-                 :dark
-                 :light)]
-     (theme/set-legacy-theme theme)
-     (rf/dispatch [:theme/switch theme])
-     (rf/dispatch [:reload-status-nav-color view-id]))))

src/status_im/contexts/profile/settings/events.cljs

@@ -95,14 +95,7 @@
 (rf/reg-event-fx :profile.settings/change-appearance
  (fn [_ [theme]]
    {:fx [[:dispatch [:profile.settings/profile-update :appearance theme]]
-         [:profile.settings/switch-theme-fx [theme :appearance]]]}))
+         [:dispatch [:theme/switch {:theme-type theme}]]]}))
-
-(rf/reg-event-fx :profile.settings/switch-theme
- (fn [{:keys [db]} [theme view-id]]
-   (let [theme (or theme
-                   (get-in db [:profile/profile :appearance])
-                   constants/theme-type-dark)]
-     {:fx [[:profile.settings/switch-theme-fx [theme view-id]]]})))
 
 (rf/reg-fx :profile.settings/get-profile-picture
  (fn [key-uid]

src/status_im/events.cljs

@@ -12,6 +12,7 @@
     status-im.common.peer-stats.events
     status-im.common.shared-urls.events
     status-im.common.signals.events
+    status-im.common.theme.effects
     status-im.common.theme.events
     [status-im.common.toasts.events]
     status-im.common.universal-links

src/status_im/navigation/effects.cljs

@@ -74,9 +74,7 @@
    (let [[status-bar-theme] (get-status-nav-color root-id theme)
          root               (get (roots/roots status-bar-theme) root-id)]
      (dismiss-all-modals)
-     (rf/dispatch [:profile.settings/switch-theme
+     (rf/dispatch [:theme/switch {:view-id root-id}])
-                   (get roots/themes root-id)
-                   root-id])
      (reset! state/root-id (or (get-in root [:root :stack :id]) root-id))
      (navigation/set-root root)
      (state/navigation-state-reset [{:id   root-id

src/status_im/navigation/roots.cljs

@@ -1,19 +1,8 @@
 (ns status-im.navigation.roots
   (:require
     [quo.foundations.colors :as colors]
-    [status-im.constants :as constants]
     [status-im.navigation.options :as options]))
 
-;; Theme Order for navigation roots
-;; 1. Themes hardcoded in below map
-;; 2. If nil or no entry in map, then theme stored in
-;;    [:db :profile/profile :appearance] will be used (for mulitaccounts)
-;; 3). Fallback theme - Dark
-(def themes
-  {:screen/onboarding.intro constants/theme-type-dark
-   :screen/profile.profiles constants/theme-type-dark
-   :shell-stack             nil})
-
 (defn roots-internal
   [status-bar-theme]
   {:screen/onboarding.intro