From 2386d728e65713eaceda3263c23d252e374ee3c7 Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Sat, 28 Mar 2026 11:41:16 +0530
Subject: [PATCH] Fix for theme switching.

Closes #4175
Closes #4177
---
 src/app.css                    | 2 ++
 src/components/ChaptersBar.vue | 8 ++++----
 src/components/NavBar.vue      | 5 ++---
 src/router/router.js           | 3 ++-
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/app.css b/src/app.css
index 90fa5777..541d8dd9 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,5 +1,7 @@
 @import "tailwindcss";
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 @theme {
     --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
         "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
diff --git a/src/components/ChaptersBar.vue b/src/components/ChaptersBar.vue
index e647886b..d1e4ba29 100644
--- a/src/components/ChaptersBar.vue
+++ b/src/components/ChaptersBar.vue
@@ -38,7 +38,7 @@
             @click="$emit('seek', chapter.start)"
         >
             <span class="w-5 shrink-0 text-center text-xs" v-text="index + 1" />
-            <img class="h-10 w-16 shrink-0 rounded object-cover" :src="chapter.image" :alt="chapter.title" />
+            <img class="h-10 w-16 shrink-0 rounded-sm object-cover" :src="chapter.image" :alt="chapter.title" />
             <div class="flex min-w-0 flex-col">
                 <span class="truncate text-sm" :title="chapter.title" v-text="chapter.title" />
                 <span class="text-xs font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
@@ -53,13 +53,13 @@
         <div
             v-for="(chapter, index) in chapters"
             :key="chapter.start"
-            class="w-32 flex-none cursor-pointer rounded p-1"
+            class="w-32 flex-none cursor-pointer rounded-sm p-1"
             :class="{ 'bg-red-500/50': isCurrentChapter(index) }"
             @click="$emit('seek', chapter.start)"
         >
-            <img class="aspect-video w-full rounded object-cover" :src="chapter.image" :alt="chapter.title" />
+            <img class="aspect-video w-full rounded-sm object-cover" :src="chapter.image" :alt="chapter.title" />
             <div class="mt-1 px-0.5">
-                <span class="line-clamp-2 text-xs leading-tight" :title="chapter.title" v-text="chapter.title" />
+                <span class="line-clamp-2 text-xs/tight" :title="chapter.title" v-text="chapter.title" />
                 <span class="text-xs font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
             </div>
         </div>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 818f3fb5..7cd6b305 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -147,7 +147,6 @@ import ClearButton from "./ui/ClearButton.vue";
 import hotkeys from "hotkeys-js";
 import { fetchJson, authApiUrl, getAuthToken } from "@/composables/useApi.js";
 import { getPreferenceBoolean, getPreferenceString } from "@/composables/usePreferences.js";
-import { getHomePage } from "@/composables/useMisc.js";
 
 const router = useRouter();
 const route = useRoute();
@@ -158,9 +157,10 @@ const searchSuggestions = ref(null);
 const searchText = ref("");
 const suggestionsVisible = ref(false);
 const showTopNav = ref(false);
-const homePagePath = ref(import.meta.env.BASE_URL);
 const registrationDisabled = ref(false);
 
+const homePagePath = import.meta.env.BASE_URL;
+
 const shouldShowLogin = computed(() => {
     return getAuthToken() == null;
 });
@@ -253,7 +253,6 @@ onMounted(() => {
     fetchAuthConfig();
     updateSearchTextFromURLSearchParams();
     focusOnSearchBar();
-    homePagePath.value = getHomePage();
 });
 </script>
 
diff --git a/src/router/router.js b/src/router/router.js
index 4002e03e..de268447 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -1,10 +1,11 @@
 import { createRouter, createWebHistory } from "vue-router";
+import { getHomePage } from "@/composables/useMisc.js";
 
 const routes = [
     {
         path: "/",
         name: "Home",
-        component: () => import("../components/TrendingPage.vue"),
+        redirect: () => getHomePage() ?? "/trending",
     },
     {
         path: "/trending",