Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
nel0x opened this issue Feb 8, 2022 · 1 comment
Open

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

nel0x opened this issue Feb 8, 2022 · 1 comment

Comments

@nel0x
Copy link

nel0x commented Feb 8, 2022

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
Copy link

TheGroundZero commented Mar 23, 2023

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

code {
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
font-display: auto;
font-feature-settings: normal;
padding: 1px 6px;
margin: 0 2px;
border-radius: 5px;
font-size: 0.95rem;
// Default
background: $light-background-secondary;
@media (prefers-color-scheme: dark) {
background: $dark-background-secondary;
}
@media (prefers-color-scheme: light) {
background: $light-background-secondary;
}
[data-theme=dark] & {
background: $dark-background-secondary;
}
[data-theme=light] & {
background: $light-background-secondary;
}
}

code {
background: none !important;
margin: 0;
padding: 0;
font-size: inherit;
// 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;
}
}
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants