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

Very low contrast when editing a code block on dark mode #103

Closed
draganczukp opened this issue Mar 20, 2024 · 1 comment
Closed

Very low contrast when editing a code block on dark mode #103

draganczukp opened this issue Mar 20, 2024 · 1 comment
Labels
enhancement New feature or request

Comments

@draganczukp
Copy link

The default font color has a really bad contrast of just 2:1 - https://webaim.org/resources/contrastchecker/?fcolor=4C566A&bcolor=25282C

image

The recommendation for small text (which I'd argue this falls under) is 7:1. Changing the code text color to #B5BCC9, done by changing the L component of the HSV color to 75% boosts the contrast to 7.75:1, and makes the text a lot easier to read

@redimp
Copy link
Owner

redimp commented Mar 21, 2024

Hey @draganczukp,

Thank you for bringing this to my attention. Part of the problem here is that the fenced code block with a language is rendered as comment:

image

With #B5BCC9 as .dark-mode .cm-s-otterwiki span.cm-comment is the comment barely distinguishable:

image

I don't see a harm in colorizing the comments, what do you think about #6BBAFF? e.g.

image

This has a contrast ratio of 7.11:1.

@redimp redimp added the enhancement New feature or request label Mar 21, 2024
@redimp redimp closed this as completed in 5eeb955 Mar 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants