fix: use theme-aware background colors for analyzers

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

@@ -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
+      // Clear canvas with parent background color
-      ctx.fillStyle = 'rgb(15, 15, 15)';
+      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
+      <div className="w-full h-[calc(100%-24px)] rounded bg-muted/30">
-        ref={canvasRef}
+        <canvas
-        className="w-full h-[calc(100%-24px)] rounded"
+          ref={canvasRef}
-      />
+          className="w-full h-full rounded"
+        />
+      </div>
     </div>
   );
 }

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
+          // Background to blue
-          r = 0;
+          const t = value / 64;
-          g = 0;
+          r = Math.round(bgR * (1 - t));
-          b = value * 4;
+          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
+      <div className="w-full h-[calc(100%-24px)] rounded bg-muted/30">
-        ref={canvasRef}
+        <canvas
-        className="w-full h-[calc(100%-24px)] rounded"
+          ref={canvasRef}
-      />
+          className="w-full h-full rounded"
+        />
+      </div>
     </div>
   );
 }