feat: add auto system theme and make it the default

5 files changed, 21 insertions, 5 deletions

diff --git a/src/frontend/tubo/components/audio_player.cljs b/src/frontend/tubo/components/audio_player.cljs
index 279f9c1..5e46909 100644
--- a/src/frontend/tubo/components/audio_player.cljs
+++ b/src/frontend/tubo/components/audio_player.cljs
@@ -98,8 +98,10 @@
             !player            @(rf/subscribe [:player])
             media-queue-pos    @(rf/subscribe [:media-queue-pos])
             {:keys [theme]}    @(rf/subscribe [:settings])
+            auto-theme         @(rf/subscribe [:auto-theme])
             service-color      (and service-id (utils/get-service-color service-id))
-            bg-color           (str "rgba(" (if (= theme "dark") "23, 23, 23" "255, 255, 255") ", 0.95)")
+            bg-color           (str "rgba(" (if (or (and (= theme "auto") (= auto-theme :dark)) (= theme "dark"))
+                                              "23, 23, 23" "255, 255, 255") ", 0.95)")
             liked?             (some #(= (:url %) url) (-> bookmarks first :items))]
         (when show-audio-player?
           [:div.sticky.bottom-0.z-10.p-3.absolute.box-border.m-0.transition-all.ease-in.delay-0
diff --git a/src/frontend/tubo/events.cljs b/src/frontend/tubo/events.cljs
index f01bdf5..ed73d4d 100644
--- a/src/frontend/tubo/events.cljs
+++ b/src/frontend/tubo/events.cljs
@@ -44,7 +44,7 @@
        :current-match     nil
        :show-audio-player (if (nil? show-audio-player) false show-audio-player)
        :settings
-       {:theme            (if (nil? theme) :light theme)
+       {:theme            (if (nil? theme) :auto theme)
         :show-comments    (if (nil? show-comments) true show-comments)
         :show-related     (if (nil? show-related) true show-related)
         :show-description (if (nil? show-description) true show-description)
diff --git a/src/frontend/tubo/subs.cljs b/src/frontend/tubo/subs.cljs
index f2a96ed..dd9ad89 100644
--- a/src/frontend/tubo/subs.cljs
+++ b/src/frontend/tubo/subs.cljs
@@ -18,6 +18,14 @@
     (.addEventListener js/window "touchmove" compute-scroll-distance)
     a))
 
+(defonce !auto-theme
+  (let [theme (r/atom (when (and (.-matchMedia js/window)
+                                 (.-matches (.matchMedia js/window "(prefers-color-scheme: dark)")))
+                        :dark))]
+    (.addEventListener (.matchMedia js/window "(prefers-color-scheme: dark)") "change"
+                       #(reset! theme (if (.-matches %) :dark :light)))
+    theme))
+
 (defonce !elapsed-time (r/atom 0))
 (defonce !player (atom nil))
 
@@ -42,6 +50,11 @@
    !player))
 
 (rf/reg-sub
+ :auto-theme
+ (fn [db _]
+   @!auto-theme))
+
+(rf/reg-sub
  :player-ready
  (fn [db _]
    (:player-ready db)))
diff --git a/src/frontend/tubo/views.cljs b/src/frontend/tubo/views.cljs
index 25070da..aabd7b6 100644
--- a/src/frontend/tubo/views.cljs
+++ b/src/frontend/tubo/views.cljs
@@ -10,9 +10,10 @@
 (defn app
   []
   (let [current-match   @(rf/subscribe [:current-match])
+        auto-theme      @(rf/subscribe [:auto-theme])
         {:keys [theme]} @(rf/subscribe [:settings])]
-    [:div {:class (when (= theme "dark") "dark")}
-     [:div.min-h-screen.flex.flex-col.h-full.dark:text-white.dark:bg-neutral-900.relative.font-nunito-sans
+    [:div {:class (when (or (and (= theme "auto") (= auto-theme :dark)) (= theme "dark")) "dark")}
+     [:div.min-h-screen.flex.flex-col.h-full.dark:text-white.bg-neutral-100.dark:bg-neutral-900.relative.font-nunito-sans
       [navigation/navbar current-match]
       [notification/notifications-panel]
       [:div.flex.flex-col.flex-auto.justify-between.relative
diff --git a/src/frontend/tubo/views/settings.cljs b/src/frontend/tubo/views/settings.cljs
index c02e982..a5352e5 100644
--- a/src/frontend/tubo/views/settings.cljs
+++ b/src/frontend/tubo/views/settings.cljs
@@ -21,7 +21,7 @@
     [layout/content-container
      [layout/content-header "Settings"]
      [:form.flex.flex-wrap.py-4
-      [select-input "Theme" :theme theme #{:light :dark}]
+      [select-input "Theme" :theme theme #{:auto :light :dark}]
       [select-input "Default service" :default-service (:id default-service)
        (map #(-> % :info :name) services)
        #(rf/dispatch [::events/change-service-setting (..  % -target -value)])]