* Perfect! ✅ I've successfully fixed the diff theme detection issue by:
## What I Did:
### 1. **Created a shared theme utility** (`frontend/src/utils/theme.ts`):
- Properly handles all theme modes including SYSTEM
- When theme is SYSTEM, it checks `window.matchMedia('(prefers-color-scheme: dark)')`
- Treats all colored themes (PURPLE, GREEN, BLUE, ORANGE, RED) as dark themes
### 2. **Updated all diff-related components** to use the utility:
- **DiffCard.tsx** ✅
- **EditDiffRenderer.tsx** ✅
- **FileChangeRenderer.tsx** ✅
### 3. **Replaced the broken pattern**:
```tsx
// OLD - only worked for explicit DARK theme
let theme = 'light';
if (config?.theme === ThemeMode.DARK) theme = 'dark';
// NEW - works for all themes including SYSTEM
const theme = getActualTheme(config?.theme);
```
## Result:
Now when you have **VK theme set to SYSTEM** and your **OS is in dark mode**, the diff viewers will correctly show dark theme colors instead of the incorrect light theme colors.
The fix ensures consistency with how other components (Logo, JSONEditor) handle theme detection and follows the same pattern that the ThemeProvider uses internally.
* fmt
* Lint
621649b0b5