Almost unreadable code highlighting in dark mode

AI-generated summary

A user, hugovk, reported an issue with code highlighting in dark mode on the Discourse platform. Specifically, certain highlighted text (like tuple and map) becomes almost unreadable due to insufficient contrast. hugovk provided an example code block and a screenshot, showing a contrast ratio of 1.2, which falls short of the minimum AA guidelines of 4.5 and 7.0.

The Discourse team acknowledged the issue, with sam assuring that the styling would be sorted. A fix was subsequently implemented in a pull request (PR #16859), as announced by chapoi. hugovk thanked the team for the quick response and fix.

Over on the Python Discourse, when using code blocks in dark mode, some of the highlighting makes the code unreadable.

For example:

class do(partial):
    def __rmatmul__(self, iterables):
        self.results = tuple(map(self, iterables))

Looks like this where tuple and map are barely visible:

(There’s no difference if I add python after the first triple backticks.)

Chrome’s devtools reports a contrast ratio of 1.2, where the minimum AA guidelines are 4.5 and 7.0:

[screenshot removed due to new user limits]

(The WAVE Web Accessibility Evaluation Tool wouldn’t run on the page.) [link removed due to new user limits]

This with default Discourse settings.

I know it’s possible to pick another theme, but please could you make it so the default syntax highlighting to work well in dark mode? This is also an accessibility issue.

Original discussion at:

Thanks! :smiling_face:

8 Likes

We will get this styling sorted! thanks for letting us know :heart:

5 Likes

Thanks @hugovk for reporting this.

This PR fixes the highlight colour for dark theme.

https://github.com/discourse/discourse/pull/16859

This topic will close in a few days.

7 Likes

Thank you for the quick response and fix! :rocket:

4 Likes

This topic was automatically closed after 2 days. New replies are no longer allowed.