status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Refactor app theme management (#15455)

This commit is contained in:
Parvesh Monu 2023-03-24 22:04:55 +05:30 committed by GitHub
parent 7d4be37111
commit 7b60a5f867
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 51 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/status_im/events.cljs
View File

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

19
src/status_im/multiaccounts/core.cljs
View File

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

9
src/status_im/multiaccounts/login/core.cljs
View File

@ -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?)
:theme/change-theme :dark}
{:db (dissoc db :goto-key-storage?)}
(when keycard-account?
{:db (-> db
(assoc-in [:keycard :pin :status] nil)

14
src/status_im/theme/core.cljs
View File

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

25
src/status_im2/common/theme/core.cljs
View File

@ -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)]
(when-not (= mode @initial-mode)
(reset! initial-mode mode)
(callback (keyword mode))))))
(rn/appearance-add-change-listener #(let [theme (rn/get-color-scheme)]
(when-not (= theme @device-theme)
(reset! device-theme theme)
(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))

2
src/status_im2/contexts/quo_preview/main.cljs
View File

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

8
src/status_im2/events.cljs
View File

@ -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 %]))
(quo2.theme/set-theme :dark)
;; TODO legacy support
(quo.theme/set-theme :dark)))
(theme/add-device-theme-change-listener
#(re-frame/dispatch [:system-theme-mode-changed %]))))
(rf/defn initialize-views
{:events [:setup/initialize-view]}

3
src/status_im2/navigation/core.cljs
View File

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

17
src/status_im2/navigation/roots.cljs
View File

@ -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}
:topBar {:visible false}}}}]}}}}
:options (merge (status-bar-options)
{:topBar {:visible false}})}}]}}}}
{:shell-stack
{:root
{:stack {:id :shell-stack