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:
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:
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.
