✨ Support following system color scheme

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

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}

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