Improve quoted code contrast

[HarHarLinks]

Steps to reproduce

> `{ "m.server": "matrix-federation.matrix.org:443" }`

Outcome

Operating system

arch

Application version

Element Nightly version: 2021102701 Olm version: 3.2.3

How did you install the app?

aur

Homeserver

No response

Will you send logs?

No

[dbkr]

This is due to the fact that the domain name has been linkified and so its colour is from being a link rather than any of highlight.js's theme colours. The contrast of the link's blue isn't amazing on the normal dark background but is worse on the lightened background of the code block.

[turt2live]

The m.server bit in the example is pretty difficult to see too.

[dbkr]

Oh wait, the bug you were pointing out was the fact that 'm.server' is grey on grey.

[dbkr]

Right, so we need to pick a different colour for our quoted text so it shows up against the lighter background of the code block, or not apply the quote formatting to code blocks, so some such solution.

[HarHarLinks]

Well, if you feel the link colour could be improved, feel free to do so, but indeed this was mainly intended for the grey on grey on grey. I can imagine that the quote indicating bracket and indentation is plenty and no further styles need be applied for quoted code. The indentation is additionally clear as code blocks have a background which in a quote would be indented as a whole.
You should probably create an example code snippet that uses all possible colors and half-manually test that in the official skins now and then. Themers could probably also profit from that.

[germain-gg]

Fixed as part of matrix-org/matrix-react-sdk#11079

[HarHarLinks]

@germain-gg:

Fixed as part of matrix-org/matrix-react-sdk#11079

is it really though?

on Element version: 1.11.36 we had

meanwhile on develop right now Version von Element: 2753bc9-react-19d927f497be-js-f77662406c68 (assuming 11079 made it in there)

I'd almost argue the situation for light mode has regressed here. For dark mode, it may have changed slightly for the better but still doesn't feel great.

What do you think about a route similar to the one the new matrix.org goes:

I'm not saying that you should style element's code highlighting red (it's a bit strage on matrix.org really), but maybe for quoted code blocks, you could have just the outline and not modify the text background?

[RokeJulianLockhart]

@HarHarLinks, I'd say that the “improved” versions, per your screenshots, are noticeably more difficult to parse.

[HarHarLinks]

@HarHarLinks, I'd say that the “improved” versions, per your screenshots, are noticeably more difficult to parse.

@RokeJulianLockhart please clarify: which one do you mean by the "improved" version? 2753bc9-react-19d927f497be-js-f77662406c68/matrix-org/matrix-react-sdk#11079 or my suggestion with outlines at the end?

[RokeJulianLockhart]

#19522 (comment)

@HarHarLinks,

is the best design (Element 1.11.36's). I don't like the redesign nor your version, since the contrast it much worse for me.