vibe-kanban icon indicating copy to clipboard operation
vibe-kanban copied to clipboard

Improve diff viewer color styling for better theme support (Vibe Kanban)

Open stunningpixels opened this issue 3 months ago • 1 comments

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-normal lightness (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

stunningpixels avatar Jan 09 '26 17:01 stunningpixels