rhazdon / hugo-theme-hello-friend-ng

Pretty basic theme for Hugo that covers all of the essentials. All you have to do is start typing!
https://github.com/rhazdon/hugo-theme-hello-friend-ng/
Other
1.46k stars 777 forks source link

[Bug] code block contrast in white-mode extremly low #364

Open nel0x opened 2 years ago

nel0x commented 2 years ago

Hello there,

first, lots of thanks for the amazing work with the great theme! :D Now to an unwanted behavior I realized today:

Screenshot from 2022-02-08 11-49-13 Screenshot from 2022-02-08 11-49-24

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 ...

TheGroundZero commented 1 year ago

+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