From bfb8cc02745862b437c157e1c8afea1e11068526 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Sun, 24 May 2026 01:45:39 +0200
Subject: [PATCH] fix: player dropdown light-mode visibility

---
 static/player/mode.ts                    |  4 ++--
 templates/components/video_player.gohtml | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/static/player/mode.ts b/static/player/mode.ts
index 7a6e201..99e069d 100644
--- a/static/player/mode.ts
+++ b/static/player/mode.ts
@@ -48,13 +48,13 @@ export const updateModeButtons = (): void => {
   const m = state.currentMode;
 
   dub?.classList.toggle('text-accent', m === 'dub');
-  dub?.classList.toggle('text-white', m !== 'dub');
+  dub?.classList.toggle('text-foreground', m !== 'dub');
   dub?.classList.toggle('opacity-50', !state.availableModes.includes('dub'));
   dub?.classList.toggle('cursor-not-allowed', !state.availableModes.includes('dub'));
   dub && (dub.disabled = !state.availableModes.includes('dub'));
 
   sub?.classList.toggle('text-accent', m === 'sub');
-  sub?.classList.toggle('text-white', m !== 'sub');
+  sub?.classList.toggle('text-foreground', m !== 'sub');
   sub?.classList.toggle('opacity-50', !state.availableModes.includes('sub'));
   sub?.classList.toggle('cursor-not-allowed', !state.availableModes.includes('sub'));
   sub && (sub.disabled = !state.availableModes.includes('sub'));
diff --git a/templates/components/video_player.gohtml b/templates/components/video_player.gohtml
index b05a3ab..9259f0f 100644
--- a/templates/components/video_player.gohtml
+++ b/templates/components/video_player.gohtml
@@ -76,27 +76,27 @@
             <div data-content class="hidden absolute z-50 w-64 bg-background-button rounded-none shadow-soft ring-1 ring-border right-0 bottom-full mb-2">
               <div class="flex flex-col py-1">
                 <div class="flex items-center justify-between px-5 py-2.5">
-                  <span class="text-[15px] font-medium text-white">Autoplay</span>
+                  <span class="text-[15px] font-medium text-foreground">Autoplay</span>
                   <label class="relative inline-flex cursor-pointer items-center">
                     <input type="checkbox" data-autoplay class="peer sr-only" checked />
-                    <div class="peer-checked:bg-accent peer h-5 w-9 rounded-full bg-white/20 transition-colors after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4 after:rounded-full after:bg-white after:transition-all peer-checked:after:translate-x-full"></div>
+                    <div class="peer-checked:bg-accent peer h-5 w-9 rounded-full bg-foreground-muted/20 transition-colors after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4 after:rounded-full after:bg-white after:transition-all peer-checked:after:translate-x-full"></div>
                   </label>
                 </div>
                 <div class="flex items-center justify-between px-5 py-2.5">
-                  <span class="text-[15px] font-medium text-white">Auto-skip</span>
+                  <span class="text-[15px] font-medium text-foreground">Auto-skip</span>
                   <label class="relative inline-flex cursor-pointer items-center">
                     <input type="checkbox" data-autoskip class="peer sr-only" />
-                    <div class="peer-checked:bg-accent peer h-5 w-9 rounded-full bg-white/20 transition-colors after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4 after:rounded-full after:bg-white after:transition-all peer-checked:after:translate-x-full"></div>
+                    <div class="peer-checked:bg-accent peer h-5 w-9 rounded-full bg-foreground-muted/20 transition-colors after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4 after:rounded-full after:bg-white after:transition-all peer-checked:after:translate-x-full"></div>
                   </label>
                 </div>
                 <div class="my-1 h-px w-full bg-white/10"></div>
                 <div class="py-1">
-                  <span class="mb-1 block px-5 text-xs font-medium tracking-wider text-neutral-400 uppercase">Audio / Subtitles</span>
+                  <span class="mb-1 block px-5 text-xs font-medium tracking-wider text-foreground-muted">Audio / Subtitles</span>
                   <div class="flex flex-col">
-                    <button data-mode-dub class="flex items-center justify-between px-5 py-2.5 text-left transition-colors hover:bg-white/10 text-white focus:outline-none">
+                    <button data-mode-dub class="flex items-center justify-between px-5 py-2.5 text-left transition-colors hover:bg-surface-hover text-foreground focus:outline-none">
                       <span class="text-sm font-medium">English (Dub)</span>
                     </button>
-                    <button data-mode-sub class="flex items-center justify-between px-5 py-2.5 text-left transition-colors hover:bg-white/10 text-white focus:outline-none">
+                    <button data-mode-sub class="flex items-center justify-between px-5 py-2.5 text-left transition-colors hover:bg-surface-hover text-foreground focus:outline-none">
                       <span class="text-sm font-medium">Japanese (Sub)</span>
                     </button>
                     <div class="hidden px-5 py-2 flex flex-col gap-1">