CodeMirror background-color Contrast

[Mojo-OG]

The Problem

In ./skins/Citizen/skinStyles/extensions/CodeMirror/ext.CodeMirror.lib.less, the CodeMirror class has its background-color set to var(--color-surface-0). Because --color-surface-0 is the variable used for the skin background, this makes the editing area in Source Editing indistinguishable from the borders/background of the site.

The Solution

Change the current value to --color-surface-2; since this still uses the pre-set skin vars that change between light and dark themes, it gives the editing area enough contrast to be visually distinct from the background without being visually jarring.

The Alternatives

--color-surface-3 or --color-surface-4 could also be used instead of --color-surface-0, but when testing with the out-of-the-box configuration (i.e, no overrides for the color-surface vars), these colors were a bit too visually jarring .

[alistair3149]

Which source editor are you referring to? Would you mind to add a screenshot on the issue described?

As for the background color, it is intentional to use the same color as the skin background, so that it is cohesive with all the input field in the rest of the MW ecosystem.

There might be additional styles that are missing that will address the contrast issue though.

[Mojo-OG]

This happens in the source editor mode of the VisualEditor extension when used with CodeMirror and the Citizen skin. CodeMirror which provides the syntax highlighting functionality for the source editor ends up hijacking the html element for the background color and setting it to be the same as the background for the main theme.

It has actually been a hot minute since I looked at this internally after setting it up, but I recall there being no focus border highlighting, and if there is a border set for the input area when combining VisualEditor (in source editor/code edit mode)+CodeMirror+Citizen, then it's certainly not distinguishable on what I will refer to as a "standard 1080p office monitor".

I will see about getting a screenshot of the issue tomorrow.