feat(frontend): Add initial light-theme support

Currently just based on prefers-color-scheme

4 files changed, 23 insertions, 23 deletions

diff --git a/src/frontend/tubo/components/comments.cljs b/src/frontend/tubo/components/comments.cljs
index fb540ae..b107bac 100644
--- a/src/frontend/tubo/components/comments.cljs
+++ b/src/frontend/tubo/components/comments.cljs
@@ -24,7 +24,7 @@
      (when uploader-name
        [:div.flex.items-center
         [:a {:href (rfe/href :tubo.routes/channel nil {:url uploader-url}) :title uploader-name}
-         [:h1.text-gray-300.font-bold uploader-name]]
+         [:h1.text-neutral-800.dark:text-gray-300.font-bold uploader-name]]
         (when stream-position
           [:p.mx-1.text-xs (str "at " (util/format-duration stream-position))])])
      (when uploader-verified?
diff --git a/src/frontend/tubo/components/items.cljs b/src/frontend/tubo/components/items.cljs
index 95e2251..c4b68d8 100644
--- a/src/frontend/tubo/components/items.cljs
+++ b/src/frontend/tubo/components/items.cljs
@@ -13,7 +13,7 @@
     [:img.rounded.object-cover.min-h-full.max-h-full.min-w-full {:src thumbnail-url}]
     (when duration
       [:div.rounded.p-2.absolute {:style {:bottom 5 :right 5 :background "rgba(0,0,0,.7)" :zIndex "0"}}
-       [:p {:style {:fontSize "14px"}}
+       [:p.text-white {:style {:fontSize "14px"}}
         (if (= duration 0)
           "LIVE"
           (util/format-duration duration))]])]])
@@ -31,8 +31,8 @@
      [:div.flex.items-center.my-2
       (if uploader-url
         [:a {:href (rfe/href :tubo.routes/channel nil {:url uploader-url}) :title uploader-name}
-         [:h1.line-clamp-1.text-gray-300.font-bold.pr-2 uploader-name]]
-        [:h1.line-clamp-1.text-gray-300.font-bold.pr-2 uploader-name])
+         [:h1.line-clamp-1.text-neutral-800.dark:text-gray-300.font-bold.pr-2 uploader-name]]
+        [:h1.line-clamp-1.text-neutral-800.dark:text-gray-300.font-bold.pr-2 uploader-name])
       (when verified?
         [:i.fa-solid.fa-circle-check])])
    (when subscriber-count
diff --git a/src/frontend/tubo/views.cljs b/src/frontend/tubo/views.cljs
index 07fd64f..8ee51f9 100644
--- a/src/frontend/tubo/views.cljs
+++ b/src/frontend/tubo/views.cljs
@@ -37,49 +37,49 @@
                                     :params {}
                                     :query  {:q global-search :serviceId service-id}}]))}
        [:div
-        [:input.bg-transparent.border-none.rounded.py-2.px-1.focus:ring-transparent.placeholder-white.box-border.w-40.xs:w-auto
-         {:type "text"
-          :value global-search
-          :on-change #(rf/dispatch [::events/change-global-search (.. % -target -value)])
+        [:input.bg-transparent.text-white.border-none.rounded.py-2.px-1.focus:ring-transparent.placeholder-white.box-border.w-40.xs:w-auto
+         {:type        "text"
+          :value       global-search
+          :on-change   #(rf/dispatch [::events/change-global-search (.. % -target -value)])
           :placeholder "Search for something"}]]
        [:div.flex.items-center.px-2
         [:button.text-white
          {:type "submit"}
          [:i.fas.fa-search]]]]
-      [:div.cursor-pointer.px-2.ml:hidden
+      [:div.cursor-pointer.px-2.ml:hidden.text-white
        {:on-click #(rf/dispatch [::events/toggle-mobile-nav])}
        [:i.fa-solid.fa-bars]]
-      [:div.bg-neutral-900.items-center.fixed.overflow-x-hidden.min-h-screen.w-60.top-0.shadow-xl.shadow-black.pt-8
+      [:div.bg-white.dark:bg-neutral-900.items-center.fixed.overflow-x-hidden.min-h-screen.w-60.top-0.shadow-xl.shadow-black.pt-8
        {:class (str "ease-in-out delay-75 transition-[right] "
-                    "ml:w-full ml:flex ml:min-h-0 ml:relative ml:text-white ml:bg-transparent ml:shadow-none ml:p-0 ml:right-0 "
+                    "ml:w-full ml:flex ml:min-h-0 ml:relative ml:bg-transparent ml:shadow-none ml:p-0 ml:right-0 "
                     (if mobile-nav? "right-0" "right-[-245px]"))}
        [:div.cursor-pointer.px-2.ml:hidden.absolute.top-1.right-2
         {:on-click #(rf/dispatch [::events/toggle-mobile-nav])}
         [:i.fa-solid.fa-close.text-xl]]
        [:div.relative.flex.flex-col.items-center.justify-center.ml:flex-row
-        [:div.w-full.box-border.z-10
+        [:div.w-full.box-border.z-10.ml:text-white
          [:select.border-none.focus:ring-transparent.bg-blend-color-dodge.font-bold.font-nunito.px-5.w-full
           {:on-change #(rf/dispatch [::events/change-service (js/parseInt (.. % -target -value))])
-           :value service-id
-           :style {:background "transparent"}}
+           :value     service-id
+           :style     {:background "transparent"}}
           (when services
             (for [service services]
               [:option.bg-neutral-900.border-none {:value (:id service) :key (:id service)}
                (-> service :info :name)]))]]
-        [:div.flex.absolute.min-h-full.top-0.right-4.ml:right-0.items-center.justify-end.z-0
+        [:div.flex.absolute.min-h-full.top-0.right-4.ml:right-0.items-center.justify-end.z-0.ml:text-white
          [:i.fa-solid.fa-caret-down]]]
        [:div.relative.flex-auto.ml:pl-4
-        [:ul.flex.font-roboto.flex-col.ml:flex-row
+        [:ul.flex.font-roboto.flex-col.ml:flex-row.ml:text-white
          (for [kiosk available-kiosks]
            [:li.px-5.py-2 {:key kiosk}
             [:a {:href (rfe/href ::routes/kiosk nil {:serviceId service-id
-                                                     :kioskId kiosk})}
+                                                     :kioskId   kiosk})}
              kiosk]])]]]]]))
 
 (defn footer
   []
   [:footer
-   [:div.bg-black.text-gray-300.p-5.text-center.w-full
+   [:div.bg-neutral-300.dark:bg-black.dark:text-gray-300.p-5.text-center.w-full
     [:div.flex.flex-col.justify-center.items-center
      [:div.flex.items-center.justify-center
       [:div.items-center
@@ -89,7 +89,7 @@
 (defn app
   []
   (let [current-match @(rf/subscribe [:current-match])]
-    [:div.min-h-screen.flex.flex-col.h-full.text-white.bg-neutral-900.relative
+    [:div.min-h-screen.flex.flex-col.h-full.dark:text-white.dark:bg-neutral-900.relative
      [navbar current-match]
      [:div.flex.flex-col.justify-between.relative.font-nunito {:style {:minHeight "100vh"}}
       (when-let [view (-> current-match :data :view)]
diff --git a/src/frontend/tubo/views/stream.cljs b/src/frontend/tubo/views/stream.cljs
index e3a0222..2a7c180 100644
--- a/src/frontend/tubo/views/stream.cljs
+++ b/src/frontend/tubo/views/stream.cljs
@@ -22,7 +22,7 @@
         {:keys [content id] :as stream-format} @(rf/subscribe [:stream-format])
         page-loading? @(rf/subscribe [:show-page-loading])
         service-color @(rf/subscribe [:service-color])]
-    [:div.flex.flex-col.items-center.justify-center.text-white.flex-auto
+    [:div.flex.flex-col.items-center.justify-center.dark:text-white.flex-auto
      (if page-loading?
        [loading/loading-icon service-color "text-5xl"]
        [:div.w-full.pb-4.relative {:class "ml:w-4/5 xl:w-3/5"}
@@ -40,7 +40,7 @@
         [:div.px-4.ml:p-0
          [:div.flex.flex.w-full.mt-3
           (when stream-format
-            [:div.relative.flex.bg-stone-800.flex-col.items-center.justify-center.z-10.mr-2.border.rounded.border-black
+            [:div.relative.flex.dark:bg-stone-800.flex-col.items-center.justify-center.z-10.mr-2.border.rounded.border-black
              [:select.border-none.focus:ring-transparent.bg-blend-color-dodge.pl-4.pr-8.w-full
               {:on-change #(rf/dispatch [::events/change-stream-format (.. % -target -value)])
                :value id
@@ -52,12 +52,12 @@
              [:div.flex.absolute.min-h-full.top-0.right-4.items-center.justify-end
               {:style {:zIndex "-1"}}
               [:i.fa-solid.fa-caret-down]]])
-          [:button.border.rounded.border-black.px-3.py-1.bg-stone-800
+          [:button.border.rounded.border-black.px-3.py-1.dark:bg-stone-800
            {:on-click #(rf/dispatch [::events/switch-to-global-player
                                      {:uploader-name uploader-name :uploader-url uploader-url
                                       :name name :url url :stream content :service-color service-color}])}
            [:i.fa-solid.fa-headphones]]
-          [:button.border.rounded.border-black.px-3.py-1.bg-stone-800.mx-2
+          [:button.border.rounded.border-black.px-3.py-1.dark:bg-stone-800.mx-2
            [:a {:href url}
             [:i.fa-solid.fa-external-link-alt]]]]
          [:div.flex.flex-col.py-1.comments