diff --git a/src/quo2/components/inputs/title_input/style.cljs b/src/quo2/components/inputs/title_input/style.cljs
index 815f48fa2b..b1a4e526f4 100644
--- a/src/quo2/components/inputs/title_input/style.cljs
+++ b/src/quo2/components/inputs/title_input/style.cljs
@@ -25,7 +25,7 @@
   (colors/alpha (if blur?
                   (colors/theme-colors colors/neutral-100 colors/white theme)
                   (colors/custom-color customization-color
-                                       (if (or (= :dark theme) colors/dark?) 60 50)))
+                                       (if (= :dark theme) 60 50)))
                 (if platform/ios? 1 0.2)))
 
 (def text-input-container {:flex 1})
diff --git a/src/quo2/components/keycard/style.cljs b/src/quo2/components/keycard/style.cljs
index d7791c6e0c..bd35ba753d 100644
--- a/src/quo2/components/keycard/style.cljs
+++ b/src/quo2/components/keycard/style.cljs
@@ -5,7 +5,7 @@
 (def keycard-chip-height 28)
 
 (defn card-container
-  [locked?]
+  [locked? theme]
   {:overflow         :hidden
    :height           keycard-height
    :align-items      :flex-start
@@ -13,22 +13,26 @@
    :border-width     1
    :border-color     (if locked?
                        colors/white-opa-5
-                       (colors/theme-colors colors/neutral-20 colors/neutral-80))
+                       (colors/theme-colors colors/neutral-20 colors/neutral-80 theme))
    :border-style     :solid
    :border-radius    16
    :padding          16
    :background-color (if locked?
-                       (colors/theme-colors colors/danger colors/danger-opa-40)
-                       (colors/theme-colors colors/neutral-5 colors/neutral-90))})
+                       (colors/theme-colors colors/danger colors/danger-opa-40 theme)
+                       (colors/theme-colors colors/neutral-5 colors/neutral-90 theme))})
 
 (defn keycard-logo
-  [locked?]
-  {:tint-color (if locked? colors/white (colors/theme-colors colors/neutral-100 colors/white))})
+  [locked? theme]
+  {:tint-color (if locked?
+                 colors/white
+                 (colors/theme-colors colors/neutral-100 colors/white theme))})
 
 (defn keycard-watermark
-  [locked?]
+  [locked? theme]
   {:position   :absolute
-   :tint-color (if locked? colors/white-opa-5 (colors/theme-colors colors/neutral-100 colors/white))
+   :tint-color (if locked?
+                 colors/white-opa-5
+                 (colors/theme-colors colors/neutral-100 colors/white theme))
    :align-self :center
    :height     280.48
    :transform  [{:rotate "-30deg"} {:translateY -30}]
diff --git a/src/quo2/components/keycard/view.cljs b/src/quo2/components/keycard/view.cljs
index ae2b462c38..1a412cfe43 100644
--- a/src/quo2/components/keycard/view.cljs
+++ b/src/quo2/components/keycard/view.cljs
@@ -4,28 +4,30 @@
             [quo2.components.tags.tag :as tag]
             [quo2.foundations.colors :as colors]
             [quo2.foundations.resources :as resources]
-            [utils.i18n :as i18n]))
+            [utils.i18n :as i18n]
+            [quo2.theme :as quo.theme]))
 
-(defn keycard
+(defn- view-internal
   "This component based on the following properties:
   - :holder-name - Can be owner's name. Default is Empty
   - :locked? - Boolean to specify whether the keycard is locked or not
+  - :theme :light/:dark
   "
-  [{:keys [holder-name locked?]}]
+  [{:keys [holder-name locked? theme]}]
   (let [label (if (boolean holder-name)
                 (i18n/label :t/user-keycard {:name holder-name})
                 (i18n/label :t/empty-keycard))]
-    [rn/view {:style (style/card-container locked?)}
+    [rn/view {:style (style/card-container locked? theme)}
      [rn/image
       {:source (resources/get-image :keycard-logo)
-       :style  (style/keycard-logo locked?)}]
+       :style  (style/keycard-logo locked? theme)}]
      [rn/image
       {:source (resources/get-image
-                (if (or locked? (colors/dark?)) :keycard-chip-dark :keycard-chip-light))
+                (if (or locked? (= :dark theme)) :keycard-chip-dark :keycard-chip-light))
        :style  style/keycard-chip}]
      [rn/image
       {:source (resources/get-image :keycard-watermark)
-       :style  (style/keycard-watermark locked?)}]
+       :style  (style/keycard-watermark locked? theme)}]
      [tag/tag
       {:size                32
        :type                (when locked? :icon)
@@ -36,3 +38,5 @@
        :accessibility-label :holder-name
        :icon-color          colors/white-70-blur
        :override-theme      (when locked? :dark)}]]))
+
+(def keycard (quo.theme/with-theme view-internal))
diff --git a/src/quo2/components/record_audio/record_audio/buttons/record_button_big.cljs b/src/quo2/components/record_audio/record_audio/buttons/record_button_big.cljs
index 3ee2b2e7be..2dd4dd4c52 100644
--- a/src/quo2/components/record_audio/record_audio/buttons/record_button_big.cljs
+++ b/src/quo2/components/record_audio/record_audio/buttons/record_button_big.cljs
@@ -28,9 +28,9 @@
          [reanimated/view {:style (style/animated-circle scale opacity color)}]))))))
 
 (defn f-record-button-big
-  [recording? ready-to-send? ready-to-lock? ready-to-delete? record-button-is-animating?
-   record-button-at-initial-position? locked? reviewing-audio? recording-length-ms
-   clear-timeout touch-active? recorder-ref reload-recorder-fn idle? on-send on-cancel]
+  [{:keys [recording? ready-to-send? ready-to-lock? ready-to-delete? record-button-is-animating?
+           record-button-at-initial-position? locked? reviewing-audio? recording-length-ms
+           clear-timeout touch-active? recorder-ref reload-recorder-fn idle? on-send on-cancel theme]}]
   (let [scale (reanimated/use-shared-value 1)
         opacity (reanimated/use-shared-value 0)
         opacity-from (if @ready-to-lock? opacity-from-lock opacity-from-default)
@@ -46,13 +46,14 @@
                     (range 0 5))
         rings-color (cond
                       @ready-to-lock?   (colors/theme-colors colors/neutral-80-opa-5-opaque
-                                                             colors/neutral-80)
+                                                             colors/neutral-80
+                                                             theme)
                       @ready-to-delete? colors/danger-50
                       :else             colors/primary-50)
         translate-y (reanimated/use-shared-value 0)
         translate-x (reanimated/use-shared-value 0)
         button-color colors/primary-50
-        icon-color (if (and (not (colors/dark?)) @ready-to-lock?) colors/black colors/white)
+        icon-color (if (and (not (= :dark theme)) @ready-to-lock?) colors/black colors/white)
         icon-opacity (reanimated/use-shared-value 1)
         red-overlay-opacity (reanimated/use-shared-value 0)
         gray-overlay-opacity (reanimated/use-shared-value 0)
diff --git a/src/quo2/components/record_audio/record_audio/view.cljs b/src/quo2/components/record_audio/record_audio/view.cljs
index c52fbc5528..2dffc1f314 100644
--- a/src/quo2/components/record_audio/record_audio/view.cljs
+++ b/src/quo2/components/record_audio/record_audio/view.cljs
@@ -17,7 +17,8 @@
             [quo2.components.record-audio.record-audio.buttons.record-button :as record-button]
             [clojure.string :as string]
             [utils.datetime :as datetime]
-            [react-native.platform :as platform]))
+            [react-native.platform :as platform]
+            [quo2.theme :as quo.theme]))
 
 (def ^:private min-audio-duration-ms 1000)
 (def ^:private max-audio-duration-ms (if platform/ios? 120800 120500))
@@ -155,11 +156,11 @@
       (if @playing-audio? :i/pause :i/play)
       {:color (colors/theme-colors colors/neutral-100 colors/white)}]]))
 
-(defn record-audio
+(defn- record-audio-internal
   [{:keys [on-init on-start-recording on-send on-cancel on-reviewing-audio
            record-audio-permission-granted
            on-request-record-audio-permission on-check-audio-permissions
-           audio-file on-lock max-duration-ms]}]
+           audio-file on-lock max-duration-ms theme]}]
   [:f>
    ;; TODO we need to refactor this, and use :f> with defined function, currenly state is reseted each
    ;; time parent component
@@ -574,20 +575,23 @@
            [:f> send-button/f-send-button recording? ready-to-send? reviewing-audio?
             @force-show-controls?]
            [:f> record-button-big/f-record-button-big
-            recording?
-            ready-to-send?
-            ready-to-lock?
-            ready-to-delete?
-            record-button-is-animating?
-            record-button-at-initial-position?
-            locked?
-            reviewing-audio?
-            recording-length-ms
-            clear-timeout
-            touch-active?
-            recorder-ref
-            reload-recorder
-            idle?
-            on-send
-            on-cancel]
+            {:recording?                         recording?
+             :ready-to-send?                     ready-to-send?
+             :ready-to-lock?                     ready-to-lock?
+             :ready-to-delete?                   ready-to-delete?
+             :record-button-is-animating?        record-button-is-animating?
+             :record-button-at-initial-position? record-button-at-initial-position?
+             :locked?                            locked?
+             :reviewing-audio?                   reviewing-audio?
+             :recording-length-ms                recording-length-ms
+             :clear-timeout                      clear-timeout
+             :touch-active?                      touch-active?
+             :recorder-ref                       recorder-ref
+             :reload-recorder-fn                 reload-recorder
+             :idle?                              idle?
+             :on-send                            on-send
+             :on-cancel                          on-cancel
+             :theme                              theme}]
            [:f> record-button/f-record-button recording? reviewing-audio?]]])))])
+
+(def record-audio (quo.theme/with-theme record-audio-internal))
diff --git a/src/quo2/components/record_audio/soundtrack/view.cljs b/src/quo2/components/record_audio/soundtrack/view.cljs
index eb75801415..2e54ee73a9 100644
--- a/src/quo2/components/record_audio/soundtrack/view.cljs
+++ b/src/quo2/components/record_audio/soundtrack/view.cljs
@@ -4,14 +4,16 @@
             [react-native.audio-toolkit :as audio]
             [taoensso.timbre :as log]
             [react-native.platform :as platform]
-            [react-native.slider :as slider]))
+            [react-native.slider :as slider]
+            [quo2.theme :as quo.theme]))
 
 (def ^:private thumb-light (js/require "../resources/images/icons2/12x12/thumb-light.png"))
 (def ^:private thumb-dark (js/require "../resources/images/icons2/12x12/thumb-dark.png"))
 
 (defn f-soundtrack
   [{:keys [audio-current-time-ms player-ref style seeking-audio? max-audio-duration-ms]}]
-  (let [audio-duration-ms (min max-audio-duration-ms (audio/get-player-duration player-ref))]
+  (let [audio-duration-ms (min max-audio-duration-ms (audio/get-player-duration player-ref))
+        theme             (quo.theme/use-theme-value)]
     [:<>
      [slider/slider
       {:test-ID                  "soundtrack"
@@ -31,8 +33,9 @@
                                     #(log/error "[record-audio] on seek - error: " %)))
        :on-value-change          #(when @seeking-audio?
                                     (reset! audio-current-time-ms %))
-       :thumb-image              (if (colors/dark?) thumb-dark thumb-light)
-       :minimum-track-tint-color (colors/theme-colors colors/primary-50 colors/primary-60)
+       :thumb-image              (quo.theme/theme-value thumb-light thumb-dark theme)
+       :minimum-track-tint-color (colors/theme-colors colors/primary-50 colors/primary-60 theme)
        :maximum-track-tint-color (colors/theme-colors
                                   (if platform/ios? colors/neutral-20 colors/neutral-40)
-                                  (if platform/ios? colors/neutral-80 colors/neutral-60))}]]))
+                                  (if platform/ios? colors/neutral-80 colors/neutral-60)
+                                  theme)}]]))
diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs
index e2892b8c72..6ff1d14280 100644
--- a/src/quo2/foundations/colors.cljs
+++ b/src/quo2/foundations/colors.cljs
@@ -314,7 +314,3 @@
   ([light dark override-theme]
    (let [theme (or override-theme (theme/get-theme))]
      (if (= theme :light) light dark))))
-
-(defn dark?
-  []
-  (theme/dark?))
diff --git a/src/quo2/theme.cljs b/src/quo2/theme.cljs
index 546aace9cb..f43ab76392 100644
--- a/src/quo2/theme.cljs
+++ b/src/quo2/theme.cljs
@@ -43,6 +43,10 @@
   []
   (utils.transforms/js->clj (rn/use-context theme-context)))
 
+(defn use-theme-value
+  []
+  (keyword (:theme (use-theme))))
+
 (defn ^:private f-with-theme
   [component props & args]
   (let [theme (-> (use-theme) :theme keyword)]
diff --git a/src/status_im2/common/resources.cljs b/src/status_im2/common/resources.cljs
index f80722f9d3..fc6b3eb35d 100644
--- a/src/status_im2/common/resources.cljs
+++ b/src/status_im2/common/resources.cljs
@@ -1,5 +1,4 @@
-(ns status-im2.common.resources
-  (:require [quo2.foundations.colors :as colors]))
+(ns status-im2.common.resources)
 
 (def ui
   {:add-new-contact               (js/require "../resources/images/ui2/add-contact.png")
@@ -49,6 +48,38 @@
    :no-notifications-light        (js/require "../resources/images/ui2/no-notifications-light.png")
    :no-notifications-dark         (js/require "../resources/images/ui2/no-notifications-dark.png")})
 
+(def ui-themed
+  {:no-messages
+   {:light (js/require "../resources/images/ui2/no-messages-light.png")
+    :dark  (js/require "../resources/images/ui2/no-messages-dark.png")}
+   :no-group-chats
+   {:light (js/require "../resources/images/ui2/no-group-chats-light.png")
+    :dark  (js/require "../resources/images/ui2/no-group-chats-dark.png")}
+   :no-contacts
+   {:light (js/require "../resources/images/ui2/no-contacts-light.png")
+    :dark  (js/require "../resources/images/ui2/no-contacts-dark.png")}
+   :no-sent-requests
+   {:light (js/require "../resources/images/ui2/no-sent-requests-light.png")
+    :dark  (js/require "../resources/images/ui2/no-sent-requests-dark.png")}
+   :no-received-requests
+   {:light (js/require "../resources/images/ui2/no-received-requests-light.png")
+    :dark  (js/require "../resources/images/ui2/no-received-requests-dark.png")}
+   :no-communities
+   {:light (js/require "../resources/images/ui2/no-communities-light.png")
+    :dark  (js/require "../resources/images/ui2/no-communities-dark.png")}
+   :no-pending-communities
+   {:light (js/require "../resources/images/ui2/no-pending-communities-light.png")
+    :dark  (js/require "../resources/images/ui2/no-pending-communities-dark.png")}
+   :no-opened-communities
+   {:light (js/require "../resources/images/ui2/no-opened-communities-light.png")
+    :dark  (js/require "../resources/images/ui2/no-opened-communities-dark.png")}
+   :no-contacts-to-invite
+   {:light (js/require "../resources/images/ui2/no-contacts-to-invite-light.png")
+    :dark  (js/require "../resources/images/ui2/no-contacts-to-invite-dark.png")}
+   :no-notifications
+   {:light (js/require "../resources/images/ui2/no-notifications-light.png")
+    :dark  (js/require "../resources/images/ui2/no-notifications-dark.png")}})
+
 (def mock-images
   {:diamond               (js/require "../resources/images/mock2/diamond.png")
    :coinbase              (js/require "../resources/images/mock2/coinbase.png")
@@ -97,5 +128,5 @@
   (get ui k))
 
 (defn get-themed-image
-  [k k2]
-  (get ui (if (colors/dark?) k k2)))
+  [k theme]
+  (get-in ui-themed [k theme]))
diff --git a/src/status_im2/contexts/chat/messages/content/reactions/view.cljs b/src/status_im2/contexts/chat/messages/content/reactions/view.cljs
index 05c24c8ff7..f520ccfe4d 100644
--- a/src/status_im2/contexts/chat/messages/content/reactions/view.cljs
+++ b/src/status_im2/contexts/chat/messages/content/reactions/view.cljs
@@ -3,7 +3,8 @@
             [quo2.core :as quo]
             [react-native.core :as rn]
             [utils.re-frame :as rf]
-            [status-im2.contexts.chat.messages.drawers.view :as drawers]))
+            [status-im2.contexts.chat.messages.drawers.view :as drawers]
+            [quo2.theme :as quo.theme]))
 
 (defn- on-press
   [own message-id emoji-id emoji-reaction-id]
@@ -17,26 +18,29 @@
                    :emoji-id   emoji-id}])))
 
 (defn- on-long-press
-  [message-id emoji-id user-message-content reactions]
-  (rf/dispatch [:chat.ui/emoji-reactions-by-message-id
-                {:message-id message-id
-                 :on-success (fn [response]
-                               (rf/dispatch [:chat/save-emoji-reaction-details
-                                             {:reaction-authors-list response
-                                              :selected-reaction     emoji-id}])
-                               (rf/dispatch [:dismiss-keyboard])
-                               (rf/dispatch [:show-bottom-sheet
-                                             {:on-close (fn []
-                                                          (rf/dispatch
-                                                           [:chat/clear-emoji-reaction-author-details]))
-                                              :content (fn []
-                                                         [drawers/reaction-authors reactions])
-                                              :selected-item (fn []
-                                                               user-message-content)
-                                              :padding-bottom-override 0}]))}]))
+  [{:keys [message-id emoji-id user-message-content reactions theme]}]
+  (rf/dispatch
+   [:chat.ui/emoji-reactions-by-message-id
+    {:message-id message-id
+     :on-success (fn [response]
+                   (rf/dispatch [:chat/save-emoji-reaction-details
+                                 {:reaction-authors-list response
+                                  :selected-reaction     emoji-id}])
+                   (rf/dispatch [:dismiss-keyboard])
+                   (rf/dispatch [:show-bottom-sheet
+                                 {:on-close (fn []
+                                              (rf/dispatch
+                                               [:chat/clear-emoji-reaction-author-details]))
+                                  :content (fn []
+                                             [drawers/reaction-authors
+                                              {:reactions-order reactions
+                                               :theme           theme}])
+                                  :selected-item (fn []
+                                                   user-message-content)
+                                  :padding-bottom-override 0}]))}]))
 
-(defn message-reactions-row
-  [{:keys [message-id chat-id]} user-message-content]
+(defn- view-internal
+  [{:keys [message-id chat-id theme]} user-message-content]
   (let [reactions (rf/sub [:chats/message-reactions message-id chat-id])]
     [:<>
      (when (seq reactions)
@@ -55,10 +59,12 @@
              :neutral?            own
              :clicks              quantity
              :on-press            #(on-press own message-id emoji-id emoji-reaction-id)
-             :on-long-press       #(on-long-press message-id
-                                                  emoji-id
-                                                  user-message-content
-                                                  (map :emoji-id reactions))
+             :on-long-press       #(on-long-press
+                                    {:message-id           message-id
+                                     :emoji-id             emoji-id
+                                     :user-message-content user-message-content
+                                     :reactions            (map :emoji-id reactions)
+                                     :theme                theme})
              :accessibility-label (str "emoji-reaction-" emoji-id)}]])
         [quo/add-reaction
          {:on-press (fn []
@@ -70,3 +76,5 @@
                                                  :message-id message-id}])
                          :selected-item (fn []
                                           user-message-content)}]))}]])]))
+
+(def message-reactions-row (quo.theme/with-theme view-internal))
diff --git a/src/status_im2/contexts/chat/messages/drawers/style.cljs b/src/status_im2/contexts/chat/messages/drawers/style.cljs
index f31504ecd7..31b8390ceb 100644
--- a/src/status_im2/contexts/chat/messages/drawers/style.cljs
+++ b/src/status_im2/contexts/chat/messages/drawers/style.cljs
@@ -12,8 +12,8 @@
    :height       20})
 
 (defn tab-count
-  [active?]
-  {:color (if (or active? (colors/dark?)) colors/white colors/neutral-100)})
+  [active? theme]
+  {:color (if (or active? (= :dark theme)) colors/white colors/neutral-100)})
 
 (def tabs-container
   {:flex          1
diff --git a/src/status_im2/contexts/chat/messages/drawers/view.cljs b/src/status_im2/contexts/chat/messages/drawers/view.cljs
index ec2a7c72c5..395ad6d0ea 100644
--- a/src/status_im2/contexts/chat/messages/drawers/view.cljs
+++ b/src/status_im2/contexts/chat/messages/drawers/view.cljs
@@ -27,8 +27,8 @@
       :ens-verified   ens-verified
       :added?         added?}]))
 
-(defn get-tabs-data
-  [reaction-authors selected-tab reactions-order]
+(defn- get-tabs-data
+  [{:keys [reaction-authors selected-tab reactions-order theme]}]
   (map (fn [reaction-type-int]
          (let [author-details (get reaction-authors reaction-type-int)]
            {:id                  reaction-type-int
@@ -42,12 +42,13 @@
                                    {:weight :medium
                                     :size   :paragraph-1
                                     :style  (style/tab-count (= selected-tab
-                                                                reaction-type-int))}
+                                                                reaction-type-int)
+                                                             theme)}
                                    (count author-details)]]}))
        reactions-order))
 
-(defn reaction-authors-comp
-  [selected-tab reaction-authors reactions-order]
+(defn- reaction-authors-comp
+  [{:keys [selected-tab reaction-authors reactions-order theme]}]
   [:<>
    [rn/view style/tabs-container
     [quo/tabs
@@ -56,7 +57,10 @@
       :in-scroll-view? true
       :on-change       #(reset! selected-tab %)
       :default-active  @selected-tab
-      :data            (get-tabs-data reaction-authors @selected-tab reactions-order)}]]
+      :data            (get-tabs-data {:reaction-authors reaction-authors
+                                       :selected-tab     @selected-tab
+                                       :reactions-order  reactions-order
+                                       :theme            theme})}]]
    [gesture/flat-list
     {:data      (for [contact (get reaction-authors @selected-tab)]
                   contact)
@@ -65,13 +69,17 @@
      :style     style/authors-list}]])
 
 (defn reaction-authors
-  [reactions-order]
+  [{:keys [reactions-order theme]}]
   (let [{:keys [reaction-authors-list
                 selected-reaction]} (rf/sub [:chat/reactions-authors])
         selected-tab                (reagent/atom (or selected-reaction
                                                       (first (keys reaction-authors-list))))]
     (fn []
-      [reaction-authors-comp selected-tab reaction-authors-list reactions-order])))
+      [reaction-authors-comp
+       {:selected-tab     selected-tab
+        :reaction-authors reaction-authors-list
+        :reactions-order  reactions-order
+        :theme            theme}])))
 
 (defn pin-message
   [{:keys [chat-id pinned pinned-by] :as message-data}]
diff --git a/src/status_im2/contexts/chat/new_chat/view.cljs b/src/status_im2/contexts/chat/new_chat/view.cljs
index 76d727ea47..859e7dc938 100644
--- a/src/status_im2/contexts/chat/new_chat/view.cljs
+++ b/src/status_im2/contexts/chat/new_chat/view.cljs
@@ -10,13 +10,14 @@
             [status-im2.common.contact-list.view :as contact-list]
             [status-im2.common.resources :as resources]
             [status-im2.common.contact-list-item.view :as contact-list-item]
-            [status-im2.contexts.chat.new-chat.styles :as style]))
+            [status-im2.contexts.chat.new-chat.styles :as style]
+            [quo2.theme :as quo.theme]))
 
 (defn- no-contacts-view
-  []
+  [{:keys [theme]}]
   [rn/view
    {:style (style/no-contacts)}
-   [rn/image {:source (resources/get-themed-image :no-contacts-dark :no-contacts-light)}]
+   [rn/image {:source (resources/get-themed-image :no-contacts theme)}]
    [quo/text
     {:weight :semi-bold
      :size   :paragraph-1
@@ -56,8 +57,8 @@
                     :on-check on-toggle}}
        item])))
 
-(defn view
-  [{:keys [scroll-enabled on-scroll close]}]
+(defn- view-internal
+  [{:keys [scroll-enabled on-scroll close theme]}]
   (let [contacts                          (rf/sub [:contacts/sorted-and-grouped-by-first-letter])
         selected-contacts-count           (rf/sub [:selected-contacts-count])
         selected-contacts                 (rf/sub [:group/selected-contacts])
@@ -77,19 +78,19 @@
        [quo/text
         {:weight :semi-bold
          :size   :heading-1
-         :style  {:color (colors/theme-colors colors/neutral-100 colors/white)}}
+         :style  {:color (colors/theme-colors colors/neutral-100 colors/white theme)}}
         (i18n/label :t/new-chat)]
        (when (seq contacts)
          [quo/text
           {:size   :paragraph-2
            :weight :regular
            :style  {:margin-bottom 2
-                    :color         (colors/theme-colors colors/neutral-40 colors/neutral-50)}}
+                    :color         (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}}
           (i18n/label :t/selected-count-from-max
                       {:selected selected-contacts-count
                        :max      constants/max-group-chat-participants})])]]
      (if (empty? contacts)
-       [no-contacts-view]
+       [no-contacts-view {:theme theme}]
        [gesture/section-list
         {:key-fn                         :title
          :sticky-section-headers-enabled false
@@ -111,3 +112,5 @@
         (if one-contact-selected?
           (i18n/label :t/chat-with {:selected-user primary-name})
           (i18n/label :t/setup-group-chat))])]))
+
+(def view (quo.theme/with-theme view-internal))
diff --git a/src/status_im2/contexts/shell/jump_to/utils.cljs b/src/status_im2/contexts/shell/jump_to/utils.cljs
index 68afd1812c..1c19e9f2d4 100644
--- a/src/status_im2/contexts/shell/jump_to/utils.cljs
+++ b/src/status_im2/contexts/shell/jump_to/utils.cljs
@@ -2,13 +2,13 @@
   (:require [utils.re-frame :as rf]
             [react-native.core :as rn]
             [status-im2.config :as config]
-            [quo2.foundations.colors :as colors]
             [react-native.platform :as platform]
             [react-native.safe-area :as safe-area]
             [react-native.reanimated :as reanimated]
             [status-im.async-storage.core :as async-storage]
             [status-im2.contexts.shell.jump-to.state :as state]
-            [status-im2.contexts.shell.jump-to.constants :as shell.constants]))
+            [status-im2.contexts.shell.jump-to.constants :as shell.constants]
+            [quo2.theme :as quo.theme]))
 
 ;;;;  Helper Functions
 
@@ -126,7 +126,7 @@
 (defn change-shell-status-bar-style
   []
   (rf/dispatch [:change-shell-status-bar-style
-                (if (or (colors/dark?)
+                (if (or (quo.theme/get-theme)
                         (not (home-stack-open?)))
                   :light
                   :dark)]))
diff --git a/src/status_im2/navigation/options.cljs b/src/status_im2/navigation/options.cljs
index 07a0419ac5..4bfb1559d7 100644
--- a/src/status_im2/navigation/options.cljs
+++ b/src/status_im2/navigation/options.cljs
@@ -1,6 +1,7 @@
 (ns status-im2.navigation.options
   (:require [quo2.foundations.colors :as colors]
-            [react-native.platform :as platform]))
+            [react-native.platform :as platform]
+            [quo2.theme :as quo.theme]))
 
 (defn default-options
   []
@@ -44,12 +45,14 @@
 
 (defn navbar
   ([dark?]
-   {:navigationBar {:backgroundColor (if (or dark? (colors/dark?)) colors/neutral-100 colors/white)}})
+   {:navigationBar {:backgroundColor (if (or dark? (= :dark (quo.theme/get-theme)))
+                                       colors/neutral-100
+                                       colors/white)}})
   ([] (navbar nil)))
 
 (defn statusbar
   ([dark?]
-   (let [style (if (or dark? (colors/dark?)) :light :dark)]
+   (let [style (if (or dark? (= :dark (quo.theme/get-theme))) :light :dark)]
      (if platform/android?
        {:statusBar {:translucent     true
                     :backgroundColor :transparent
diff --git a/src/status_im2/navigation/roots.cljs b/src/status_im2/navigation/roots.cljs
index 3c743cd0a1..5c75d95eda 100644
--- a/src/status_im2/navigation/roots.cljs
+++ b/src/status_im2/navigation/roots.cljs
@@ -2,7 +2,8 @@
   (:require [status-im2.navigation.view :as views]
             [quo2.foundations.colors :as colors]
             [status-im2.navigation.options :as options]
-            [status-im2.constants :as constants]))
+            [status-im2.constants :as constants]
+            [quo2.theme :as quo.theme]))
 
 (defn get-screen-options
   [screen]
@@ -80,38 +81,39 @@
 
 (defn roots
   []
-  (merge (old-roots)
+  (merge
+   (old-roots)
 
-         {:intro
-          {:root
-           {:stack {:id       :intro
-                    :children [{:component {:name    :intro
-                                            :id      :intro
-                                            :options (options/default-root nil colors/neutral-100)}}]}}}
-          :shell-stack
-          {:root
-           {:stack {:id       :shell-stack
-                    :children [{:component {:name    :shell-stack
-                                            :id      :shell-stack
-                                            :options (options/default-root
-                                                      (if (colors/dark?) :light :dark))}}]}}}
-          :profiles
-          {:root
-           {:stack {:id       :profiles
-                    :children [{:component {:name    :profiles
-                                            :id      :profiles
+   {:intro
+    {:root
+     {:stack {:id       :intro
+              :children [{:component {:name    :intro
+                                      :id      :intro
+                                      :options (options/default-root nil colors/neutral-100)}}]}}}
+    :shell-stack
+    {:root
+     {:stack {:id       :shell-stack
+              :children [{:component {:name    :shell-stack
+                                      :id      :shell-stack
+                                      :options (options/default-root
+                                                (if (= :dark (quo.theme/get-theme)) :light :dark))}}]}}}
+    :profiles
+    {:root
+     {:stack {:id       :profiles
+              :children [{:component {:name    :profiles
+                                      :id      :profiles
+                                      :options (options/default-root)}}]}}}
+
+    :enable-notifications
+    {:root {:stack {:children [{:component {:name    :enable-notifications
+                                            :id      :enable-notifications
                                             :options (options/default-root)}}]}}}
 
-          :enable-notifications
-          {:root {:stack {:children [{:component {:name    :enable-notifications
-                                                  :id      :enable-notifications
-                                                  :options (options/default-root)}}]}}}
-
-          :welcome
-          {:root {:stack {:children [{:component {:name    :welcome
-                                                  :id      :welcome
-                                                  :options (options/default-root)}}]}}}
-          :syncing-results
-          {:root {:stack {:children [{:component {:name    :syncing-results
-                                                  :id      :syncing-results
-                                                  :options (options/default-root)}}]}}}}))
+    :welcome
+    {:root {:stack {:children [{:component {:name    :welcome
+                                            :id      :welcome
+                                            :options (options/default-root)}}]}}}
+    :syncing-results
+    {:root {:stack {:children [{:component {:name    :syncing-results
+                                            :id      :syncing-results
+                                            :options (options/default-root)}}]}}}}))