Add dark mode to the diff viewer.

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

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.


Commits

Files

    Loading...