diff options
Diffstat (limited to 'src/frontend/tubo')
| -rw-r--r-- | src/frontend/tubo/components/audio_player.cljs | 4 | ||||
| -rw-r--r-- | src/frontend/tubo/events.cljs | 2 | ||||
| -rw-r--r-- | src/frontend/tubo/subs.cljs | 13 | ||||
| -rw-r--r-- | src/frontend/tubo/views.cljs | 5 | ||||
| -rw-r--r-- | src/frontend/tubo/views/settings.cljs | 2 |
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)])] |