From fab9e842e8fb175430b440bcaea404462422322c Mon Sep 17 00:00:00 2001
From: Miguel de Benito Delgado <m.debenito.d@gmail.com>
Date: Mon, 26 May 2025 15:44:56 +0000
Subject: [PATCH] :sparkles: Support following system color scheme

---
 frontend/src/app/main.cljs       |  3 ++-
 frontend/src/app/main/ui.cljs    | 12 ++++++------
 frontend/src/app/util/theme.cljs | 29 +++++++++++++++++++++++++++++
 3 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/main.cljs b/frontend/src/app/main.cljs
index b048df8842..9de03be41f 100644
--- a/frontend/src/app/main.cljs
+++ b/frontend/src/app/main.cljs
@@ -97,7 +97,8 @@
   (cur/init-styles)
   (thr/init!)
   (init-ui)
-  (st/emit! (plugins/initialize)
+  (st/emit! (theme/initialize)
+            (plugins/initialize)
             (initialize)))
 
 (defn ^:export reinit
diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs
index 309deedc49..8a55c93573 100644
--- a/frontend/src/app/main/ui.cljs
+++ b/frontend/src/app/main/ui.cljs
@@ -30,6 +30,7 @@
    [app.main.ui.static :as static]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
+   [app.util.theme :as theme]
    [beicon.v2.core :as rx]
    [rumext.v2 :as mf]))
 
@@ -358,13 +359,12 @@
   (let [route   (mf/deref refs/route)
         edata   (mf/deref refs/exception)
         profile (mf/deref refs/profile)
-        theme   (case (:theme profile)
-                  "system" (dom/get-system-theme)
-                  "default" "dark"
-                  (:theme profile))]
+        profile-theme (:theme profile)
+        system-theme (mf/deref theme/preferred-color-scheme)]
 
-    (mf/with-effect [theme]
-      (dom/set-html-theme-color theme))
+    (mf/with-effect [profile-theme system-theme]
+      (dom/set-html-theme-color
+       (if (= profile-theme "system") system-theme profile-theme)))
 
     [:& (mf/provider ctx/current-route) {:value route}
      [:& (mf/provider ctx/current-profile) {:value profile}
diff --git a/frontend/src/app/util/theme.cljs b/frontend/src/app/util/theme.cljs
index 28c17efe58..c6a4e1dec0 100644
--- a/frontend/src/app/util/theme.cljs
+++ b/frontend/src/app/util/theme.cljs
@@ -10,8 +10,10 @@
   (:require
    [app.config :as cfg]
    [app.util.dom :as dom]
+   [app.util.globals :as globals]
    [app.util.storage :as storage]
    [beicon.v2.core :as rx]
+   [potok.v2.core :as ptk]
    [rumext.v2 :as mf]))
 
 (defonce theme (get storage/global ::theme cfg/default-theme))
@@ -44,3 +46,30 @@
                   #js [])
     theme))
 
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Set the preferred color scheme based on the user's system settings.
+;; TODO: this is unrelated to the theme support above, which seems unused as
+;;       of v2.7
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defonce ^:private color-scheme-mq
+  (.matchMedia globals/window "(prefers-color-scheme: dark)"))
+
+;; This atom is referenced in app.main.ui.app
+(defonce preferred-color-scheme
+  (atom (if (.-matches color-scheme-mq) "dark" "light")))
+
+(defonce prefers-color-scheme-sub
+  (let [sub (rx/behavior-subject "dark")
+        ob  (->> (rx/from-event color-scheme-mq "change")
+                 (rx/map #(if (.-matches %) "dark" "light")))]
+    (rx/sub! ob sub)
+    sub))
+
+(defn initialize
+  []
+  (ptk/reify ::initialize
+    ptk/WatchEvent
+    (watch [_ _ _]
+      (->> prefers-color-scheme-sub
+           (rx/map #(reset! preferred-color-scheme %))))))
\ No newline at end of file