gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix low-contrast CSS strings in code blocks (#39967) (#39987)

Browse Source 
First noticed on the challenge "Divide the Grid Into an Area Template", text is hard to read in night mode due to low contrast in the CSS code block. Problem was discussed in issue #39967, and this change was proposed to boost contrast above the minimum acceptable ratio of 4.5:1.

This change only targets CSS code blocks in night mode, and only strings. I could not find code blocks in other languages with this issue, but they may exist.
This also does not target `.token.operator`, `.token.entity`, or `.token.url`. There is no issue here with contrast, but these classes do not include a background. A proposed future change could be to remove the background from `.token.string` as well, but this change is not made here, as current style guides recommend the background.
This commit is contained in:
Eli Carlin-Coleman
2020-10-16 07:52:16 -04:00
committed by GitHub
parent a39235be83
commit a834672437
1 changed files with 7 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/components/layouts/prism-night.css
View File

@ -110,6 +110,13 @@ padding in night mode */
color: #7ec699;
}
/* CSS code block strings have low contrast in night mode. This attempts to increase contrast above 4.5:1 */
.night .language-css .token.string,
.night .style .token.string {
color: #ec9126;
background: hsl(0 0% 100% / 0.12);
}
.night .token.operator,
.night .token.entity,
.night .token.url {