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
-      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>
   );
 }