Implemented MutationObserver to detect theme changes:
- Added themeKey state that increments on theme change
- MutationObserver watches document.documentElement for class changes
- Detects when "dark" class is toggled
- Added themeKey to waveform effect dependencies
- Canvas automatically redraws with new theme colors
How it works:
1. Observer listens for class attribute changes on <html>
2. When dark mode is toggled, themeKey increments
3. useEffect dependency triggers canvas redraw
4. getComputedStyle reads fresh --color-waveform-bg value
5. Waveform renders with correct theme background
Benefits:
- Seamless theme transitions
- Waveform colors always match current theme
- No manual refresh needed
- Automatic cleanup on unmount
Now switching between light/dark themes instantly updates
all waveform backgrounds with the correct theme colors!
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Sebastian Krüger
ee24f04d76