vibe-kanban
vibe-kanban copied to clipboard
Improve diff viewer color styling for better theme support (Vibe Kanban)
Summary
Improved the diff viewer styling with better color consistency across light/dark themes and legacy/new design systems.
Changes
-
Added theme-aware CSS variables: Introduced dedicated variables (
--line-added,--line-removed,--line-unchanged,--line-number-color) for diff highlighting that adapt to:- Light and dark modes
- Legacy and new design systems
-
Simplified diff color definitions: Replaced complex
color-mix()calculations with cleaner CSS variable references for better maintainability -
Improved visual distinction: Updated diff highlight colors for better readability:
- Added lines: green tones (hsl 160°/130° depending on theme)
- Removed lines: red tones (hsl 10°/12° depending on theme)
-
Minor text adjustment: Slightly increased
--text-normallightness (16% → 20%) in light mode for improved readability
Files Modified
-
frontend/src/styles/diff-style-overrides.css- Main diff styling changes -
frontend/src/styles/new/index.css- Text color adjustment
This PR was written using Vibe Kanban