• 
      

    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