dark theme code blocks contrast too heavily with message background

[MyriaCore]

Description

This is totally a subjective thing, but I find the background coloring of the code blocks in darktheme to be a bit off, at least when compared to the rest of the app. I think this is most obvious when hovering over the codeblock, but still noticably not great when just looking at them.

I think this off-ness is rooted in the contrast between the background of the code-block, and the background of the message. Here are a few screenshots demonstrating what I mean.

As you can see from the above screenshot, the syntax highlighting in the codeblocks is fighting for the attention of the viewer, and almost seems to shimmer due to the stark contrast against the codeblock's dark background. More so, the codeblocks themselves seem almost alien against the background - like they really don't belong there.

If you're not following, I feel this is made more obvious when there are lighter elements on the screen, such as when hovering over the codeblock:

One interesting element is that this problem seems less obvious when presented without the full context of the UI:

This is actually what helped lead me to the conclusion that the contrast was the problem - the sidebars are the lightest element in the UI when using darktheme, and when you remove those, it's harder to see the negative affect. That's because you've removed one of the main contrasting elements.

This is an issue that does not seem to be shared by light-theme. While there is contrast in the light-theme code-block background and the light-theme message background, it's not nearly as much. This lends the sense that light-theme code blocks "belong" more with their surroundings than dar-theme ones.

Contrast Analysis

In the below screenshots, I've put the hex color values of the different UI elements for dark-theme and for light-theme. I've just used GIMP's color-picker to pick out these hex values, so it's likely that the actual in-code values are different.

For the light-theme codeblocks, the difference is #ffffff – #f7f7f7 = 0x80808. For dark-theme codeblocks, the difference is #181b21 - #000000 = 0x181b21. As we can see, dark-theme codeblocks contrast with the background way more than light-theme codeblocks do - just over three times more, in fact.

Steps Forward / How to fix

I tried fiddling around with the styling to see if I could try to play around with some of these hex values myself, and it appears that this darktheme is achieved by literally inverting the colors with filter: invert(1), and the color provided by .mx_EventTile_content .markdown-body code, .mx_EventTile_content .markdown-body pre.

I'm not familiar enough with the code-base to tell if this is actually what's happening, or if it just looks like what's happening, but if it is what's happening, this might make it difficult to individually adjust the stylings of different UI elements. However, if I were to try to adjust this, I'd probably just make the background color for codeblocks a little less black, and a little closer to the color of the message background.

Version information

• Platform: desktop

• OS: Manjaro Linux

• Version:

  • riot-web version: 1.6.0
  • olm version: 3.1.3