23

Can't see deleted code

I have come across a situation in dark mode. This is a serious contrast problem according to the following preview:

Problema de contraste

It is too expensive to distinguish the text from the background, so it is seriously difficult to review suggested edits from other users, as can be seen in the following comparative table:

Author's source code Change proposed by another user

Proposal

A proposal for change would be:

  • Remove the line through the code (text-decoration: line-through;).
  • Increase the intensity of the red and set an appropriate opacity (it could be 20% opacity) so that it can be visualized better.

That is, as illustrated in the following image:

vista-previa-propuesta

This would help to better visualize the author's source code with that proposed by another user. The goal is to check with ease if the changes to the code were simply formatting or also functional changes.

So our CSS rule could look like this:

span.diff-delete {
  color: var(--red-700);
  background-color: rgba(255, 0, 0, 0.2);
}

If the previous proposal is considered, we could have something similar to the following comparative table:

Author's source code Change proposed by another user

There, you can see that it becomes easier to compare code.

You can visit this link so that you can see the example mentioned in this post in dark mode.

13
  • 6
    I think removal of the line-through and relying only on the color could be an issue for color blind people (particularly red-green color blind people). Mar 4 at 0:30
  • Maybe a checkmark showing or not showing it?
    – gbianchi
    Mar 4 at 0:34
  • 4
    I think you are right and this is an important issue. Related about the occasional lack of syntax highlight in suggested edits
    – bad_coder
    Mar 4 at 0:40
  • Some of the tags aren’t quite right here. This question isn’t about source-code, but may be about code. It is definitely about diffs. Also, isn’t this a feature-request? Also shouldn’t dark mode questions still be asked on MSO? Mar 4 at 12:43
  • 1
  • 2
    @SebastianSimon this is not about stackoverflow. this is happening in every site that has code, and is happening in every site with dark mode. The related in SO is ok, but no solution... the other one is a thread from 2012!!! and the problem is not strikeout, is all the things together...
    – gbianchi
    Mar 4 at 13:02
  • 1
    The problem is not limited to the suggested edit review queue, it happens in the side-by-side-markdow view, so I edited the title and the tags. Also the problem is not limited to SO (English) (the original report was posted in Meta ES.SO (Spanish)) cc @SebastianSimon
    – Rubén
    Mar 4 at 13:59
  • 1
    @gbianchi FWIW only stack overflow and the localized stack overflow sites have dark mode. Mar 4 at 18:26
  • @KodosJohnson Is it possible to have green on the left side, or red on the right? I would think if it isn't, color blindness wouldn't be an issue.
    – zcoop98
    Mar 19 at 20:49
  • 1
    @zcoop98 Even if it's not possible, it would be hard to understand if the edit on the right or left side is an insertion or deletion. Also, there is an inline mode where it shows all edits on a single screen instead of side-by-side making your point moot. Mar 19 at 21:25
  • I think the proposal in this feature request to increase the contrast between the text and highlight is the best way forward. Mar 19 at 21:26
  • @Kodos I did forget about inline, that's fair
    – zcoop98
    Mar 19 at 22:04

You must log in to answer this question.

Browse other questions tagged .