fix: improve contrast and theming for enlarged cover view and hover colors

js/ui.js

@@ -216,8 +216,10 @@ export class UIRenderer {
         if (backgroundSettings.isEnabled() && imageUrl) {
             bgElement.style.backgroundImage = `url('${imageUrl}')`;
             bgElement.classList.add('active');
+            document.body.classList.add('has-page-background');
         } else {
             bgElement.classList.remove('active');
+            document.body.classList.remove('has-page-background');
             // Delay clearing the image to allow transition
             setTimeout(() => {
                 if (!bgElement.classList.contains('active')) {
@@ -247,6 +249,18 @@ export class UIRenderer {
         root.style.setProperty('--highlight-rgb', `${r}, ${g}, ${b}`);
         root.style.setProperty('--active-highlight', color);
         root.style.setProperty('--ring', color);
+
+        // Calculate a safe hover color (darken if too light)
+        let hoverColor;
+        if (brightness > 200) {
+             const dr = Math.floor(r * 0.85);
+             const dg = Math.floor(g * 0.85);
+             const db = Math.floor(b * 0.85);
+             hoverColor = `rgba(${dr}, ${dg}, ${db}, 0.25)`;
+        } else {
+             hoverColor = `rgba(${r}, ${g}, ${b}, 0.15)`;
+        }
+        root.style.setProperty('--track-hover-bg', hoverColor);
     }
 
     resetVibrantColor() {
@@ -257,6 +271,7 @@ export class UIRenderer {
         root.style.removeProperty('--highlight-rgb');
         root.style.removeProperty('--active-highlight');
         root.style.removeProperty('--ring');
+        root.style.removeProperty('--track-hover-bg');
     }
 
     showFullscreenCover(track, nextTrack) {

styles.css

@@ -12,6 +12,7 @@
     --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.2);
     --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
     --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.8);
+    --cover-filter: blur(30px) brightness(0.3);
 }
 
 :root[data-theme="monochrome"] {
@@ -32,6 +33,7 @@
     --highlight-rgb: 255, 255, 255;
     --active-highlight: var(--highlight);
     --explicit-badge: #fafafa;
+    --cover-filter: blur(30px) brightness(0.3);
 }
 
 :root[data-theme="dark"] {
@@ -133,6 +135,7 @@
     --active-highlight: var(--highlight);
     --explicit-badge: #ef4444;
     --explicit-badge-foreground: #ffffff;
+    --cover-filter: blur(30px) brightness(1.1) opacity(0.8);
 }
 
 *, *::before, *::after {
@@ -373,6 +376,14 @@ kbd {
     border-color: var(--ring);
 }
 
+body.has-page-background .search-bar input {
+    background-color: var(--background);
+}
+
+body.has-page-background .track-item:hover {
+    background-color: var(--track-hover-bg, var(--secondary));
+}
+
 .page {
     display: none;
 }
@@ -1234,7 +1245,7 @@ input:checked + .slider::before {
     justify-content: center;
     animation: fadeIn 0.3s ease;
     overflow: hidden;
-    background-color: #000; /* Solid background to prevent see-through */
+    background-color: var(--background);
     /* Use a CSS variable for the image so we can set it in JS */
     --bg-image: none;
     padding-bottom: 90px; /* Account for desktop player bar */
@@ -1247,7 +1258,7 @@ input:checked + .slider::before {
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
-    filter: blur(30px) brightness(0.4);
+    filter: var(--cover-filter);
     z-index: -1;
     background-image: var(--bg-image);
 }
@@ -1268,9 +1279,9 @@ input:checked + .slider::before {
     position: absolute;
     top: 1rem;
     right: 1rem;
-    background: rgba(0, 0, 0, 0.5);
+    background-color: var(--background);
     border: none;
-    color: #fff;
+    color: var(--foreground);
     font-size: 2rem;
     width: 48px;
     height: 48px;
@@ -1279,12 +1290,13 @@ input:checked + .slider::before {
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: background-color 0.2s;
+    transition: opacity 0.2s;
     z-index: 10;
+    opacity: 0.5;
 }
 
 #close-fullscreen-cover-btn:hover {
-    background-color: rgba(0, 0, 0, 0.8);
+    opacity: 0.8;
 }
 
 #fullscreen-cover-image {
@@ -1307,14 +1319,14 @@ input:checked + .slider::before {
     font-size: 2rem;
     font-weight: 700;
     margin-bottom: 0.5rem;
-    color: #ffffff;
+    color: var(--foreground);
     text-shadow: 0 2px 10px rgba(0,0,0,0.5);
     word-break: break-word;
 }
 
 #fullscreen-track-artist {
     font-size: 1.25rem;
-    color: rgba(255, 255, 255, 0.8);
+    color: var(--muted-foreground);
     font-weight: 500;
     text-shadow: 0 2px 10px rgba(0,0,0,0.5);
 }
@@ -1322,7 +1334,7 @@ input:checked + .slider::before {
 #fullscreen-next-track {
     margin-top: 1.5rem;
     font-size: 0.9rem;
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--muted-foreground);
     text-shadow: 0 1px 4px rgba(0,0,0,0.5);
     display: flex;
     flex-direction: column;
@@ -1343,7 +1355,7 @@ input:checked + .slider::before {
 
 #fullscreen-next-track .value {
     font-weight: 500;
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--foreground);
 }
 
 @media (max-width: 768px) {