Customizable diff colors
p5nbTgip0r opened this issue · comments
Describe the change you'd like
The green and red colors when viewing commit diffs should have a customization option to choose different colors in place of the default green and red.
Additional context
People who suffer from color blindness may find it difficult or impossible to distinguish green and red from each other. This becomes an issue when looking at commit diffs since it relies mostly on color to show changes, with a + or - at the start of the line to indicate additions and deletions as the only non-color reliant way of indicating changes.
There is a userstyle that aims to help fix this issue for the default light GitHub, but it is incompatible with this theme. To solve this I'm requesting a customization option to change the colors used in diff views be added so users who have any form of color blindness/deficiency can adjust these defaults and allow easier readability of code changes for them.
Hi @p5nbTgip0r!
Try adding this usercss. I used selectors that will override GitHub-Dark's diff colors (including hover highlighting):
/* ==UserStyle==
@name GitHub Diff Color Customizer
@namespace StylishThemes
@version 1.0.0
@description Add diff color customization
@license CC-BY-SA-4.0
@author StylishThemes
@advanced color deleted-line "Deleted Line Bkgd" #ffcc33
@advanced color deleted-text "Deleted Line Text" #979797
@advanced color deleted-code "Deleted Code Bkgd" #ffd96359
@advanced color deleted-hover "Deleted Hover Bkgd" #805f0059
@advanced color added-line "Added Line Bkgd" #3986ff
@advanced color added-text "Added Line Text" #fff
@advanced color added-code "Added Code Bkgd" #3986ff59
@advanced color added-hover "Added Hover Bkgd" #004cc159
@preprocessor default
==/UserStyle== */
@-moz-document regexp("^https?://((gist|guides|help|lab|launch-editor|raw|resources|status|developer)\\.)?github\\.com/((?!generated_pages/preview).)*$") {
/*** Based on https://userstyles.org/styles/149864/github-diff-colorblind-friendly ***
.blob-num sets the colors in the number columns on the left
.blob-code sets the color of the rest of the line
.blob-code .x sets the word-diff highlight color
***/
.highlight .blob-num-deletion,
.highlight .blob-code-deletion .x {
background-color: var(--deleted-line) !important;
color: var(--deleted-text) !important;
}
.highlight .blob-code-deletion {
background-color: var(--deleted-code) !important;
color: var(--deleted-text) !important;
}
body .highlight:not(.lines) tr:not(.inline-comments):hover td.blob-num-deletion:not(.line-age),
body .highlight:not(.lines) tr:not(.inline-comments):hover td.blob-code-deletion:not(.line-age) {
background: var(--deleted-hover) !important;
}
body .highlight:not(.lines) tr:not(.inline-comments):hover td.blob-num-deletion:not(.line-age):before {
color: var(--deleted-text) !important;
}
.highlight .blob-num-addition,
.highlight .blob-code-addition .x {
background-color: var(--added-line) !important;
color: var(--added-text) !important;
}
.highlight .blob-code-addition {
background-color: var(--added-code) !important;
color: var(--added-text) !important;
}
body .highlight:not(.lines) tr:not(.inline-comments):hover td.blob-num-addition:not(.line-age),
body .highlight:not(.lines) tr:not(.inline-comments):hover td.blob-code-addition:not(.line-age) {
background: var(--added-hover) !important;
}
body .highlight:not(.lines) tr:not(.inline-comments):hover td.blob-num-addition:not(.line-age):before {
color: var(--added-text) !important;
}
}Let me know if there is anything that needs to be changed. We can create a new repository with this style if you find it useful.
@Mottie While I'm not colorblind myself, I know a few people who are and would likely appreciate a repository to allow for this sort of customization.
I'd probably suggest a change of the default colors with the style, the current colors don't seem to work well with the dark theme and cause lots of near-unreadable text. Playing around with the colors, I found the following values to work well with the dark theme as well as the default GitHub light theme while still accommodating for red-green color blindness through a colorblind simulator. Obviously I can't speak for whether these would fully work for people who do have color blindness, but I think they're a step in the right direction:
@advanced color deleted-line "Deleted Line Bkgd" #ffcc33
@advanced color deleted-text "Deleted Line Text" #979797
@advanced color deleted-code "Deleted Code Bkgd" #ffd96359
@advanced color deleted-hover "Deleted Hover Bkgd" #805f0059
@advanced color added-line "Added Line Bkgd" #3986ff
@advanced color added-text "Added Line Text" #fff
@advanced color added-code "Added Code Bkgd" #3986ff59
@advanced color added-hover "Added Hover Bkgd" #004cc159
Lastly, thank you so much for making this! I'm sure many people will find this useful and I'll definitely use it myself.
Looks good! I've updated the snippet.
We're talking about making a repo that will contain a bunch of customization usercss. We'll let you know when it's available.
Contributions welcome
closing