Skip to content

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

@nel0x

Description

@nel0x

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions