From 2a0d6cd6730a7c2f8e26db3e400ce4d5d98412a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 18 Nov 2025 08:34:14 +0100
Subject: [PATCH] fix: replace hardcoded colors with theme variables in Track
 component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaced hardcoded slate colors with theme-aware variables:

Track.tsx changes:
- Waveform area: bg-slate-900 → bg-waveform-bg
- Effects section: bg-slate-900/50 → bg-muted/50
- Expanded effects: bg-slate-900/30 → bg-muted/70
- Canvas background: rgb(15, 23, 42) → --color-waveform-bg

This ensures that:
- Light theme shows proper light gray backgrounds
- Dark theme shows proper dark gray backgrounds
- All components respect theme colors
- No more hardcoded colors that bypass the theme

Now the entire UI properly responds to theme changes with
the harmonized gray palettes we configured.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/tracks/Track.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/components/tracks/Track.tsx b/components/tracks/Track.tsx
index 17cc962..497c6de 100644
--- a/components/tracks/Track.tsx
+++ b/components/tracks/Track.tsx
@@ -112,8 +112,9 @@ export function Track({
     const width = rect.width;
     const height = rect.height;
 
-    // Clear canvas
-    ctx.fillStyle = 'rgb(15, 23, 42)';
+    // Clear canvas with theme color
+    const bgColor = getComputedStyle(canvas).getPropertyValue('--color-waveform-bg') || 'rgb(15, 23, 42)';
+    ctx.fillStyle = bgColor;
     ctx.fillRect(0, 0, width, height);
 
     const buffer = track.audioBuffer;
@@ -396,7 +397,7 @@ export function Track({
 
       {/* Right: Waveform Area (Flexible Width) */}
       <div
-        className="flex-1 relative bg-slate-900 border-b border-border cursor-pointer"
+        className="flex-1 relative bg-waveform-bg border-b border-border cursor-pointer"
         onClick={onSelect}
       >
         {track.audioBuffer ? (
@@ -440,7 +441,7 @@ export function Track({
 
       {/* Bottom: Effects Section (Collapsible, Full Width) */}
       {!track.collapsed && (
-        <div className="bg-slate-900/50 border-b border-border/50">
+        <div className="bg-muted/50 border-b border-border/50">
           {/* Effects Header - clickable to toggle */}
           <div
             className="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors"
@@ -491,7 +492,7 @@ export function Track({
 
           {/* Horizontal scrolling device rack - expanded state */}
           {showEffects && (
-            <div className="overflow-x-auto custom-scrollbar px-3 py-3 bg-slate-900/30">
+            <div className="overflow-x-auto custom-scrollbar px-3 py-3 bg-muted/70">
               <div className="flex gap-2">
                 {track.effectChain.effects.length === 0 ? (
                   <div className="text-xs text-muted-foreground text-center py-8 w-full">