Add dark mode to the diff viewer.

Review Request #13779 — Created April 24, 2024 and submitted

Information

Review Board
release-7.x

Reviewers

This change updates the diff viewer to support dark mode. We use the
following palette:

  • Diff headers: Cool grey
  • Equals lines: Black background, dark grey line number background
  • Insert lines: Dark leafy green background, less-dark line number
    background
  • Replace lines: Dark tan background, light-tan line number background
  • Delete lines: Dark muted red, less-red line number background.
  • In-line changes: goldenrod background.

There are some structural changes to how we supply colors to the diff
viewer. Instead of several complex rules used to override colors and
prioritize borders, we now use CSS variables to define all our colors
for a <tbody>, letting us apply them in a standard way. Borders are
now alpha-transparent colors, helping to visually merge borders
together.

The colors are defined by the syntax highlighting theme. This will later
allow other diff themes to choose colors more appropriate for their
styles. We provide a default set. These colors are chosen based on
what both looks good and provides suitable contrast for all chunk types,
and is not tied to our standard color palette.

There's also a fix included here for showing new and deleted files
correctly in the mobile diff viewer.

At this time, binary file review does not have a dark mode appearance.
That will need to be addressed separately.

Tested a variety of changes in light and dark mode, mobile and desktop.

Tested highlighted lines and in-page diff navigation.

There will no doubt be further changes needed as we test more.

Summary ID
Add dark mode to the diff viewer.
This change updates the diff viewer to support dark mode. We use the following palette: * Diff headers: Cool grey * Equals lines: Black background, dark grey line number background * Insert lines: Dark leafy green background, less-dark line number background * Replace lines: Dark tan background, light-tan line number background * Delete lines: Dark muted red, less-red line number background. * In-line changes: goldenrod background. There are some structural changes to how we supply colors to the diff viewer. Instead of several complex rules used to override colors and prioritize borders, we now use CSS variables to define all our colors for a `<tbody>`, letting us apply them in a standard way. Borders are now alpha-transparent colors, helping to visually merge borders together. The colors are defined by the syntax highlighting theme. This will later allow other diff themes to choose colors more appropriate for their styles. We provide a default set. These colors are chosen based on what both looks good and provides suitable contrast for all chunk types, and is not tied to our standard color palette. There's also a fix included here for showing new and deleted files correctly in the mobile diff viewer. At this time, binary file review does not have a dark mode appearance. That will need to be addressed separately.
9576d662a3c98555295deb6c0efe08d3b2f67df8

maubin
  1. Ship It!
  2. 
      
david
  1. Ship It!
  2. 
      
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to release-7.x (b9f33cc)