Using proper color scheme for dark code blocks, rather than filter: invert(1)?

[nyanpasu64]

Is your suggestion related to a problem? Please describe.

Currently, in Element's dark theme, code block syntax highlighting is achieved by adding an invert(1) filter over the light theme's colors:

https://github.com/matrix-org/matrix-react-sdk/blob/3d5117c6317a566fcaf1074838af9ae2d5444252/res/themes/dark/css/_dark.scss#L286-L293

The issues I see, in order from less to more severe, are that it turns off subpixel antialiasing in Firefox (it's already off globally in Chrome), that the color scheme looks strange because it was not designed to work well in a dark theme, and that the characters appear too thin because the gamma correction is inverted (standard gamma-corrected rendering thins dark text and thickens light text, but the invert filter results in thinner light text).

Describe the solution you'd like.

Use a dedicated syntax highlighting scheme.

Personally, I have a Stylus UserCSS rule which disables invert(1) and uses the Tomorrow Night Bright highlight.js theme, adapted to work in Element's CSS classes, and with a less-dark background due to personal preference and for the code blocks to be distinguishable from the page background color (link). This CSS file can be adapted to be bundled directly with Element.

Describe alternatives you've considered.

You could leave the invert(1) filter in place, but I think it would result in a poor user experience.

Another possible issue is over how to lighten the background from the original Tomorrow Night Bright's background color. People may also bikeshed over which dark theme to be bundled with Element, or even adding a feature where the user can pick a theme directly from the highlight.js theme repo (demo) or supply their own CSS rules. However I don't know if hljs themes will work unmodified in Element's CSS environment.

Additionally I can't find where the current light code theme comes from, or what it's called, so I don't know where to add a dark color scheme. I can't find any occurrences of .hljs-title in this repo or in https://github.com/matrix-org/matrix-react-sdk.

Additional context

Related issues:

• dark theme code blocks contrast too heavily with message background #13792
• code or pre formatted hyperlink color is inverted in default and custom dark themes … #13454 (closed in favor of Dark theme follow up issues #8554)