Improve theme switch (#20984)

This commit is contained in:
Parvesh Monu 2024-08-09 20:12:49 +05:30 committed by GitHub
parent 0dfc8384e6
commit 35e71289dc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 52 additions and 55 deletions

View File

@ -102,8 +102,7 @@
(let [current-theme-type (get-in cofx [:db :profile/profile :appearance])] (let [current-theme-type (get-in cofx [:db :profile/profile :appearance])]
(when (and (multiaccounts.model/logged-in? db) (when (and (multiaccounts.model/logged-in? db)
(= current-theme-type status-im.constants/theme-type-system)) (= 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 (defn- on-biometric-auth-fail
[{:keys [code]}] [{:keys [code]}]

View File

@ -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)))

View File

@ -1,7 +1,8 @@
(ns status-im.common.theme.events (ns status-im.common.theme.events
(:require (:require
[re-frame.core :as re-frame] [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 (re-frame/reg-fx
:theme/init-theme :theme/init-theme
@ -10,5 +11,16 @@
(re-frame/reg-event-fx (re-frame/reg-event-fx
:theme/switch :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))]]]})))

View File

@ -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))

View File

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

View File

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

View File

@ -377,8 +377,8 @@
(rn/use-effect (fn [] (rn/use-effect (fn []
(when blur-dark-only? (when blur-dark-only?
(if blur? (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?]) [blur? blur-dark-only?])
[rn/view [rn/view
{:style {:top (safe-area/get-top) {:style {:top (safe-area/get-top)

View File

@ -4,7 +4,6 @@
[native-module.core :as native-module] [native-module.core :as native-module]
[status-im.common.keychain.events :as keychain] [status-im.common.keychain.events :as keychain]
[status-im.config :as config] [status-im.config :as config]
[status-im.constants :as constants]
status-im.contexts.profile.login.effects status-im.contexts.profile.login.effects
[status-im.contexts.profile.rpc :as profile.rpc] [status-im.contexts.profile.rpc :as profile.rpc]
[status-im.feature-flags :as ff] [status-im.feature-flags :as ff]
@ -80,11 +79,7 @@
[[:dispatch [:onboarding/finalize-setup]]] [[:dispatch [:onboarding/finalize-setup]]]
:else :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]]]))}))) [: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 ;; login phase 2: we want to load and show chats faster, so we split login into 2 phases

View File

@ -1,10 +1,7 @@
(ns status-im.contexts.profile.settings.effects (ns status-im.contexts.profile.settings.effects
(:require [native-module.core :as native-module] (:require [native-module.core :as native-module]
[re-frame.core :as re-frame] [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 (re-frame/reg-fx
:profile.settings/blank-preview-flag-changed :profile.settings/blank-preview-flag-changed
@ -16,15 +13,3 @@
(fn [value] (fn [value]
(when platform/android? (when platform/android?
(native-module/toggle-webview-debug value)))) (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]))))

View File

@ -95,14 +95,7 @@
(rf/reg-event-fx :profile.settings/change-appearance (rf/reg-event-fx :profile.settings/change-appearance
(fn [_ [theme]] (fn [_ [theme]]
{:fx [[:dispatch [:profile.settings/profile-update :appearance 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 (rf/reg-fx :profile.settings/get-profile-picture
(fn [key-uid] (fn [key-uid]

View File

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

View File

@ -74,9 +74,7 @@
(let [[status-bar-theme] (get-status-nav-color root-id theme) (let [[status-bar-theme] (get-status-nav-color root-id theme)
root (get (roots/roots status-bar-theme) root-id)] root (get (roots/roots status-bar-theme) root-id)]
(dismiss-all-modals) (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)) (reset! state/root-id (or (get-in root [:root :stack :id]) root-id))
(navigation/set-root root) (navigation/set-root root)
(state/navigation-state-reset [{:id root-id (state/navigation-state-reset [{:id root-id

View File

@ -1,19 +1,8 @@
(ns status-im.navigation.roots (ns status-im.navigation.roots
(:require (:require
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[status-im.constants :as constants]
[status-im.navigation.options :as options])) [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 (defn roots-internal
[status-bar-theme] [status-bar-theme]
{:screen/onboarding.intro {:screen/onboarding.intro