From 1c8b5da6270e4c947406e766093ad235c46090c2 Mon Sep 17 00:00:00 2001
From: Wally Hackenslacker <mastor89@protonmail.com>
Date: Mon, 23 Mar 2026 20:43:50 -0400
Subject: [PATCH] style: dropdowns follow dark theme; improve muted text
 contrast

---
 viewer/static/css/styles.css | 36 +++++++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/viewer/static/css/styles.css b/viewer/static/css/styles.css
index dadeaa5..f41e822 100644
--- a/viewer/static/css/styles.css
+++ b/viewer/static/css/styles.css
@@ -201,6 +201,40 @@ body {
     border-radius: 8px;
 }
 
+/* Ensure dropdowns follow the active theme and receive a subtle drop shadow */
+.dropdown-menu {
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
+}
+
+/* Dark theme specific dropdown styles */
+body.theme-dark .dropdown-menu {
+    background: var(--panel-strong);
+    color: var(--text);
+    border: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+body.theme-dark .dropdown-menu .dropdown-item {
+    color: var(--text);
+}
+
+body.theme-dark .dropdown-menu .dropdown-item:hover,
+body.theme-dark .dropdown-menu .dropdown-item:focus {
+    background: rgba(255, 255, 255, 0.03);
+    color: var(--accent);
+}
+
+body.theme-dark .dropdown-menu .small,
+body.theme-dark .dropdown-menu .text-muted {
+    color: var(--muted);
+}
+
+/* Make muted/helper text readable in dark theme */
+body.theme-dark .text-muted,
+body.theme-dark .small.text-muted {
+    /* use the theme text color with reduced opacity for contrast */
+    color: rgba(236, 240, 244, 0.78) !important;
+}
+
 .thumb-card {
     width: 128px;
     display: block;
@@ -292,7 +326,7 @@ body {
 }
 
 .sort-menu .dropdown-item {
-    color: #1e2f40;
+    color: var(--text);
     font-weight: 600;
     font-size: 14px;
 }