From 3818d9369639dd4e0590b8454a64356fc9d84215 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 19 Nov 2025 01:46:27 +0100
Subject: [PATCH] fix: use theme-aware background colors for analyzers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Updated both FrequencyAnalyzer and Spectrogram to use
light gray background (bg-muted/30) that adapts to the theme:

- Wrapped canvas in bg-muted/30 container
- FrequencyAnalyzer reads parent background color for canvas fill
- Spectrogram interpolates from background color to blue for low values
- Both analyzers now work properly in light and dark themes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/analysis/FrequencyAnalyzer.tsx | 17 +++++++++-----
 components/analysis/Spectrogram.tsx       | 28 +++++++++++++++--------
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/components/analysis/FrequencyAnalyzer.tsx b/components/analysis/FrequencyAnalyzer.tsx
index fb5f710..ea8d50b 100644
--- a/components/analysis/FrequencyAnalyzer.tsx
+++ b/components/analysis/FrequencyAnalyzer.tsx
@@ -29,13 +29,16 @@ export function FrequencyAnalyzer({ analyserNode, className }: FrequencyAnalyzer
     const bufferLength = analyserNode.frequencyBinCount;
     const dataArray = new Uint8Array(bufferLength);
 
+    // Get background color from computed styles
+    const bgColor = getComputedStyle(canvas.parentElement!).backgroundColor;
+
     const draw = () => {
       animationFrameRef.current = requestAnimationFrame(draw);
 
       analyserNode.getByteFrequencyData(dataArray);
 
-      // Clear canvas
-      ctx.fillStyle = 'rgb(15, 15, 15)';
+      // Clear canvas with parent background color
+      ctx.fillStyle = bgColor;
       ctx.fillRect(0, 0, rect.width, rect.height);
 
       const barWidth = rect.width / bufferLength;
@@ -77,10 +80,12 @@ export function FrequencyAnalyzer({ analyserNode, className }: FrequencyAnalyzer
       <div className="text-[10px] font-bold text-accent uppercase tracking-wider mb-2">
         Frequency Analyzer
       </div>
-      <canvas
-        ref={canvasRef}
-        className="w-full h-[calc(100%-24px)] rounded"
-      />
+      <div className="w-full h-[calc(100%-24px)] rounded bg-muted/30">
+        <canvas
+          ref={canvasRef}
+          className="w-full h-full rounded"
+        />
+      </div>
     </div>
   );
 }
diff --git a/components/analysis/Spectrogram.tsx b/components/analysis/Spectrogram.tsx
index ba2107a..352329e 100644
--- a/components/analysis/Spectrogram.tsx
+++ b/components/analysis/Spectrogram.tsx
@@ -30,6 +30,13 @@ export function Spectrogram({ analyserNode, className }: SpectrogramProps) {
     const bufferLength = analyserNode.frequencyBinCount;
     const dataArray = new Uint8Array(bufferLength);
 
+    // Get background color from computed styles
+    const bgColorStr = getComputedStyle(canvas.parentElement!).backgroundColor;
+    const bgMatch = bgColorStr.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    const bgR = bgMatch ? parseInt(bgMatch[1]) : 240;
+    const bgG = bgMatch ? parseInt(bgMatch[2]) : 240;
+    const bgB = bgMatch ? parseInt(bgMatch[3]) : 240;
+
     // Initialize spectrogram data
     spectrogramDataRef.current = ctx.createImageData(rect.width, rect.height);
 
@@ -61,13 +68,14 @@ export function Spectrogram({ analyserNode, className }: SpectrogramProps) {
         const freqIndex = Math.floor((1 - y / rect.height) * bufferLength);
         const value = dataArray[freqIndex];
 
-        // Color mapping: black (0) -> blue -> cyan -> green -> yellow -> red (255)
+        // Color mapping: background color (0) -> blue -> cyan -> green -> yellow -> red (255)
         let r, g, b;
         if (value < 64) {
-          // Black to blue
-          r = 0;
-          g = 0;
-          b = value * 4;
+          // Background to blue
+          const t = value / 64;
+          r = Math.round(bgR * (1 - t));
+          g = Math.round(bgG * (1 - t));
+          b = Math.round(bgB * (1 - t) + 255 * t);
         } else if (value < 128) {
           // Blue to cyan
           r = 0;
@@ -118,10 +126,12 @@ export function Spectrogram({ analyserNode, className }: SpectrogramProps) {
       <div className="text-[10px] font-bold text-accent uppercase tracking-wider mb-2">
         Spectrogram
       </div>
-      <canvas
-        ref={canvasRef}
-        className="w-full h-[calc(100%-24px)] rounded"
-      />
+      <div className="w-full h-[calc(100%-24px)] rounded bg-muted/30">
+        <canvas
+          ref={canvasRef}
+          className="w-full h-full rounded"
+        />
+      </div>
     </div>
   );
 }