New darker slate theme feels like it lacks contrast/readability

[johnthagen]

Context

Disclaimer: I realize this issue is highly subjective, but I do hope it provides meaningful feedback. ❤️

Description

9.4.0 changed:

Improved slate color scheme (dark mode) - now even darker

I realize this is subjective, but I feel the changes make it harder to read because normal text is so faint and grey now. Also bolded text is much brighter relatively, which makes it pop out almost too much.

I'm all for darker themes in general, but I would prefer keeping the contrast/brightness high for normal text and text to be closer to white so that it is readable easily, even for people with poorer eyesight.

Perhaps it would be useful to have a "muted-slate" or "vivid-slate" option that is closer to the previous?

Related links

• 970670bb4adac974edaa590d31c3ab79f42bce75
• 859b8bcaee31e4a7d854eb77d741c8fba762465c

Use Cases

Anyone using slate theme (which, normally I thought was a great, simple default dark theme).

I first noticed this issue when we updated to 9.4.0 on a work project, but then went to one of my open source projects to show as an example

• https://github.com/johnthagen/python-blueprint

Visuals

Personally, I find the faded text color doesn't pop and read as well. Also note how much brighter bold text is, which I felt like is now more of a "highlight" than a "bold" in standard Markdown terms.

Before submitting

• [X] I have read and followed the change request guidelines.
• [X] I have verified that my idea is a change request and not a bug report.
• [X] I have ensured that, to the best of my knowledge, my idea will benefit the entire community.
• [X] I have included relevant links to the documentation, related issues, and discussions to underline the need for my idea.

[squidfunk]

Thanks for reporting. In fact, I find it harder on the eyes when contrast is too bright. We can increase the contrast slightly, but we're not going to increase it to the value we had before. As the background is darker now, it is also okay to make the text a little fainter. Bold text is brighter so it has the same contrast when viewing in light mode. Otherwise, bold text is lost. That being said, we'll increase the value slightly, but you can also add a single line to revert back to the old style.

[data-md-color-scheme=slate] {
  --md-default-fg-color: hsla(var(--md-hue), 15%, 90%, 1);
}

Themes are always subjective 😉

[squidfunk]

As an addendum: text in GitHub's dark theme is also not white. White text on dark background is too hard too read.

[saltydk]

I agree with OP that this makes things harder to read at first glance, the change was fairly jarring. Not possible to just implement more themes instead of making such large changes?

[squidfunk]

We could've implemented a new color scheme, but this would increase the size of the payload at no upside, since we only changed some tints. Personally, I was sick of the old color theme, which is why I adapted it to something I believe is much better than what we had before. Yes, it is subjective after all.

Please know that when you maintain a project of this size any change you make is unpopular, but we have big plans and need to move this project forward to keep it sharp, so we have to change things. The previous dark scheme did not go well with certain color combinations, e.g. black, so we adapted it, and to have actually more overall contrast (link colors, tabs, etc.). We'll slightly increase the contrast of the text and will have a better situation as before.

That being said, we put great emphasize on customization, and it's actually so easy to adjust with a few lines of CSS (as noted in my last comment), that you can revert back to the old colors, or even better: build your own custom color theme!

[squidfunk]

For comparison, here's the text color that GitHub uses (top) vs. the one that we currently use:

Nonetheless, I'll slightly tweak the colors again, so they fit together a little better ☺️

[squidfunk]

I've adjusted the colors in c9e4a5e26513d34a5438d6c0268a6344814bd48f.

• Slightly lightened body copy
• Removed extra styling for bold text (that was an experiment)
• Adjusted color of text in code blocks as suggested in #6062, but slightly differently
• Made content tabs to match color of body copy for less noise
• Moved to a slightly more neutral tint

This issue is now considered resolved. If you wish to tweak the colors – go ahead, it is super simple! This is our new dark mode that we regard superior to the prior one, which was too light and had problems with contrast.

Before

After

[johnthagen]

Thanks @squidfunk. I was in the process of posting that your idea to compare to GitHub's dark theme as a reference is a great idea!

Here was a comparison side by side between the 9.4.0 dark theme and GitHub's dark theme, showing the difference is background and foreground color & contrast.

As always thanks for the awesome tool you've created and for your feedback and work. ❤️

[squidfunk]

I'm using dark dimmed which is closer to what the slate theme is now 😉

[squidfunk]

Released as pat of 9.4.1.

[vedranmiletic]

@squidfunk good work, I particularly like

Removed extra styling for bold text (that was an experiment)

[johnthagen]

@squidfunk Just wanted to follow up that we upgraded to 9.4.1 and want to report that the new tweaked slate theme feels a lot better at first glance than 9.4.0 -- thank you for your thoughtful consideration and quick updates. ❤️