hugo-theme-hello-friend-ng
hugo-theme-hello-friend-ng copied to clipboard
[Bug] code block contrast in white-mode extremly low
Hello there,
first, lots of thanks for the amazing work with the great theme! :D Now to an unwanted behavior I realized today:
In white mode the code inside the ```-code box is covered by the light-background color which makes the text barely unreadable. With the single-quote `-code this doesn't happen, nor in dark mode.
EDIT: Seems to have something to do with the code {}
-section in assets/scss/_main.scss.
EDIT 2:
(1) assets/scss/_main.scss
:
// Default
color: #ccc;
@media (prefers-color-scheme: dark) {
color: inherit;
}
@media (prefers-color-scheme: light) {
color: #ccc;
}
[data-theme=dark] & {
color: inherit;
}
[data-theme=light] & {
color: #ccc;
}
Replacing color: #ccc;
with color: inherit;
here:
[data-theme=light] & {
color: #ccc;
}
fixes the issue.
Because inherit
seems to be the default value for the text-color, just removing this whole code block (1) fixes the issue as well.
I'm not sure how it's actually meant to be. Either you would have to change the text color for both types of code blocks (as block code and as inline code) or use inherit for both. I would suggest the solution with removing the lines, since I successfully tested it, and if it is meant differently(?), then you would have to fix it differently ...
+1'ing this one. Code blocks are hard to read in Light mode, but even in Dark mode it's not great.
EDIT: code
is duplicated in _main.scss
so the use of variables instead of hardcoding colours is overriden.
https://github.com/rhazdon/hugo-theme-hello-friend-ng/blob/959421da9314dc310763c0000d89ce8bb97f3a76/assets/scss/_main.scss#L213-L239
https://github.com/rhazdon/hugo-theme-hello-friend-ng/blob/959421da9314dc310763c0000d89ce8bb97f3a76/assets/scss/_main.scss#L260-L284