fix: visualizer mode background and fullscreen color extraction

js/ui.js

@@ -665,6 +665,7 @@ export class UIRenderer {
         if (image.src !== coverUrl) {
             image.src = coverUrl;
             overlay.style.setProperty('--bg-image', `url('${coverUrl}')`);
+            this.extractAndApplyColor(coverUrl);
         }
 
         const qualityBadge = createQualityBadgeHTML(track);

js/visualizers/particles.js

@@ -16,12 +16,18 @@ export class ParticlesPreset {
 
     draw(ctx, canvas, analyser, dataArray, params) {
         const { width, height } = canvas;
-        const { kick, intensity, primaryColor } = params;
+        const { kick, intensity, primaryColor, mode } = params;
         const sensitivity = params.sensitivity || 1.0;
+        const isDark = document.documentElement.getAttribute('data-theme') !== 'light';
 
         // Clear background
         ctx.clearRect(0, 0, width, height);
 
+        if (mode !== 'blended') {
+            ctx.fillStyle = isDark ? '#050505' : '#e6e6e6';
+            ctx.fillRect(0, 0, width, height);
+        }
+
         // Manage particle count
         if (this.particles.length !== this.particleCount) {
             this.particles = [];

js/visualizers/unknown_pleasures.js

@@ -88,7 +88,14 @@ export class UnknownPleasuresPreset {
         }
 
         const { width, height } = canvas;
+        const { mode } = params;
+        const isDark = document.documentElement.getAttribute('data-theme') !== 'light';
+
         ctx.clearRect(0, 0, width, height);
+        if (mode !== 'blended') {
+            ctx.fillStyle = isDark ? '#050505' : '#e6e6e6';
+            ctx.fillRect(0, 0, width, height);
+        }
 
         const size = Math.hypot(width, height) * 1.42;