From dd20d8896f2b825774bc9d0e0de427cdf3a57dd4 Mon Sep 17 00:00:00 2001
From: Jamie Caprani <jamiecaprani@gmail.com>
Date: Mon, 16 Oct 2023 10:20:37 +0200
Subject: [PATCH] remove custom-color-by-theme method, add resolve-color method
 (#17567)

---
 .../account_avatar/component_spec.cljs        |  8 +-
 .../avatars/account_avatar/style.cljs         |  6 +-
 .../avatars/channel_avatar/style.cljs         |  8 +-
 .../avatars/channel_avatar/view.cljs          | 31 +++---
 src/quo2/components/avatars/icon_avatar.cljs  |  4 +-
 .../components/avatars/user_avatar/style.cljs |  4 +-
 .../avatars/wallet_user_avatar.cljs           | 19 ++--
 .../calendar/calendar_day/style.cljs          |  4 +-
 src/quo2/components/code/common/style.cljs    | 40 ++++----
 src/quo2/components/code/common/view.cljs     | 48 ++++++----
 .../components/dividers/new_messages.cljs     | 15 +--
 .../list_items/account_list_card/view.cljs    |  3 +-
 .../components/list_items/address/view.cljs   |  2 +-
 .../components/list_items/channel/style.cljs  |  5 +-
 .../list_items/community/style.cljs           |  2 +-
 .../list_items/token_value/style.cljs         | 14 +--
 .../record_audio/buttons/lock_button.cljs     |  8 +-
 .../components/selectors/selectors/style.cljs | 95 ++++++++++---------
 .../components/selectors/selectors/view.cljs  | 18 ++--
 .../components/settings/accounts/style.cljs   | 27 +++---
 .../components/settings/accounts/view.cljs    | 41 +++++---
 src/quo2/components/wallet/keypair/view.cljs  |  2 +-
 .../wallet/network_bridge/style.cljs          |  4 +-
 .../wallet/network_bridge/view.cljs           |  4 +-
 .../components/wallet/network_link/view.cljs  | 22 ++---
 src/quo2/core.cljs                            |  2 +-
 src/quo2/foundations/colors.cljs              | 57 ++++++-----
 src/quo2/foundations/colors_test.cljs         | 43 +++++----
 .../quo_preview/avatars/channel_avatar.cljs   | 16 ++--
 .../contexts/quo_preview/common.cljs          | 14 +--
 .../quo_preview/dividers/new_messages.cljs    | 15 +--
 .../quo_preview/list_items/channel.cljs       | 12 +--
 .../list_items/community_list.cljs            | 27 +++---
 .../contexts/quo_preview/preview.cljs         | 72 +++++++-------
 .../contexts/wallet/common/temp.cljs          |  3 +-
 35 files changed, 363 insertions(+), 332 deletions(-)

diff --git a/src/quo2/components/avatars/account_avatar/component_spec.cljs b/src/quo2/components/avatars/account_avatar/component_spec.cljs
index b9462cb1b7..101d407df7 100644
--- a/src/quo2/components/avatars/account_avatar/component_spec.cljs
+++ b/src/quo2/components/avatars/account_avatar/component_spec.cljs
@@ -28,7 +28,7 @@
                    {:height          (:size opts)
                     :width           (:size opts)
                     :borderRadius    (style/get-border-radius (:size opts))
-                    :backgroundColor (colors/custom-color-by-theme (:customization-color opts) 50 60)})
+                    :backgroundColor (colors/resolve-color (:customization-color opts) :dark)})
       (h/is-truthy (h/query-by-label-text :account-emoji))
       (h/has-style (h/query-by-label-text :account-emoji)
                    {:fontSize (style/get-emoji-size (:size opts))})
@@ -47,7 +47,7 @@
         :width           (:size opts)
         :borderRadius    (style/get-border-radius (:size opts))
         :borderWidth     1
-        :backgroundColor (colors/custom-color-by-theme (:customization-color opts) 50 50 10 10)})
+        :backgroundColor (colors/resolve-color (:customization-color opts) :light 10)})
       (h/is-truthy (h/query-by-label-text :account-emoji))
       (h/has-style (h/query-by-label-text :account-emoji)
                    {:fontSize (style/get-emoji-size (:size opts))})
@@ -64,7 +64,7 @@
                    {:height          (:size opts)
                     :width           (:size opts)
                     :borderRadius    (style/get-border-radius (:size opts))
-                    :backgroundColor (colors/custom-color-by-theme (:customization-color opts) 50 60)})
+                    :backgroundColor (colors/resolve-color (:customization-color opts) :dark)})
       (h/is-truthy (h/query-by-label-text :account-emoji))
       (h/has-style (h/query-by-label-text :account-emoji)
                    {:fontSize (style/get-emoji-size (:size opts))})
@@ -83,7 +83,7 @@
         :width           (:size opts)
         :borderRadius    (style/get-border-radius (:size opts))
         :borderWidth     0.8
-        :backgroundColor (colors/custom-color-by-theme (:customization-color opts) 50 50 10 10)})
+        :backgroundColor (colors/resolve-color (:customization-color opts) :light 10)})
       (h/is-truthy (h/query-by-label-text :account-emoji))
       (h/has-style (h/query-by-label-text :account-emoji)
                    {:fontSize (style/get-emoji-size (:size opts))})
diff --git a/src/quo2/components/avatars/account_avatar/style.cljs b/src/quo2/components/avatars/account_avatar/style.cljs
index 419b4ffabb..bcfd077d48 100644
--- a/src/quo2/components/avatars/account_avatar/style.cljs
+++ b/src/quo2/components/avatars/account_avatar/style.cljs
@@ -63,14 +63,14 @@
                       (keyword? size) (container-size size))]
     (cond-> {:width            width
              :height           width
-             :background-color (colors/custom-color-by-theme customization-color 50 60 nil nil theme)
+             :background-color (colors/resolve-color customization-color theme)
              :border-radius    (get-border-radius size)
-             :border-color     (if (= theme :light) colors/neutral-80-opa-5 colors/white-opa-5)
+             :border-color     (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
              :padding          (get-padding size)
              :align-items      :center
              :justify-content  :center}
 
       watch-only?
       (assoc :border-width     (get-border-width size)
-             :background-color (colors/custom-color-by-theme customization-color 50 50 10 10 theme)))))
+             :background-color (colors/resolve-color customization-color theme 10)))))
 
diff --git a/src/quo2/components/avatars/channel_avatar/style.cljs b/src/quo2/components/avatars/channel_avatar/style.cljs
index b669f32c7d..dc2bf2cc6c 100644
--- a/src/quo2/components/avatars/channel_avatar/style.cljs
+++ b/src/quo2/components/avatars/channel_avatar/style.cljs
@@ -4,7 +4,7 @@
 (def lock-icon-size 12)
 
 (defn outer-container
-  [{:keys [size color]}]
+  [{:keys [size customization-color theme]}]
   (let [container-size (case size
                          :size-64 64
                          :size-32 32
@@ -14,7 +14,7 @@
      :border-radius    container-size
      :justify-content  :center
      :align-items      :center
-     :background-color (colors/theme-alpha color 0.1 0.1)}))
+     :background-color (colors/resolve-color customization-color theme 10)}))
 
 (defn emoji-size
   [size]
@@ -24,12 +24,12 @@
                 11)})
 
 (defn lock-container
-  [size]
+  [size theme]
   (let [distance (if (= size :size-32) 20 12)]
     {:position         :absolute
      :left             distance
      :top              distance
-     :background-color (colors/theme-colors colors/white colors/neutral-95)
+     :background-color (colors/theme-colors colors/white colors/neutral-95 theme)
      :border-radius    (* 2 lock-icon-size)
      :padding          2}))
 
diff --git a/src/quo2/components/avatars/channel_avatar/view.cljs b/src/quo2/components/avatars/channel_avatar/view.cljs
index 80ed007369..295f7ca4b1 100644
--- a/src/quo2/components/avatars/channel_avatar/view.cljs
+++ b/src/quo2/components/avatars/channel_avatar/view.cljs
@@ -5,15 +5,16 @@
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
-            [utils.string]))
+            [utils.string]
+            [quo2.theme :as quo.theme]))
 
 (defn- initials
-  [full-name size color]
+  [{:keys [full-name size customization-color theme]}]
   (let [amount-initials (if (#{:size-32 :size-64} size) 2 1)
         channel-name    (string/replace full-name "#" "")]
     [text/text
      (cond-> {:accessibility-label :initials
-              :style               {:color color}
+              :style               {:color (colors/resolve-color customization-color theme)}
               :size                :paragraph-2
               :weight              :semi-bold}
        (= size :size-64) (assoc :size   :heading-1
@@ -21,18 +22,18 @@
      (utils.string/get-initials channel-name amount-initials)]))
 
 (defn- lock
-  [locked? size]
+  [locked? size theme]
   ;; When `locked?` is nil, we must not display the unlocked icon.
   (when (boolean? locked?)
     [rn/view
      {:accessibility-label :lock
-      :style               (style/lock-container size)}
+      :style               (style/lock-container size theme)}
      [icons/icon (if locked? :i/locked :i/unlocked)
-      {:color           (colors/theme-colors colors/neutral-50 colors/neutral-40)
+      {:color           (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
        :container-style style/lock-icon
        :size            12}]]))
 
-(defn view
+(defn- view-internal
   "Options:
 
   :size - keyword (default nil) - Container size, for the moment,
@@ -50,14 +51,22 @@
   :full-name - string (default nil) - When :emoji is blank, this value will be
   used to extract the initials.
   "
-  [{:keys [size emoji customization-color locked? full-name]}]
+  [{:keys [size emoji customization-color locked? full-name theme]}]
   [rn/view
    {:accessibility-label :channel-avatar
-    :style               (style/outer-container {:size size :color customization-color})}
+    :style               (style/outer-container {:theme               theme
+                                                 :size                size
+                                                 :customization-color customization-color})}
    (if (string/blank? emoji)
-     [initials full-name size customization-color]
+     [initials
+      {:full-name           full-name
+       :size                size
+       :customization-color customization-color
+       :theme               theme}]
      [rn/text
       {:style               (style/emoji-size size)
        :accessibility-label :emoji}
       (string/trim emoji)])
-   [lock locked? size]])
+   [lock locked? size theme]])
+
+(def view (quo.theme/with-theme view-internal))
diff --git a/src/quo2/components/avatars/icon_avatar.cljs b/src/quo2/components/avatars/icon_avatar.cljs
index bf8f6c2d9a..2341e946d5 100644
--- a/src/quo2/components/avatars/icon_avatar.cljs
+++ b/src/quo2/components/avatars/icon_avatar.cljs
@@ -19,8 +19,8 @@
     :or   {opacity 20
            size    :size-32}}]
   (let [{component-size :component icon-size :icon} (get sizes size)
-        circle-color                                (colors/custom-color color 50 opacity)
-        icon-color                                  (colors/custom-color-by-theme color 50 60)]
+        circle-color                                (colors/resolve-color color theme opacity)
+        icon-color                                  (colors/resolve-color color theme)]
     [rn/view
      {:style {:width            component-size
               :height           component-size
diff --git a/src/quo2/components/avatars/user_avatar/style.cljs b/src/quo2/components/avatars/user_avatar/style.cljs
index 2b512cbeb2..f266d78494 100644
--- a/src/quo2/components/avatars/user_avatar/style.cljs
+++ b/src/quo2/components/avatars/user_avatar/style.cljs
@@ -62,7 +62,7 @@
      :border-radius    dimensions
      :justify-content  :center
      :align-items      :center
-     :background-color (colors/custom-color-by-theme customization-color 50 60 nil nil theme)}))
+     :background-color (colors/resolve-color customization-color theme)}))
 
 (def indicator-color
   {:online  colors/success-50
@@ -80,7 +80,7 @@
 
 (defn customization-color
   [color-id theme]
-  (colors/custom-color-by-theme color-id 50 60 nil nil theme))
+  (colors/resolve-color color-id theme))
 
 (def initials-avatar-text
   {:color colors/white-opa-70})
diff --git a/src/quo2/components/avatars/wallet_user_avatar.cljs b/src/quo2/components/avatars/wallet_user_avatar.cljs
index eae352af97..81035efe8d 100644
--- a/src/quo2/components/avatars/wallet_user_avatar.cljs
+++ b/src/quo2/components/avatars/wallet_user_avatar.cljs
@@ -2,7 +2,8 @@
   (:require [clojure.string :as string]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]))
+            [react-native.core :as rn]
+            [quo2.theme :as quo.theme]))
 
 (def circle-sizes
   {:small   20
@@ -25,10 +26,10 @@
    :size-64 :medium
    :x-large :medium})
 
-(defn wallet-user-avatar
-  "params, first name, last name, color, size
+(defn- view-internal
+  "params, first name, last name, customization-color, size
    and if it's dark or not!"
-  [{:keys [f-name l-name customization-color size monospace? uppercase?]
+  [{:keys [f-name l-name customization-color size theme monospace? uppercase?]
     :or   {f-name     "John"
            l-name     "Doe"
            size       :x-large
@@ -42,11 +43,11 @@
                            (#(if uppercase? (string/upper-case %) %))
                            (subs 0 1))
         circle-color   (if customization-color
-                         (colors/custom-color customization-color 50 20)
-                         (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5))
+                         (colors/resolve-color customization-color theme 20)
+                         (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme))
         text-color     (if customization-color
-                         (colors/custom-color-by-theme customization-color 50 60)
-                         (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70))]
+                         (colors/resolve-color customization-color theme)
+                         (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme))]
     [rn/view
      {:style {:width            circle-size
               :height           circle-size
@@ -62,3 +63,5 @@
       (if small?
         (str f-name-initial)
         (str f-name-initial l-name-initial))]]))
+
+(def wallet-user-avatar (quo.theme/with-theme view-internal))
diff --git a/src/quo2/components/calendar/calendar_day/style.cljs b/src/quo2/components/calendar/calendar_day/style.cljs
index 65592e0987..79dce46bb8 100644
--- a/src/quo2/components/calendar/calendar_day/style.cljs
+++ b/src/quo2/components/calendar/calendar_day/style.cljs
@@ -50,7 +50,7 @@
     (assoc :opacity 0.3)
 
     (= state :selected)
-    (assoc :background-color (colors/custom-color-by-theme customization-color 50 60 nil nil theme))))
+    (assoc :background-color (colors/resolve-color customization-color theme))))
 
 (defn text
   [{:keys [state theme]}]
@@ -65,5 +65,5 @@
    :height           2
    :border-radius    8
    :background-color (if (= state :today)
-                       (colors/custom-color-by-theme customization-color 50 60 nil nil theme)
+                       (colors/resolve-color customization-color theme)
                        colors/neutral-100-opa-0)})
diff --git a/src/quo2/components/code/common/style.cljs b/src/quo2/components/code/common/style.cljs
index 562b90262a..ebbc593a26 100644
--- a/src/quo2/components/code/common/style.cljs
+++ b/src/quo2/components/code/common/style.cljs
@@ -4,25 +4,25 @@
 ;; Example themes:
 ;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
 (defn highlight-theme
-  [theme-key]
-  (case theme-key
-    :hljs-comment      (colors/theme-colors colors/neutral-40 colors/neutral-60)
-    :hljs-title        (colors/custom-color-by-theme :sky 50 60)
-    :hljs-keyword      (colors/custom-color-by-theme :green 50 60)
-    :hljs-string       (colors/custom-color-by-theme :turquoise 50 60)
-    :hljs-literal      (colors/custom-color-by-theme :turquoise 50 60)
-    :hljs-number       (colors/custom-color-by-theme :turquoise 50 60)
-    :hljs-symbol       (colors/custom-color-by-theme :orange 50 50)
-    :hljs-builtin-name (colors/custom-color-by-theme :pink 50 50)
+  [class-name theme]
+  (case class-name
+    :hljs-comment      (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
+    :hljs-title        (colors/resolve-color :sky theme)
+    :hljs-keyword      (colors/resolve-color :green theme)
+    :hljs-string       (colors/resolve-color :turquoise theme)
+    :hljs-literal      (colors/resolve-color :turquoise theme)
+    :hljs-number       (colors/resolve-color :turquoise theme)
+    :hljs-symbol       (colors/resolve-color :orange theme)
+    :hljs-builtin-name (colors/resolve-color :pink theme)
     :line-number       colors/neutral-40
     nil))
 
 (defn text-style
-  [class-names preview?]
+  [class-names preview? theme]
   (let [text-color (->> class-names
                         (map keyword)
                         (some (fn [class-name]
-                                (when-let [text-color (highlight-theme class-name)]
+                                (when-let [text-color (highlight-theme class-name theme)]
                                   text-color))))]
     (cond-> {:flex-shrink 1
              :line-height 18}
@@ -30,8 +30,8 @@
       text-color (assoc :color text-color))))
 
 (defn border-color
-  []
-  (colors/theme-colors colors/neutral-20 colors/neutral-80))
+  [theme]
+  (colors/theme-colors colors/neutral-20 colors/neutral-80 theme))
 
 (defn container
   [preview? theme]
@@ -43,7 +43,7 @@
     {:overflow         :hidden
      :padding          8
      :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40 theme)
-     :border-color     (border-color)
+     :border-color     (border-color theme)
      :border-width     1
      :border-radius    16}))
 
@@ -68,14 +68,14 @@
                     :background-color (colors/theme-colors colors/neutral-10 colors/neutral-70 theme))))
 
 (defn divider
-  [line-number-width]
+  [line-number-width theme]
   {:position         :absolute
    :bottom           0
    :top              0
    :left             (+ line-number-width 7 7)
    :width            1
    :z-index          2
-   :background-color (border-color)})
+   :background-color (border-color theme)})
 
 (def line {:flex-direction :row})
 
@@ -100,8 +100,4 @@
    :right    8
    :z-index  1})
 
-(defn gradient-color [] (colors/theme-colors colors/white colors/neutral-80))
-
-(defn button-background-color
-  []
-  (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5))
+(defn gradient-color [theme] (colors/theme-colors colors/white colors/neutral-80 theme))
diff --git a/src/quo2/components/code/common/view.cljs b/src/quo2/components/code/common/view.cljs
index 176e7a4fb3..19538c7b6a 100644
--- a/src/quo2/components/code/common/view.cljs
+++ b/src/quo2/components/code/common/view.cljs
@@ -10,25 +10,26 @@
             [reagent.core :as reagent]))
 
 (defn- render-nodes
-  [nodes preview?]
+  [nodes theme preview?]
   (map (fn [{:keys [children value last-line?] :as node}]
-         (if children
-           (into [text/text
-                  (cond-> {:weight :code
-                           :size   :paragraph-2
-                           :style  (style/text-style (get-in node [:properties :className]) preview?)}
-                    last-line? (assoc :number-of-lines 1))]
-                 (render-nodes children preview?))
-           ;; Remove newlines as we already render each line separately.
-           (string/trim-newline value)))
+         (let [classname (get-in node [:properties :className])]
+           (if children
+             (into [text/text
+                    (cond-> {:weight :code
+                             :size   :paragraph-2
+                             :style  (style/text-style classname preview? theme)}
+                      last-line? (assoc :number-of-lines 1))]
+                   (render-nodes children theme preview?))
+             ;; Remove newlines as we already render each line separately.
+             (string/trim-newline value))))
        nodes))
 
 (defn- line
-  [{:keys [line-number line-number-width preview?]} children]
+  [{:keys [line-number line-number-width preview? theme]} children]
   [rn/view {:style style/line}
    [rn/view {:style (style/line-number line-number-width preview?)}
     [text/text
-     {:style  (style/text-style ["line-number"] preview?)
+     {:style  (style/text-style ["line-number"] preview? theme)
       :weight :code
       :size   :paragraph-2}
      line-number]]
@@ -36,26 +37,27 @@
      preview? (conj [rn/view {:style style/line-content}]))])
 
 (defn- code-block
-  [{:keys [rows line-number-width preview?]}]
+  [{:keys [rows line-number-width preview? theme]}]
   [rn/view
    (->> preview?
-        (render-nodes rows)
+        (render-nodes rows theme)
         (map-indexed (fn [idx row-content]
                        [line
                         {:line-number       (inc idx)
                          :line-number-width line-number-width
-                         :preview?          preview?}
+                         :preview?          preview?
+                         :theme             theme}
                         row-content]))
         (into [:<>]))])
 
 (defn- mask-view
-  [{:keys [apply-mask?]} child]
+  [{:keys [apply-mask? theme]} child]
   (if apply-mask?
     [:<>
      [rn/view {:style style/gradient-container}
       [linear-gradient/linear-gradient
        {:style  style/gradient
-        :colors [:transparent (style/gradient-color)]}
+        :colors [:transparent (style/gradient-color theme)]}
        [rn/view {:style style/gradient}]]]
      child]
     child))
@@ -88,13 +90,17 @@
        [code-block
         {:rows              rows-to-show-coll
          :line-number-width line-number-width
-         :preview?          preview?}]
+         :preview?          preview?
+         :theme             theme}]
        [:<>
-        [rn/view {:style (style/divider line-number-width)}]
-        [mask-view {:apply-mask? truncated?}
+        [rn/view {:style (style/divider line-number-width theme)}]
+        [mask-view
+         {:apply-mask? truncated?
+          :theme       theme}
          [code-block
           {:rows              rows-to-show-coll
-           :line-number-width line-number-width}]]
+           :line-number-width line-number-width
+           :theme             theme}]]
         [rn/view {:style style/copy-button}
          [button/button
           {:icon-only? true
diff --git a/src/quo2/components/dividers/new_messages.cljs b/src/quo2/components/dividers/new_messages.cljs
index e3cd266a13..b4353f2803 100644
--- a/src/quo2/components/dividers/new_messages.cljs
+++ b/src/quo2/components/dividers/new_messages.cljs
@@ -2,13 +2,14 @@
   (:require [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
-            [react-native.linear-gradient :as linear-gradient]))
+            [react-native.linear-gradient :as linear-gradient]
+            [quo2.theme :as quo.theme]))
 
-(defn new-messages
-  "new-messages params - label, color"
-  [{:keys [label color] :or {color :primary}}]
-  (let [bg-color   (colors/custom-color-by-theme color 50 60 5 5)
-        text-color (colors/custom-color-by-theme color 50 60)]
+(defn- view-internal
+  "new-messages params - label, customization-color, theme"
+  [{:keys [label customization-color theme] :or {customization-color :blue}}]
+  (let [bg-color   (colors/resolve-color customization-color theme 5)
+        text-color (colors/resolve-color customization-color theme)]
     [linear-gradient/linear-gradient
      {:colors [bg-color "rgba(0,0,0,0)"]
       :start  {:x 0 :y 0}
@@ -22,3 +23,5 @@
         :weight :medium
         :style  {:color text-color}}
        label]]]))
+
+(def view (quo.theme/with-theme view-internal))
diff --git a/src/quo2/components/list_items/account_list_card/view.cljs b/src/quo2/components/list_items/account_list_card/view.cljs
index 87711aed66..458d1b82fe 100644
--- a/src/quo2/components/list_items/account_list_card/view.cljs
+++ b/src/quo2/components/list_items/account_list_card/view.cljs
@@ -31,7 +31,8 @@
                  ^{:key (str network)}
                  [text/text
                   {:size  :paragraph-2
-                   :style {:color (get colors/networks network)}} (str (subs (name network) 0 3) ":")])
+                   :style {:color (colors/resolve-color network theme)}}
+                  (str (subs (name network) 0 3) ":")])
                networks)
           [text/text
            {:size  :paragraph-2
diff --git a/src/quo2/components/list_items/address/view.cljs b/src/quo2/components/list_items/address/view.cljs
index 032d102fe1..f7e123f6b0 100644
--- a/src/quo2/components/list_items/address/view.cljs
+++ b/src/quo2/components/list_items/address/view.cljs
@@ -24,7 +24,7 @@
             [text/text
              {:size   :paragraph-1
               :weight :semi-bold
-              :style  {:color (get colors/networks network)}} (str (subs (name network) 0 3) ":")])
+              :style  {:color (colors/resolve-color network)}} (str (subs (name network) 0 3) ":")])
           networks)
      [text/text
       {:size   :paragraph-1
diff --git a/src/quo2/components/list_items/channel/style.cljs b/src/quo2/components/list_items/channel/style.cljs
index 70dc3af36e..67d143a32b 100644
--- a/src/quo2/components/list_items/channel/style.cljs
+++ b/src/quo2/components/list_items/channel/style.cljs
@@ -32,10 +32,7 @@
    :align-items        :center
    :overflow           :hidden
    :background-color   (if pressed?
-                         (colors/theme-colors
-                          (colors/custom-color customization-color 50 5)
-                          (colors/custom-color customization-color 60 5)
-                          theme)
+                         (colors/resolve-color customization-color theme 5)
                          :transparent)
    :flex-direction     :row})
 
diff --git a/src/quo2/components/list_items/community/style.cljs b/src/quo2/components/list_items/community/style.cljs
index dcdde68500..d1f118f551 100644
--- a/src/quo2/components/list_items/community/style.cljs
+++ b/src/quo2/components/list_items/community/style.cljs
@@ -51,7 +51,7 @@
                                 colors/white-opa-5
 
                                 (and pressed? (#{:engage :share} type))
-                                (colors/theme-alpha customization-color 0.05 0.05)
+                                (colors/resolve-color customization-color theme 5)
 
                                 (and (not pressed?) (= type :discover) (not blur?))
                                 (colors/theme-colors colors/white colors/neutral-90 theme)
diff --git a/src/quo2/components/list_items/token_value/style.cljs b/src/quo2/components/list_items/token_value/style.cljs
index 8cb83b5e10..c676ecdb71 100644
--- a/src/quo2/components/list_items/token_value/style.cljs
+++ b/src/quo2/components/list_items/token_value/style.cljs
@@ -9,7 +9,7 @@
    :border-radius      12
    :flex-direction     :row
    :justify-content    :space-between
-   :background-color   (colors/custom-color-by-theme color 50 50 bg-opacity bg-opacity theme)})
+   :background-color   (colors/resolve-color color theme bg-opacity)})
 
 (defn metric-text
   [status theme]
@@ -25,17 +25,13 @@
    :border-radius     2
    :margin-horizontal 4
    :background-color  (case status
-                        :positive (colors/theme-colors colors/success-50-opa-40
-                                                       colors/success-60-opa-40
-                                                       theme)
-                        :negative (colors/theme-colors colors/danger-50-opa-40
-                                                       colors/danger-50-opa-40
-                                                       theme)
+                        :positive (colors/resolve-color :success theme 40)
+                        :negative (colors/resolve-color :danger theme 40)
                         (colors/theme-colors colors/neutral-80-opa-40 colors/neutral-50-opa-40 theme))})
 
 (defn arrow-icon
   [status theme]
   {:size  16
    :color (if (= status :positive)
-            (colors/theme-colors colors/success-50 colors/success-60 theme)
-            (colors/theme-colors colors/danger-50 colors/danger-60 theme))})
+            (colors/resolve-color :success theme)
+            (colors/resolve-color :danger theme))})
diff --git a/src/quo2/components/record_audio/record_audio/buttons/lock_button.cljs b/src/quo2/components/record_audio/record_audio/buttons/lock_button.cljs
index c65754cc52..55c3ef1d82 100644
--- a/src/quo2/components/record_audio/record_audio/buttons/lock_button.cljs
+++ b/src/quo2/components/record_audio/record_audio/buttons/lock_button.cljs
@@ -4,11 +4,13 @@
             [quo2.foundations.colors :as colors]
             [react-native.reanimated :as reanimated]
             [react-native.core :refer [use-effect]]
-            [quo2.components.record-audio.record-audio.helpers :as helpers]))
+            [quo2.components.record-audio.record-audio.helpers :as helpers]
+            [quo2.theme :as quo.theme]))
 
 (defn f-lock-button
   [recording? ready-to-lock? locked?]
-  (let [translate-x-y             (reanimated/use-shared-value 20)
+  (let [theme                     (quo.theme/use-theme-value)
+        translate-x-y             (reanimated/use-shared-value 20)
         opacity                   (reanimated/use-shared-value 0)
         connector-opacity         (reanimated/use-shared-value 0)
         width                     (reanimated/use-shared-value 24)
@@ -75,5 +77,5 @@
       {:style          (style/lock-button translate-x-y opacity)
        :pointer-events :none}
       [icons/icon (if @ready-to-lock? :i/locked :i/unlocked)
-       {:color (colors/theme-colors colors/black colors/white)
+       {:color (colors/theme-colors colors/black colors/white theme)
         :size  20}]]]))
diff --git a/src/quo2/components/selectors/selectors/style.cljs b/src/quo2/components/selectors/selectors/style.cljs
index 3f7df20c60..bf8f74d7fd 100644
--- a/src/quo2/components/selectors/selectors/style.cljs
+++ b/src/quo2/components/selectors/selectors/style.cljs
@@ -1,43 +1,46 @@
 (ns quo2.components.selectors.selectors.style
   (:require [quo2.foundations.colors :as colors]))
 
-(defn toggle-background-color
-  [custom-color]
-  {:normal {:checked   (colors/custom-color-by-theme custom-color 50 60)
-            :unchecked (colors/theme-colors colors/neutral-30 colors/neutral-80)}
-   :blur   {:checked   (colors/theme-colors (colors/custom-color custom-color 50) colors/white-opa-70)
-            :unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-10)}})
-
-(defn radio-border-color
-  [customization-color]
-  {:normal {:checked   (colors/custom-color-by-theme customization-color 50 60)
-            :unchecked (colors/theme-colors colors/neutral-30 colors/neutral-70)}
+(defn- toggle-background-color
+  [customization-color theme]
+  {:normal {:checked   (colors/resolve-color customization-color theme)
+            :unchecked (colors/theme-colors colors/neutral-30 colors/neutral-80 theme)}
    :blur   {:checked   (colors/theme-colors (colors/custom-color customization-color 50)
-                                            colors/white)
-            :unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40)}})
+                                            colors/white-opa-70
+                                            theme)
+            :unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-10 theme)}})
 
-(defn radio-background-unchecked-color
-  []
-  {:normal (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)
+(defn- radio-border-color
+  [customization-color theme]
+  {:normal {:checked   (colors/resolve-color customization-color theme)
+            :unchecked (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)}
+   :blur   {:checked   (colors/theme-colors (colors/custom-color customization-color 50)
+                                            colors/white
+                                            theme)
+            :unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)}})
+
+(defn- radio-background-unchecked-color
+  [theme]
+  {:normal (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40 theme)
    :blur   colors/white-opa-5})
 
-(defn checkbox-background-color
-  [customization-color]
-  {:normal {:checked   (colors/custom-color-by-theme customization-color 50 60)
-            :unchecked (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)}
+(defn- checkbox-background-color
+  [customization-color theme]
+  {:normal {:checked   (colors/resolve-color customization-color theme)
+            :unchecked (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40 theme)}
    :blur   {:checked   (colors/theme-colors (colors/custom-color customization-color 50)
                                             colors/white)
             :unchecked colors/white-opa-5}})
 
-(defn checkbox-border-unchecked-color
-  []
-  {:normal (colors/theme-colors colors/neutral-30 colors/neutral-70)
-   :blur   (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40)})
+(defn- checkbox-border-unchecked-color
+  [theme]
+  {:normal (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)
+   :blur   (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)})
 
-(defn checkbox-prefill-background-color
-  []
-  {:normal (colors/theme-colors colors/neutral-30 colors/neutral-80)
-   :blur   (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10)})
+(defn- checkbox-prefill-background-color
+  [theme]
+  {:normal (colors/theme-colors colors/neutral-30 colors/neutral-80 theme)
+   :blur   (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)})
 
 (defn- get-color
   [color-map & [blur? checked?]]
@@ -47,13 +50,15 @@
       (get color-map blur-type))))
 
 (defn toggle
-  [{:keys [checked? disabled? blur? container-style customization-color]}]
+  [{:keys [checked? disabled? blur? container-style customization-color theme]}]
   (assoc container-style
          :height           20
          :width            30
          :border-radius    20
          :opacity          (if disabled? 0.3 1)
-         :background-color (get-color (toggle-background-color customization-color) blur? checked?)))
+         :background-color (get-color (toggle-background-color customization-color theme)
+                                      blur?
+                                      checked?)))
 
 (defn toggle-inner
   [{:keys [checked?]}]
@@ -67,7 +72,7 @@
    :margin-bottom    :auto})
 
 (defn radio
-  [{:keys [checked? disabled? blur? container-style customization-color]}]
+  [{:keys [checked? disabled? blur? container-style customization-color theme]}]
   (assoc container-style
          :height           20
          :width            20
@@ -75,29 +80,31 @@
          :border-width     1.2
          :opacity          (if disabled? 0.3 1)
          :background-color (when-not checked?
-                             (get-color (radio-background-unchecked-color) blur?))
-         :border-color     (get-color (radio-border-color customization-color) blur? checked?)))
+                             (get-color (radio-background-unchecked-color theme) blur?))
+         :border-color     (get-color (radio-border-color customization-color theme) blur? checked?)))
 
 (defn radio-inner
-  [{:keys [checked? blur? customization-color]}]
+  [{:keys [checked? blur? customization-color theme]}]
   {:height           14
    :width            14
    :margin           1.8
    :border-radius    7
    :background-color (when checked?
-                       (get-color (radio-border-color customization-color) blur? checked?))})
+                       (get-color (radio-border-color customization-color theme) blur? checked?))})
 
 (defn checkbox
-  [{:keys [checked? disabled? blur? container-style customization-color]}]
+  [{:keys [checked? disabled? blur? container-style customization-color theme]}]
   (assoc container-style
          :height           20
          :width            20
          :border-radius    6
          :opacity          (if disabled? 0.3 1)
          :border-width     (if checked? 0 1.2)
-         :background-color (get-color (checkbox-background-color customization-color) blur? checked?)
+         :background-color (get-color (checkbox-background-color customization-color theme)
+                                      blur?
+                                      checked?)
          :border-color     (when-not checked?
-                             (get-color (checkbox-border-unchecked-color) blur?))))
+                             (get-color (checkbox-border-unchecked-color theme) blur?))))
 
 (defn common-checkbox-inner
   [{:keys [checked?]}]
@@ -105,23 +112,23 @@
     {:height size :width size}))
 
 (defn checkbox-check
-  [_checked? blur?]
+  [_checked? blur? theme]
   {:size  20
    :color (if blur?
-            (colors/theme-colors colors/white colors/neutral-100)
+            (colors/theme-colors colors/white colors/neutral-100 theme)
             colors/white)})
 
 (defn checkbox-prefill
-  [{:keys [disabled? blur? container-style]}]
+  [{:keys [disabled? blur? container-style theme]}]
   (assoc container-style
          :height           21
          :width            21
          :border-radius    6
          :opacity          (if disabled? 0.3 1)
-         :background-color (get-color (checkbox-prefill-background-color) blur?)))
+         :background-color (get-color (checkbox-prefill-background-color theme) blur?)))
 
 (defn checkbox-prefill-check
-  [checked? _blur?]
+  [checked? _blur? theme]
   {:size  20
-   :color (when checked? (colors/theme-colors colors/neutral-100 colors/white))})
+   :color (when checked? (colors/theme-colors colors/neutral-100 colors/white theme))})
 
diff --git a/src/quo2/components/selectors/selectors/view.cljs b/src/quo2/components/selectors/selectors/view.cljs
index f116d49c00..9cd359708a 100644
--- a/src/quo2/components/selectors/selectors/view.cljs
+++ b/src/quo2/components/selectors/selectors/view.cljs
@@ -2,20 +2,21 @@
   (:require [quo2.components.icon :as icons]
             [quo2.components.selectors.selectors.style :as style]
             [react-native.core :as rn]
-            [reagent.core :as reagent]))
+            [reagent.core :as reagent]
+            [quo2.theme :as quo.theme]))
 
 (defn- handle-press
   [on-change checked-atom checked?]
   (when checked-atom (swap! checked-atom not))
   (when on-change (on-change (not checked?))))
 
-(defn- selector
+(defn- selector-internal
   [{:keys [default-checked? checked?]}]
   (let [controlled-component? (some? checked?)
         internal-checked?     (when-not controlled-component?
                                 (reagent/atom (or default-checked? false)))]
     (fn [{:keys [checked? disabled? blur? customization-color on-change container-style
-                 label-prefix outer-style-fn inner-style-fn icon-style-fn]
+                 label-prefix outer-style-fn inner-style-fn icon-style-fn theme]
           :or   {customization-color :blue}}]
       (let [actual-checked?     (if controlled-component? checked? @internal-checked?)
             accessibility-label (str label-prefix "-" (if actual-checked? "on" "off"))
@@ -24,7 +25,8 @@
                                                  :disabled?           disabled?
                                                  :blur?               blur?
                                                  :container-style     container-style
-                                                 :customization-color customization-color})]
+                                                 :customization-color customization-color
+                                                 :theme               theme})]
         [rn/touchable-without-feedback
          (when-not disabled?
            {:on-press #(handle-press on-change internal-checked? actual-checked?)})
@@ -35,11 +37,14 @@
            :accessibility-role                :checkbox
            :testID                            test-id}
           [rn/view
-           {:style (inner-style-fn {:checked?            actual-checked?
+           {:style (inner-style-fn {:theme               theme
+                                    :checked?            actual-checked?
                                     :blur?               blur?
                                     :customization-color customization-color})}
            (when (and icon-style-fn actual-checked?)
-             [icons/icon :i/check-small (icon-style-fn actual-checked? blur?)])]]]))))
+             [icons/icon :i/check-small (icon-style-fn actual-checked? blur? theme)])]]]))))
+
+(def ^:private selector (quo.theme/with-theme selector-internal))
 
 (defn toggle
   [props]
@@ -74,3 +79,4 @@
           :outer-style-fn style/checkbox-prefill
           :inner-style-fn style/common-checkbox-inner
           :icon-style-fn  style/checkbox-prefill-check)])
+
diff --git a/src/quo2/components/settings/accounts/style.cljs b/src/quo2/components/settings/accounts/style.cljs
index e0de4d6dc0..9be57aa8c1 100644
--- a/src/quo2/components/settings/accounts/style.cljs
+++ b/src/quo2/components/settings/accounts/style.cljs
@@ -9,19 +9,17 @@
    :width         160})
 
 (defn background-top
-  [custom-color]
+  [custom-color theme]
   {:position                :absolute
    :top                     0
    :border-top-left-radius  16
    :border-top-right-radius 16
    :width                   160
    :height                  64
-   :background-color        (-> colors/customization
-                                (get-in [custom-color 50])
-                                (colors/alpha 0.2))})
+   :background-color        (colors/resolve-color custom-color theme 20)})
 
 (defn background-bottom
-  []
+  [theme]
   {:position         :absolute
    :top              40
    :border-radius    16
@@ -29,10 +27,11 @@
    :height           120
    :background-color (colors/theme-colors
                       colors/white
-                      colors/neutral-90)})
+                      colors/neutral-90
+                      theme)})
 
 (defn avatar-border
-  []
+  [theme]
   {:margin          2
    :justify-content :center
    :align-items     :center
@@ -42,23 +41,27 @@
    :border-width    2
    :border-color    (colors/theme-colors
                      colors/white
-                     colors/neutral-90)})
+                     colors/neutral-90
+                     theme)})
 
 (def menu-button-container
   {:justify-content :center
    :align-items     :center
    :align-self      :flex-start})
+
 (defn menu-button-color
-  []
+  [theme]
   {:background-color (colors/theme-colors
                       colors/white-opa-40
-                      colors/neutral-80-opa-40)})
+                      colors/neutral-80-opa-40
+                      theme)})
 
 (defn address-text
-  []
+  [theme]
   {:color (colors/theme-colors
            colors/neutral-50
-           colors/neutral-40)})
+           colors/neutral-40
+           theme)})
 
 (def card-top
   {:flex-direction  :row
diff --git a/src/quo2/components/settings/accounts/view.cljs b/src/quo2/components/settings/accounts/view.cljs
index 8d505083f5..8b18488e92 100644
--- a/src/quo2/components/settings/accounts/view.cljs
+++ b/src/quo2/components/settings/accounts/view.cljs
@@ -3,44 +3,55 @@
             [quo2.components.buttons.button.view :as button]
             [quo2.components.markdown.text :as text]
             [quo2.components.settings.accounts.style :as style]
-            [react-native.core :as rn]))
+            [react-native.core :as rn]
+            [quo2.theme :as quo.theme]))
 
 (defn card-background
-  [{:keys [customization-color]}]
+  [{:keys [customization-color theme]}]
   [:<>
-   [rn/view {:style (style/background-top customization-color)}]
-   [rn/view {:style (style/background-bottom)}]])
+   [rn/view {:style (style/background-top customization-color theme)}]
+   [rn/view {:style (style/background-bottom theme)}]])
 
 (defn avatar
-  [avatar-props]
-  [rn/view {:style (style/avatar-border)}
+  [avatar-props theme]
+  [rn/view {:style (style/avatar-border theme)}
    [account-avatar/view (assoc avatar-props :size 48)]])
 
 (defn menu-button
-  [{:keys [on-press]}]
+  [{:keys [on-press theme]}]
   [rn/view {:style style/menu-button-container}
    [button/button
-    {:container-style (style/menu-button-color)
+    {:container-style (style/menu-button-color theme)
      :type            :grey
      :icon-only?      true
      :size            24
      :on-press        on-press}
     :i/more]])
 
-(defn account
-  [{:keys [account-name account-address avatar-icon customization-color on-press-menu]}]
+(defn- account-internal
+  [{:keys [account-name account-address avatar-icon
+           customization-color on-press-menu theme]}]
   [rn/view {:style style/card}
-   [card-background {:customization-color customization-color}]
+   [card-background
+    {:customization-color customization-color
+     :theme               theme}]
    [rn/view {:style style/card-top}
     [avatar
      {:color customization-color
-      :icon  avatar-icon}]
-    [menu-button {:on-press on-press-menu}]]
+      :icon  avatar-icon}
+     theme]
+    [menu-button
+     {:on-press on-press-menu
+      :theme    theme}]]
    [rn/view {:style style/card-bottom}
-    [text/text {:size :paragraph-1 :weight :semi-bold}
+    [text/text
+     {:size   :paragraph-1
+      :weight :semi-bold}
      account-name]
     [text/text
-     {:style  (style/address-text)
+     {:style  (style/address-text theme)
       :size   :paragraph-2
       :weight :medium}
      account-address]]])
+
+(def account (quo.theme/with-theme account-internal))
diff --git a/src/quo2/components/wallet/keypair/view.cljs b/src/quo2/components/wallet/keypair/view.cljs
index dcc27af942..f6c3b3a090 100644
--- a/src/quo2/components/wallet/keypair/view.cljs
+++ b/src/quo2/components/wallet/keypair/view.cljs
@@ -78,7 +78,7 @@
          {:size  16
           :color (if blur?
                    colors/white-opa-40
-                   (colors/theme-colors colors/neutral-50 colors/neutral-40))}]])]))
+                   (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]])]))
 
 (defn- view-internal
   []
diff --git a/src/quo2/components/wallet/network_bridge/style.cljs b/src/quo2/components/wallet/network_bridge/style.cljs
index 8eebeaa3ea..136017124f 100644
--- a/src/quo2/components/wallet/network_bridge/style.cljs
+++ b/src/quo2/components/wallet/network_bridge/style.cljs
@@ -2,14 +2,14 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (defn container
-  [network state]
+  [network state theme]
   {:width              136
    :height             44
    :border-width       1
    :border-radius      12
    :padding-vertical   5
    :padding-horizontal 8
-   :border-color       (get colors/networks network)
+   :border-color       (colors/resolve-color network theme)
    :opacity            (when (= state :disabled) 0.3)})
 
 (defn add-container
diff --git a/src/quo2/components/wallet/network_bridge/view.cljs b/src/quo2/components/wallet/network_bridge/view.cljs
index a1412c62a5..fbde233968 100644
--- a/src/quo2/components/wallet/network_bridge/view.cljs
+++ b/src/quo2/components/wallet/network_bridge/view.cljs
@@ -12,7 +12,7 @@
 
 (defn network-bridge-add
   [{:keys [network state theme]}]
-  [rn/view {:style (merge (style/container network state) (style/add-container theme))}
+  [rn/view {:style (merge (style/container network state theme) (style/add-container theme))}
    [icon/icon :i/add-circle {:size 12 :no-color true}]])
 
 (defn view-internal
@@ -21,7 +21,7 @@
     (if (= status :add)
       [network-bridge-add args]
       [rn/view
-       {:style               (style/container network status)
+       {:style               (style/container network status theme)
         :accessible          true
         :accessibility-label :container}
        (if (= status :loading)
diff --git a/src/quo2/components/wallet/network_link/view.cljs b/src/quo2/components/wallet/network_link/view.cljs
index 1da4858b18..a082d806e5 100644
--- a/src/quo2/components/wallet/network_link/view.cljs
+++ b/src/quo2/components/wallet/network_link/view.cljs
@@ -7,19 +7,19 @@
 (defn link-linear
   [{:keys [source theme]}]
   [svg/svg {:xmlns "http://www.w3.org/2000/svg" :width "73" :height "10" :fill :none}
-   [svg/path {:stroke (get colors/networks source) :d "M68 5H5"}]
+   [svg/path {:stroke (colors/resolve-color source theme) :d "M68 5H5"}]
    [svg/circle
     {:cx     "68"
      :cy     "5"
      :r      "4"
      :fill   (colors/theme-colors colors/white colors/neutral-90 theme)
-     :stroke (get colors/networks source)}]
+     :stroke (colors/resolve-color source theme)}]
    [svg/circle
     {:cx     "5"
      :cy     "5"
      :r      "4"
      :fill   (colors/theme-colors colors/white colors/neutral-90 theme)
-     :stroke (get colors/networks source)}]])
+     :stroke (colors/resolve-color source theme)}]])
 
 (defn link-1x
   [{:keys [source destination theme]}]
@@ -31,18 +31,18 @@
      :cy     "5"
      :r      "4"
      :fill   (colors/theme-colors colors/white colors/neutral-90 theme)
-     :stroke (get colors/networks destination)}]
+     :stroke (colors/resolve-color destination theme)}]
    [svg/circle
     {:cx     "5"
      :cy     "61"
      :r      "4"
      :fill   (colors/theme-colors colors/white colors/neutral-90 theme)
-     :stroke (get colors/networks source)}]
+     :stroke (colors/resolve-color source theme)}]
    [svg/defs
     [svg/linear-gradient
      {:id "gradient" :x1 "72.271" :x2 "82.385" :y1 "5" :y2 "34.155" :gradientUnits "userSpaceOnUse"}
-     [svg/stop {:stopColor (get colors/networks destination)}]
-     [svg/stop {:offset "1" :stopColor (get colors/networks source)}]]]])
+     [svg/stop {:stopColor (colors/resolve-color destination theme)}]
+     [svg/stop {:offset "1" :stopColor (colors/resolve-color source theme)}]]]])
 
 (defn link-2x
   [{:keys [source destination theme]}]
@@ -57,13 +57,13 @@
      :cy     "5"
      :r      "4"
      :fill   (colors/theme-colors colors/white colors/neutral-90 theme)
-     :stroke (get colors/networks destination)}]
+     :stroke (colors/resolve-color destination theme)}]
    [svg/circle
     {:cx     "5"
      :cy     "117"
      :r      "4"
      :fill   (colors/theme-colors colors/white colors/neutral-90 theme)
-     :stroke (get colors/networks source)}]
+     :stroke (colors/resolve-color source theme)}]
    [svg/defs
     [svg/linear-gradient
      {:id            "gradient"
@@ -72,8 +72,8 @@
       :x2            "102.867"
       :y2            "49.0993"
       :gradientUnits "userSpaceOnUse"}
-     [svg/stop {:stop-color (get colors/networks destination)}]
-     [svg/stop {:offset "1" :stop-color (get colors/networks source)}]]]])
+     [svg/stop {:stop-color (colors/resolve-color destination theme)}]
+     [svg/stop {:offset "1" :stop-color (colors/resolve-color source theme)}]]]])
 
 (defn- view-internal
   [{:keys [shape] :as props}]
diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs
index 62b785c799..ddd6bb89fb 100644
--- a/src/quo2/core.cljs
+++ b/src/quo2/core.cljs
@@ -210,7 +210,7 @@
 ;;;; Dividers
 (def divider-label quo2.components.dividers.divider-label.view/view)
 (def divider-line quo2.components.dividers.divider-line.view/view)
-(def new-messages quo2.components.dividers.new-messages/new-messages)
+(def new-messages quo2.components.dividers.new-messages/view)
 (def divider-date quo2.components.dividers.date/date)
 (def strength-divider quo2.components.dividers.strength-divider.view/view)
 
diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs
index f8dbaf1133..e33ac1a4de 100644
--- a/src/quo2/foundations/colors.cljs
+++ b/src/quo2/foundations/colors.cljs
@@ -223,8 +223,7 @@
                60 "#BD1E56"}})
 
 ;;;; Networks
-
-(def networks
+(def ^:private networks
   {:ethereum "#758EEB"
    :optimism "#E76E6E"
    :arbitrum "#6BD5F0"
@@ -234,8 +233,8 @@
    :polygon  "#AD71F3"
    :unknown  "#EEF2F5"})
 
-(def colors-map
-  (merge {:primary {50 primary-50 ;; User can also use primary color as customisation color
+(def ^:private colors-map
+  (merge {:primary {50 primary-50
                     60 primary-60}
           :beige   {50 "#CAAE93"
                     60 "#AA927C"}
@@ -245,8 +244,6 @@
                     60 "#805141"}
           :red     {50 "#F46666"
                     60 "#CD5656"}
-          :magenta {50 "#EC266C"
-                    60 "#BD1E56"}
           :indigo  {50 "#496289"
                     60 "#3D5273"}
           :danger  {50 danger-50
@@ -260,7 +257,34 @@
   [s]
   (and (string? s) (string/starts-with? s "#")))
 
-(def custom-color
+(defn- get-from-colors-map
+  [color suffix]
+  (let [color-without-suffix (get colors-map color)
+        resolved-color?      (hex-string? color-without-suffix)]
+    (if resolved-color?
+      color-without-suffix
+      (get-in colors-map [color suffix]))))
+
+(defn- resolve-color*
+  "(resolve-color color theme opacity)
+   color   hex string or keyword (resolves from custom, network and semantic colors)
+   theme  :light/:dark
+   opacity 0-100 (optional) - if set theme is ignored and goes to 50 suffix internally"
+  ([color theme]
+   (resolve-color* color theme nil))
+  ([color theme opacity]
+   (let [suffix (cond
+                  (not (keyword? color))        nil
+                  (or opacity (= theme :light)) 50
+                  :else                         60)]
+     (cond-> color
+       suffix  (get-from-colors-map suffix)
+       opacity (alpha (/ opacity 100))))))
+
+(def resolve-color (memoize resolve-color*))
+
+(def ^{:deprecated true :superseded-by "resolve-color"}
+     custom-color
   "(custom-color color suffix opacity)
    color   :primary/:purple/...
    suffix  50/60
@@ -281,25 +305,6 @@
           (alpha resolved-color (/ opacity 100))
           resolved-color))))))
 
-(defn custom-color-by-theme
-
-  "(custom-color-by-theme color suffix-light suffix-dark opacity-light opacity-dark)
-   color         :primary/:purple/...
-   suffix-light  50/60
-   suffix-dark   50/60
-   opacity-light 0-100 (optional)
-   opacity-dark  0-100 (optional)
-   theme         :light/:dark (optional)"
-  {:deprecated true :superseded-by "theme/colors"}
-  ([color suffix-light suffix-dark]
-   (custom-color-by-theme color suffix-light suffix-dark nil nil (theme/get-theme)))
-  ([color suffix-light suffix-dark opacity-light opacity-dark]
-   (custom-color-by-theme color suffix-light suffix-dark opacity-light opacity-dark (theme/get-theme)))
-  ([color suffix-light suffix-dark opacity-light opacity-dark theme]
-   (if (= theme :dark)
-     (custom-color color suffix-dark opacity-dark)
-     (custom-color color suffix-light opacity-light))))
-
 (def shadow "rgba(9,16,28,0.08)")
 
 ;;General
diff --git a/src/quo2/foundations/colors_test.cljs b/src/quo2/foundations/colors_test.cljs
index 1b7826fd8c..9d3ff57327 100644
--- a/src/quo2/foundations/colors_test.cljs
+++ b/src/quo2/foundations/colors_test.cljs
@@ -2,26 +2,29 @@
   (:require [cljs.test :refer-macros [deftest testing is]]
             [quo2.foundations.colors :as colors]))
 
-(deftest custom-color-resolver-test
-  (testing "community color - resolves a hex string and ignores suffix of 50"
-    (is (= "#fff" (colors/custom-color "#fff" 50))))
-  (testing "community color - resolves a hex string and ignores suffix of 60"
-    (is (= "#fff" (colors/custom-color "#fff" 60))))
-  (testing "user/wallet/chat colors - resolves a keyword from the customization map with suffix 50"
-    (is (= (get-in colors/customization [:blue 50]) (colors/custom-color :blue 50))))
-  (testing "user/wallet/chat colors - resolves a keyword from the colors map with suffix 60"
-    (is (= (get-in colors/customization [:blue 60]) (colors/custom-color :blue 60))))
-  (testing "network colors - resolves a keyword with from the networks map which has no suffix"
-    (is (= (:ethereum colors/networks) (colors/custom-color :ethereum nil)))))
+(deftest resolve-color-test
+  (testing "community color - resolves a hex string and ignores theme"
+    (is (= "#fff" (colors/resolve-color "#fff" :light))))
+  (testing "community color - resolves a hex string and ignores theme"
+    (is (= "#fff" (colors/resolve-color "#fff" :dark))))
+  (testing "user/wallet/chat colors - resolves a keyword from the customization map with light theme"
+    (is (= "#2A4AF5" (colors/resolve-color :blue :light))))
+  (testing "user/wallet/chat colors - resolves a keyword from the colors map with dark theme"
+    (is (= "#223BC4" (colors/resolve-color :blue :dark))))
+  (testing "network colors - resolves a keyword with from the networks map"
+    (is (= "#758EEB" (colors/resolve-color :ethereum :light)))))
 
-(deftest custom-color-resolver-with-opacity-test
-  (testing "community color with 10% opacity- resolves a hex string and ignores suffix of 50"
-    (is (= "rgba(255,15,NaN,0.1)" (colors/custom-color "#fff" 50 10))))
-  (testing "community color with 10% opacity- resolves a hex string and ignores suffix of 50"
-    (is (= "rgba(255,15,NaN,0.9)" (colors/custom-color "#fff" 50 90))))
+(deftest resolve-color-with-opacity-test
+  (testing "community color with 10% opacity- resolves a hex string and ignores theme"
+    (is (= "rgba(255,15,NaN,0.1)" (colors/resolve-color "#fff" :light 10))))
+  (testing "community color with 10% opacity- resolves a hex string and ignores theme"
+    (is (= "rgba(255,15,NaN,0.9)" (colors/resolve-color "#fff" :light 90))))
   (testing
-    "user/wallet/chat colors with 10% opacity - resolves a keyword from the colors map with suffix 50"
-    (is (= "rgba(42,74,245,0.1)" (colors/custom-color :blue 50 10))))
+    "user/wallet/chat colors with 10% opacity - resolves a keyword from the colors map with light theme"
+    (is (= "rgba(42,74,245,0.1)" (colors/resolve-color :blue :light 10))))
   (testing
-    "network colors with 10% opacity - resolves a keyword with from the networks map which has no suffix"
-    (is (= "rgba(117,142,235,0.1)" (colors/custom-color :ethereum nil 10)))))
+    "user/wallet/chat colors with 10% opacity - resolves a keyword from the colors map with dark theme"
+    (is (= "rgba(42,74,245,0.1)" (colors/resolve-color :blue :dark 10))))
+  (testing
+    "when using opacity theme is ignored and uses the light suffix resolver"
+    (is (colors/resolve-color :blue :light 10) (colors/resolve-color :blue :dark 10))))
diff --git a/src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs
index 8002f98b0e..58fec423c8 100644
--- a/src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs
+++ b/src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs
@@ -1,6 +1,5 @@
 (ns status-im2.contexts.quo-preview.avatars.channel-avatar
   (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
@@ -29,14 +28,13 @@
                              :full-name           "Some channel"
                              :customization-color :blue})]
     (fn []
-      (let [customization-color (colors/custom-color-by-theme (:customization-color @state) 50 60)
-            locked?             (case (:locked-state @state)
-                                  :not-set  nil
-                                  :unlocked false
-                                  :locked   true
-                                  nil)]
+      (let [locked? (case (:locked-state @state)
+                      :not-set  nil
+                      :unlocked false
+                      :locked   true
+                      nil)]
         [preview/preview-container {:state state :descriptor descriptor}
          [quo/channel-avatar
           (assoc @state
-                 :locked?             locked?
-                 :customization-color customization-color)]]))))
+                 :locked?
+                 locked?)]]))))
diff --git a/src/status_im2/contexts/quo_preview/common.cljs b/src/status_im2/contexts/quo_preview/common.cljs
index 768a9fe1c1..74fcb1e04d 100644
--- a/src/status_im2/contexts/quo_preview/common.cljs
+++ b/src/status_im2/contexts/quo_preview/common.cljs
@@ -1,25 +1,27 @@
 (ns status-im2.contexts.quo-preview.common
   (:require
     [quo2.core :as quo]
-    [quo2.theme :as theme]
+    [quo2.theme :as quo.theme]
     [utils.re-frame :as rf]))
 
 
-(defn navigation-bar
-  []
+(defn- view-internal
+  [{:keys [theme]}]
   (let [logged-in?    (rf/sub [:multiaccount/logged-in?])
         has-profiles? (boolean (rf/sub [:profile/profiles-overview]))
         root          (if has-profiles? :profiles :intro)
-        light?        (= (theme/get-theme) :light)]
+        light?        (= theme :light)]
     [quo/page-nav
      {:type       :title
       :title      "Quo2 components preview"
       :text-align :left
       :icon-name  :i/close
       :right-side [{:icon-name (if light? :i/dark :i/light)
-                    :on-press  #(if light? (theme/set-theme :dark) (theme/set-theme :light))}]
+                    :on-press  #(if light? (quo.theme/set-theme :dark) (quo.theme/set-theme :light))}]
       :on-press   #(if (or logged-in? (not= (rf/sub [:view-id]) :quo2-preview))
                      (rf/dispatch [:navigate-back])
                      (do
-                       (theme/set-theme :dark)
+                       (quo.theme/set-theme :dark)
                        (rf/dispatch [:init-root root])))}]))
+
+(def navigation-bar (quo.theme/with-theme view-internal))
diff --git a/src/status_im2/contexts/quo_preview/dividers/new_messages.cljs b/src/status_im2/contexts/quo_preview/dividers/new_messages.cljs
index 2eed1052f3..3bb3dabf94 100644
--- a/src/status_im2/contexts/quo_preview/dividers/new_messages.cljs
+++ b/src/status_im2/contexts/quo_preview/dividers/new_messages.cljs
@@ -6,20 +6,7 @@
 (def descriptor
   [{:key  :label
     :type :text}
-   {:key     :color
-    :type    :select
-    :options [{:key :primary}
-              {:key :purple}
-              {:key :indigo}
-              {:key :turquoise}
-              {:key :blue}
-              {:key :green}
-              {:key :yellow}
-              {:key :orange}
-              {:key :red}
-              {:key :pink}
-              {:key :brown}
-              {:key :beige}]}])
+   (preview/customization-color-option)])
 
 (defn view
   []
diff --git a/src/status_im2/contexts/quo_preview/list_items/channel.cljs b/src/status_im2/contexts/quo_preview/list_items/channel.cljs
index 8d15062d3d..97f5334ee3 100644
--- a/src/status_im2/contexts/quo_preview/list_items/channel.cljs
+++ b/src/status_im2/contexts/quo_preview/list_items/channel.cljs
@@ -1,8 +1,7 @@
 (ns status-im2.contexts.quo-preview.list-items.channel
   (:require [quo2.core :as quo]
             [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]
-            [quo2.foundations.colors :as colors]))
+            [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
   [{:key  :name
@@ -40,8 +39,7 @@
                              :customization-color :blue
                              :locked?             nil})]
     (fn []
-      (let [customization-color (colors/custom-color-by-theme (:customization-color @state) 50 60)]
-        [preview/preview-container
-         {:state      state
-          :descriptor descriptor}
-         [quo/channel (assoc @state :customization-color customization-color)]]))))
+      [preview/preview-container
+       {:state      state
+        :descriptor descriptor}
+       [quo/channel @state]])))
diff --git a/src/status_im2/contexts/quo_preview/list_items/community_list.cljs b/src/status_im2/contexts/quo_preview/list_items/community_list.cljs
index f103bd679d..f9a093fa0d 100644
--- a/src/status_im2/contexts/quo_preview/list_items/community_list.cljs
+++ b/src/status_im2/contexts/quo_preview/list_items/community_list.cljs
@@ -1,6 +1,5 @@
 (ns status-im2.contexts.quo-preview.list-items.community-list
   (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
             [quo2.theme :as quo.theme]
             [reagent.core :as reagent]
             [status-im2.common.resources :as resources]
@@ -94,17 +93,15 @@
                              :active-count        112100
                              :unread-count        5})]
     (fn []
-      (let [customization-color (colors/custom-color-by-theme (:customization-color @state) 50 60)]
-        [preview/preview-container {:state state :descriptor (descriptors @state)}
-         [quo/community-list-item
-          (merge @state
-                 {:container-style     {:width 335}
-                  :logo                (resources/get-mock-image :status-logo)
-                  :tokens              (:tokens data/community)
-                  :customization-color customization-color
-                  :on-press            #(js/alert "List item pressed")
-                  :on-long-press       #(js/alert "Long pressed item")
-                  :on-press-info       #(js/alert "Info pressed")
-                  :members             (when (:members? @state)
-                                         {:members-count (:members-count @state)
-                                          :active-count  (:active-count @state)})})]]))))
+      [preview/preview-container {:state state :descriptor (descriptors @state)}
+       [quo/community-list-item
+        (merge @state
+               {:container-style {:width 335}
+                :logo            (resources/get-mock-image :status-logo)
+                :tokens          (:tokens data/community)
+                :on-press        #(js/alert "List item pressed")
+                :on-long-press   #(js/alert "Long pressed item")
+                :on-press-info   #(js/alert "Info pressed")
+                :members         (when (:members? @state)
+                                   {:members-count (:members-count @state)
+                                    :active-count  (:active-count @state)})})]])))
diff --git a/src/status_im2/contexts/quo_preview/preview.cljs b/src/status_im2/contexts/quo_preview/preview.cljs
index 39562e2ab1..b7176553cb 100644
--- a/src/status_im2/contexts/quo_preview/preview.cljs
+++ b/src/status_im2/contexts/quo_preview/preview.cljs
@@ -282,7 +282,7 @@
           opts)))
 
 (defn blur-view
-  [{:keys [show-blur-background? image height blur-view-props style]} & children]
+  [{:keys [show-blur-background? image height blur-view-props style theme]} & children]
   [rn/view
    {:style {:flex             1
             :padding-vertical 16}}
@@ -301,7 +301,7 @@
                                :left     0
                                :right    0}
                :blur-amount   10
-               :overlay-color (colors/theme-colors colors/white-opa-70 colors/neutral-80-opa-80)}
+               :overlay-color (colors/theme-colors colors/white-opa-70 colors/neutral-80-opa-80 theme)}
               blur-view-props)]])
    (into [rn/view
           {:style (merge {:position           :absolute
@@ -316,39 +316,41 @@
            blur-container-style blur-view-props blur-height show-blur-background?]
     :or   {blur-height 200}}
    & children]
-  (rn/use-effect (fn []
-                   (when blur-dark-only?
-                     (if blur?
-                       (quo.theme/set-theme :dark)
-                       (quo.theme/set-theme :light))))
-                 [blur? blur-dark-only?])
-  [rn/view
-   {:style {:top  (safe-area/get-top)
-            :flex 1}}
-   [common/navigation-bar]
-   [rn/scroll-view
-    {:style                           (style/panel-basic)
-     :shows-vertical-scroll-indicator false}
-    [rn/pressable {:on-press rn/dismiss-keyboard!}
-     (when descriptor
-       [rn/view {:style style/customizer-container}
-        [customizer state descriptor]])
-     (if blur?
-       [rn/view {:style (merge style/component-container component-container-style)}
-        (into [blur-view
-               {:show-blur-background? show-blur-background?
-                :height                blur-height
-                :style                 (merge {:width     "100%"
-                                               :flex-grow 1}
-                                              (when-not show-blur-background?
-                                                {:padding-horizontal 0
-                                                 :top                0})
-                                              blur-container-style)
-                :blur-view-props       (merge {:blur-type (quo.theme/get-theme)}
-                                              blur-view-props)}]
-              children)]
-       (into [rn/view {:style (merge style/component-container component-container-style)}]
-             children))]]])
+  (let [theme (quo2.theme/use-theme-value)]
+    (rn/use-effect (fn []
+                     (when blur-dark-only?
+                       (if blur?
+                         (quo.theme/set-theme :dark)
+                         (quo.theme/set-theme :light))))
+                   [blur? blur-dark-only?])
+    [rn/view
+     {:style {:top  (safe-area/get-top)
+              :flex 1}}
+     [common/navigation-bar]
+     [rn/scroll-view
+      {:style                           (style/panel-basic)
+       :shows-vertical-scroll-indicator false}
+      [rn/pressable {:on-press rn/dismiss-keyboard!}
+       (when descriptor
+         [rn/view {:style style/customizer-container}
+          [customizer state descriptor]])
+       (if blur?
+         [rn/view {:style (merge style/component-container component-container-style)}
+          (into [blur-view
+                 {:theme                 theme
+                  :show-blur-background? show-blur-background?
+                  :height                blur-height
+                  :style                 (merge {:width     "100%"
+                                                 :flex-grow 1}
+                                                (when-not show-blur-background?
+                                                  {:padding-horizontal 0
+                                                   :top                0})
+                                                blur-container-style)
+                  :blur-view-props       (merge {:blur-type theme}
+                                                blur-view-props)}]
+                children)]
+         (into [rn/view {:style (merge style/component-container component-container-style)}]
+               children))]]]))
 
 (defn preview-container
   [& args]
diff --git a/src/status_im2/contexts/wallet/common/temp.cljs b/src/status_im2/contexts/wallet/common/temp.cljs
index 308d80b9fe..2d66d99cce 100644
--- a/src/status_im2/contexts/wallet/common/temp.cljs
+++ b/src/status_im2/contexts/wallet/common/temp.cljs
@@ -4,7 +4,6 @@
     [quo2.core :as quo]
     [quo2.foundations.resources :as quo.resources]
     [react-native.core :as rn]
-    [status-im2.common.resources :as resources]
     [status-im2.constants :as constants]
     [status-im2.contexts.wallet.common.utils :as utils]
     [utils.i18n :as i18n]
@@ -160,7 +159,7 @@
 (def account-origin-state
   {:type            :default-keypair
    :stored          :on-keycard
-   :profile-picture (resources/get-mock-image :user-picture-male5)
+   :profile-picture (status.resources/get-mock-image :user-picture-male5)
    :derivation-path (string/replace constants/path-default-wallet #"/" " / ")
    :user-name       "Alisher Yakupov"
    :on-press        #(js/alert "pressed")})