add system theme option

Author: sprocketc

resources/public/icons/system.svg

@@ -65,9 +65,6 @@
     "windowToggleFullscreen"
     (.setFullScreen ^js @main-window (not (.isFullScreen ^js @main-window)))
 
-    "setThemeMode"
-    (set! (.. nativeTheme -themeSource) (.-data args))
-
     "openRemoteUrl"
     (open-external! (.-data args))
 

src/electron/main.cljs

@@ -94,6 +94,13 @@
        "fileLoaded" (rf/dispatch [::document.e/load (edn/read-string (.-data data))])
        "fileSaved" (rf/dispatch [::document.e/saved (edn/read-string (.-data data))])))))
 
+(defn handle-system-theme!
+  []
+  (let [query (.matchMedia js/window "(prefers-color-scheme: dark)")
+        get-theme (fn [query] (if (.-matches query) :dark :light))]
+    (rf/dispatch [:set-native-theme (get-theme query)])
+    (.addListener query #(rf/dispatch [:set-native-theme (get-theme %)]))))
+
 
 (defn ^:export init []
   #_(if platform/electron?
@@ -111,7 +118,7 @@
 
   (rf/dispatch-sync [:initialize-db])
   (rf/dispatch-sync [:load-local-db])
-  (rf/dispatch-sync [:theme/init-mode])
+  (rf/dispatch-sync [:init-theme-mode])
   (rf/dispatch-sync [::document.e/new])
   (rf/dispatch-sync [:set-tool :select])
   (rf/dispatch-sync [:set-mdn (js->clj mdn :keywordize-keys true)])
@@ -122,6 +129,8 @@
   (.addEventListener js/document "keydown" keyb/event-handler)
   (.addEventListener js/document "keyup" keyb/event-handler)
 
+  (handle-system-theme!)
+
   (.setup paper) ; REVIEW
 
   (if platform/electron?

src/renderer/core.cljs

@@ -22,7 +22,8 @@
    [:pen-mode? boolean?]
    [:panel [:map-of :key [:map [:visible? boolean?]]]]
    [:window renderer.window.db/window]
-   [:theme [:mode [:enum :dark :light :system]]]
+   [:theme [:mode [:enum :dark :light :system]
+            :native [:enum :dark :light]]]
    [:timeline renderer.timeline.db/timeline]])
 
 (def default

src/renderer/db.cljs

@@ -103,28 +103,40 @@
  (fn [db [_ key]]
    (update-in db [key :visible?] not)))
 
+(rf/reg-fx
+ :set-document-theme-attr
+ (fn [[mode]]
+   (.setAttribute js/window.document.documentElement "data-theme" mode)))
+
 (rf/reg-event-fx
- :theme/init-mode
+ :init-theme-mode
  (fn [{:keys [db]} _]
-   (let [mode (-> db :theme :mode name)]
-     {:set-attribute [js/window.document.documentElement "data-theme" mode]
-      :send-to-main {:action "setThemeMode" :data mode}})))
+   (let [mode (-> db :theme :mode)
+         mode (if (= mode :system) (-> db :theme :native) mode)]
+     {:set-document-theme-attr [(name mode)]})))
 
 (rf/reg-event-fx
- :theme/set-mode
+ :set-native-theme
+ local-storage/persist
+ (fn [{:keys [db]} [_ mode]]
+   {:db (assoc-in db [:theme :native] mode)
+    :dispatch [:init-theme-mode]}))
+
+(rf/reg-event-fx
+ :set-theme-mode
  local-storage/persist
  (fn [{:keys [db]} [_ mode]]
    {:db (assoc-in db [:theme :mode] mode)
-    :dispatch [:theme/init-mode]}))
+    :dispatch [:init-theme-mode]}))
 
 (rf/reg-event-fx
- :theme/cycle-mode
+ :cycle-theme-mode
  (fn [{:keys [db]} [_]]
    (let [mode (case (-> db :theme :mode)
-                ;; TODO: Support system mode.
                 :dark :light
-                :light :dark)]
-     {:dispatch [:theme/set-mode mode]})))
+                :light :system
+                :system :dark)]
+     {:dispatch [:set-theme-mode mode]})))
 
 (rf/reg-event-fx
  :pointer-event
@@ -272,7 +284,3 @@
  (fn [_ [_ id]]
    {:focus id}))
 
-(rf/reg-fx
- :set-attribute
- (fn [[el attr val]]
-   (.setAttribute el attr val)))

src/renderer/events.cljs

@@ -38,7 +38,8 @@
 (defn app-header
   []
   (let [fullscreen? @(rf/subscribe [::window.s/fullscreen?])
-        maximized? @(rf/subscribe [::window.s/maximized?])]
+        maximized? @(rf/subscribe [::window.s/maximized?])
+        theme-mode (name @(rf/subscribe [:theme-mode]))]
     [:div.flex.items-center.relative
      (when-not (or fullscreen? platform/mac?)
        [app-icon])
@@ -50,9 +51,9 @@
        :style {:z-index -1}}
       @(rf/subscribe [::document.s/title-bar])]
      [:div.flex.h-full.flex-1.drag]
-     [button {:action [:theme/cycle-mode]
-              :title "Theme mode"
-              :icon (name @(rf/subscribe [:theme-mode]))
+     [button {:action [:cycle-theme-mode]
+              :title (str "Theme mode - " theme-mode)
+              :icon theme-mode
               :class "bg-primary"}]
      (when (and platform/electron? (not fullscreen?) (not platform/mac?))
        (into [:div.text-right]