Fix bad syntax highlighting color schemes (#630)

Some pygment color schemes (like `bw`, which we use as default in the
exampleSite) do not set a foreground color explicitly, which makes those
themes look bad/illegible when using the dark mode of hugo-coder. Most
such themes are light themes (it seems after a quick research), which
explains this phenomenon.

This commit adds a fix for such color schemes by setting the default
foreground color to the one used in the light hugo-coder colorscheme.
It is overridden by proper syntax highlighting schemes.
This commit is contained in:
Alphonse Mariya
2021-12-16 22:37:12 +01:00
committed by GitHub
parent 263be7cebc
commit 29a7a942b7
5 changed files with 79 additions and 4 deletions

View File

@@ -38,6 +38,13 @@
color: $fg-color-dark;
}
// fix color schemes which do not explicitly set fg-color
.highlight {
pre {
color: $fg-color;
}
}
pre {
code {
background-color: inherit;

View File

@@ -40,14 +40,31 @@ body.colorscheme-dark {
body.colorscheme-dark code {
background-color: #424242;
color: #dadada; }
body.colorscheme-dark .highlight pre {
color: #212121; }
body.colorscheme-dark pre code {
background-color: inherit;
color: inherit; }
body.colorscheme-dark blockquote {
border-left: 2px solid #424242; }
body.colorscheme-dark th,
body.colorscheme-dark td {
padding: 1.6rem; }
body.colorscheme-dark table {
border-collapse: collapse; }
body.colorscheme-dark table td,
body.colorscheme-dark table th {
border: 2px solid #dadada; }
body.colorscheme-dark table tr:first-child th {
border-top: 0; }
body.colorscheme-dark table tr:last-child td {
border-bottom: 0; }
body.colorscheme-dark table tr td:first-child,
body.colorscheme-dark table tr th:first-child {
border-left: 0; }
body.colorscheme-dark table tr td:last-child,
body.colorscheme-dark table tr th:last-child {
border-right: 0; }
@media (prefers-color-scheme: dark) {
body.colorscheme-auto {
@@ -92,14 +109,31 @@ body.colorscheme-dark {
body.colorscheme-auto code {
background-color: #424242;
color: #dadada; }
body.colorscheme-auto .highlight pre {
color: #212121; }
body.colorscheme-auto pre code {
background-color: inherit;
color: inherit; }
body.colorscheme-auto blockquote {
border-left: 2px solid #424242; }
body.colorscheme-auto th,
body.colorscheme-auto td {
padding: 1.6rem; }
body.colorscheme-auto table {
border-collapse: collapse; }
body.colorscheme-auto table td,
body.colorscheme-auto table th {
border: 2px solid #dadada; } }
border: 2px solid #dadada; }
body.colorscheme-auto table tr:first-child th {
border-top: 0; }
body.colorscheme-auto table tr:last-child td {
border-bottom: 0; }
body.colorscheme-auto table tr td:first-child,
body.colorscheme-auto table tr th:first-child {
border-left: 0; }
body.colorscheme-auto table tr td:last-child,
body.colorscheme-auto table tr th:last-child {
border-right: 0; } }
body.colorscheme-dark .content .post .tags .tag {
background-color: #424242; }

File diff suppressed because one or more lines are too long

View File

@@ -1 +1 @@
{"Target":"css/coder-dark.min.ccbbada2e264e4fdbf9b2181cccc2cdb289a63dc9520a1e96ac2b9a45778df29.css","MediaType":"text/css","Data":{"Integrity":"sha256-zLutouJk5P2/myGBzMws2yiaY9yVIKHpasK5pFd43yk="}}
{"Target":"css/coder-dark.min.002ee2378e14c7a68f1f0a53d9694ed252090987c4e768023fac694a4fc5f793.css","MediaType":"text/css","Data":{"Integrity":"sha256-AC7iN44Ux6aPHwpT2WlO0lIJCYfE52gCP6xpSk/F95M="}}

View File

@@ -40,14 +40,31 @@ body.colorscheme-dark {
body.colorscheme-dark code {
background-color: #424242;
color: #dadada; }
body.colorscheme-dark .highlight pre {
color: #212121; }
body.colorscheme-dark pre code {
background-color: inherit;
color: inherit; }
body.colorscheme-dark blockquote {
border-left: 2px solid #424242; }
body.colorscheme-dark th,
body.colorscheme-dark td {
padding: 1.6rem; }
body.colorscheme-dark table {
border-collapse: collapse; }
body.colorscheme-dark table td,
body.colorscheme-dark table th {
border: 2px solid #dadada; }
body.colorscheme-dark table tr:first-child th {
border-top: 0; }
body.colorscheme-dark table tr:last-child td {
border-bottom: 0; }
body.colorscheme-dark table tr td:first-child,
body.colorscheme-dark table tr th:first-child {
border-left: 0; }
body.colorscheme-dark table tr td:last-child,
body.colorscheme-dark table tr th:last-child {
border-right: 0; }
@media (prefers-color-scheme: dark) {
body.colorscheme-auto {
@@ -92,14 +109,31 @@ body.colorscheme-dark {
body.colorscheme-auto code {
background-color: #424242;
color: #dadada; }
body.colorscheme-auto .highlight pre {
color: #212121; }
body.colorscheme-auto pre code {
background-color: inherit;
color: inherit; }
body.colorscheme-auto blockquote {
border-left: 2px solid #424242; }
body.colorscheme-auto th,
body.colorscheme-auto td {
padding: 1.6rem; }
body.colorscheme-auto table {
border-collapse: collapse; }
body.colorscheme-auto table td,
body.colorscheme-auto table th {
border: 2px solid #dadada; } }
border: 2px solid #dadada; }
body.colorscheme-auto table tr:first-child th {
border-top: 0; }
body.colorscheme-auto table tr:last-child td {
border-bottom: 0; }
body.colorscheme-auto table tr td:first-child,
body.colorscheme-auto table tr th:first-child {
border-left: 0; }
body.colorscheme-auto table tr td:last-child,
body.colorscheme-auto table tr th:last-child {
border-right: 0; } }
body.colorscheme-dark .content .post .tags .tag {
background-color: #424242; }