See resources/mode/mediawiki/colorblind-colors.less for related styles.

So, the edit page is now enabled for dark mode. I'm unable to do edits without syntax highlighting and I can't keep switching modes all the time...

@MusikAnimal could we add skin-theme and noinvert along with cm-mw-colorblind-colors in the mean time?

@Sjoerddebruin perhaps try this in your user CSS as a workaround - does that help?:

.cm-mw-colorblind-colors { filter: invert(1); }

In T365311#9957461, @Jdlrobson wrote:

@MusikAnimal could we add skin-theme and noinvert along with cm-mw-colorblind-colors in the mean time?

@Sjoerddebruin perhaps try this in your user CSS as a workaround - does that help?:

.cm-mw-colorblind-colors { filter: invert(1); }

At the moment I'm using this user script:

const observer = new MutationObserver((mutationsList) => {
	mutationsList.forEach(mutation => {
		mutation.addedNodes.forEach(node => {
			if (node.classList && node.classList.contains('CodeMirror')) {
				node.classList.add('notheme', 'skin-invert');
			}
		});
	});
});

observer.observe(document.body, {
	childList: true,
	subtree: true
});

Which is workable for the time being.

Okay that suggests notheme and skin-invert can be added effectively here which is good news!

It's readable for me but not sure if it checks all the contrast stuff, also some colours looks a bit too same to each other.

@Jdlrobson, I can't seem to get any syntax highlighting to show up in prod. Any ideas?

In T365311#9957461, @Jdlrobson wrote:

@MusikAnimal could we add skin-theme and noinvert along with cm-mw-colorblind-colors in the mean time?

https://www.mediawiki.org/wiki/Help:Extension:CodeMirror#Color_and_style_customization has examples of the palette (see also colorblind mode). Someone who understands the accessibility requirements should be able to come up with a suitable palette easily enough, I would think. But at any rate, I'm afraid I'm terribly busy with the Community Wishlist which coincidentally has the same launch date as dark mode… :( So I won't be around to help much, sorry! Adding the skin-theme/noinvert solution as a short-term solution is fine as well. I will have more time to help with this after July 15.

@Edtadros this was mistagged - please ignore for now.

With dark mode being more rolled out now could we please add the CSS classes for the time being?

If someone posts a patch I can merge it! I guess another solution here would be to just add color:black;background:white to https://gerrit.wikimedia.org/g/mediawiki/extensions/CodeMirror/+/0e0e4927ab988e64a82f5405769c7f97c0dc0679/resources/mode/mediawiki/colorblind-colors.less#6

Change #1057364 had a related patch set uploaded (by Sjoerddebruin; author: Sjoerddebruin):

[mediawiki/extensions/CodeMirror@master] Apply color inversion until dark syntax styles are chosen

https://gerrit.wikimedia.org/r/1057364

Classes are inserted on the correct element with the above patch:

Change #1057364 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] Apply color inversion until dark syntax styles are chosen

https://gerrit.wikimedia.org/r/1057364

This is now live on www.mediawiki.org - is it working as expected @Sjoerddebruin ?

In T365311#10033620, @Jdlrobson wrote:

This is now live on www.mediawiki.org - is it working as expected @Sjoerddebruin ?

CM6 is enabled on mediawiki.org, so you'll need to test on a different wiki, since the patches only touched CM5.

I'll look into a proper fix for both CM5 and CM6 styles today.

Works on https://test.wikidata.org/w/index.php?title=Wikidata:A_random_test_page&action=edit&useskin=vector-2022&vectornightmode=1

Change #1059166 had a related patch set uploaded (by MusikAnimal; author: MusikAnimal):

[mediawiki/extensions/CodeMirror@master] [WIP] Implement dark mode styles

https://gerrit.wikimedia.org/r/1059166

Change #1059170 had a related patch set uploaded (by MusikAnimal; author: MusikAnimal):

[mediawiki/skins/Vector@master] clientPreferenes: fire hook when client preferences change

https://gerrit.wikimedia.org/r/1059170

The temporary color inversion doesn't work with os clientpref by the way.

In T365311#10042667, @hgzh wrote:

The temporary color inversion doesn't work with os clientpref by the way.

Interesting, doesn't sound like expected behaviour to me...

Change #1059170 abandoned by MusikAnimal:

[mediawiki/skins/Vector@master] clientPreferenes: fire hook when client preferences change

Reason:

no longer needed! See I6a3bbc6bce4

https://gerrit.wikimedia.org/r/1059170

In T365311#10043176, @MusikAnimal wrote:

Proper dark mode styles are now ready for review: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/CodeMirror/+/1059166

This includes reworking the search panel to use Codex CSS components (T371436), which in turn gives us dark mode styles for free.

Can we test this on a Patch Demo? Not sure which settings are required for Vector dark mode...

In T365311#10042667, @hgzh wrote:

The temporary color inversion doesn't work with os clientpref by the way.

Which wiki were you testing this on? And are you referring to the latest patch from @MusikAnimal or what's in production right now? Can you please share some replication steps? Thanks in advance! I've checked skin-invert class - and it is working as expected in the automatic mode.

Sure. I was referring to the current approach using skin-invert in codemirror and the 2010 wikitext editor.

1. open https://de.wikipedia.org/w/index.php?title=Schneidengruppe&action=edit&useskin=vector-2022&safemode=1 with accessibility for reading beta function activated
2. enable automatic color mode in accessibility menu
3. toggle dark mode in browser
   • --> non-highlighted text keeps being black on dark background and is unreadable
4. enable dark color mode in accessibility menu
   • --> non-highlighted text turns white on dark background and is readable

In T365311#10050857, @hgzh wrote:

Sure. I was referring to the current approach using skin-invert in codemirror and the 2010 wikitext editor.

1. open https://de.wikipedia.org/w/index.php?title=Schneidengruppe&action=edit&useskin=vector-2022&safemode=1 with accessibility for reading beta function activated
2. enable automatic color mode in accessibility menu
3. toggle dark mode in browser
   • --> non-highlighted text keeps being black on dark background and is unreadable
4. enable dark color mode in accessibility menu
   • --> non-highlighted text turns white on dark background and is readable

I can confirm this bug is fixed with https://gerrit.wikimedia.org/r/c/mediawiki/extensions/CodeMirror/+/1059166

In T365311#10048569, @Sjoerddebruin wrote:

In T365311#10043176, @MusikAnimal wrote:

Proper dark mode styles are now ready for review: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/CodeMirror/+/1059166

Can we test this on a Patch Demo? Not sure which settings are required for Vector dark mode...

Sure!

I've added links and notes to the "Patch Demo" section of the task description.

Need to do contrast checks. Also, what about the WMDE color adjustments that are on some wikis but not fleetwide?

In T365311#10054781, @Izno wrote:

Need to do contrast checks.

The latest is now on Patch Demo. See what you think. Links (that I will keep updated) are in the "Patch Demo" section of the task description.

Using the WCAG Color Contrast tool as recommend on mediawiki.org, CodeMirror is now compliant with WCAH 2.0 AA in both light and dark mode, with a few exceptions:

• Some non-printable characters (often inserted by accident) get color-destructive--hover instead of color-destructive to make it more attention-grabbing
• Non-breaking spaces are highlighted with color-placeholder, which is fine in light mode, but just a tad bit too dark against a dark background. It is not meant to be very visible, so I'm going to ignore this one.

I think that's it. These two scenarios should rarely be encountered in the wild.

Also, what about the WMDE color adjustments that are on some wikis but not fleetwide?

I have not touched it. Using the same WCAG Color Contrast tool, I see these colors do not pass WCAG AA checks in light or dark mode, but I'm not sure if they're supposed to as they're specifically designed for colorblind people. I'd prefer to leave any changes to those colors to WMDE.

Change #1059166 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] Implement dark mode styles and use Codex CSS components in search panel

https://gerrit.wikimedia.org/r/1059166

Probably doesn't need extensive QA given how many eyes have tested this, including against contrast checkers, but please do your thing :)

Note the new search panel was included as part of this (T371436) because the default CodeMirror search panel isn't dark mode compatible. QA efforts for the new search panel can be reserved for T371436: Redesign CodeMirror search panel, which is still waiting on another patch to be merged as of the time of writing.

New colors (applies to all wikis) and a new search panel (mediawiki.org, hewiki, and soon to be all of group0) I think warrants a Tech News announcement. I'll add something for this, T371436, and the group0 deployment (T357795), all of which are aimed for next week.

@MusikAnimal Are you supposed to enable both syntax highlighting or am I supposed to use just "Use colorblind-friendly scheme? When checking both, you can see in the source editing gif, I get a failed to load data blob error. If I switch to visual editor, I get "The specified page ($1) does not exist:.

*Status: ❌ FAIL
Environment: Beta
OS: macOS Sonoma 14.6.1
Browser: Chrome 128
Device: MBA
Emulated Device:** NA

Test Artifact(s):

Test Steps

1. Visit Special:Preferences and enable syntax highlighting (Color blind friendly).
2. Enable dark mode.
3. Click on "Edit source"
4. Activate "Syntax highlighting"

❌ AC1: Confirm that the syntax highlighting is functional. Confirm that the colors are compatible with dark mode. Confirm that all text is legible.

Source Editing	Visual Source

In T365311#10115378, @GMikesell-WMF wrote:

MusikAnimal Are you supposed to enable both syntax highlighting or am I supposed to use just "Use colorblind-friendly scheme? When checking both, you can see in the source editing gif, I get a failed to load data blob error.

I don't know why Realtime Preview is failing here – it's probably just Beta being slow as usual :-P Either way, it has no relation to this task, so you can just disable it by clicking "Preview" at the top-right.

If I switch to visual editor, I get "The specified page ($1) does not exist:.

Also not sure what this is, but it has nothing to do with CodeMirror.

https://en.wikipedia.beta.wmflabs.org/wiki/Star_Wars shows an error when trying to read the page, so for sure something is wonky on Beta! I am however somehow able to edit it.

If it helps, you're welcome to use the Patch Demo links for QA instead:

• CodeMirror 5 + WikiEditor: https://patchdemo.wmcloud.org/wikis/e9aed027c3/wiki/CodeMirror?action=edit&useskin=vector-2022&vectornightmode=1
• CodeMirror 6 + WikiEditor: https://patchdemo.wmcloud.org/wikis/e9aed027c3/wiki/CodeMirror?action=edit&useskin=vector-2022&vectornightmode=1&cm6enable=1
• CodeMirror 5 + 2017 editor: https://patchdemo.wmcloud.org/wikis/e9aed027c3/wiki/CodeMirror?veaction=editsource&useskin=vector-2022&vectornightmode=1
• CodeMirror 6 + 2017 editor: https://patchdemo.wmcloud.org/wikis/e9aed027c3/wiki/CodeMirror?veaction=editsource&useskin=vector-2022&vectornightmode=1&cm6enable=1

To be clear, we're looking only for glaring issues regarding the syntax highlighting of wikitext in dark mode. Any issue seen with other UI components is unrelated.

(There is also the new search panel, but we can save QA efforts for that for T371436. Dark mode for the new search panel should work fine as it's 100% Codex components, so I'm not asking to QA that here)

Noting https://patchdemo.wmcloud.org/wikis/e9aed027c3/wiki/CodeMirror?veaction=editsource&useskin=vector-2022&vectornightmode=1&cm6enable=1 sometimes doesn't load CodeMirror at all… that's a race condition (still unrelated to this task). I'll get a fix in, but if you encounter this issue just keep refreshing and it should eventually work.

Apologies for all of the confusion!

@MusikAnimal Beta definitely gets wonky at times. Thanks for the links! As seen from the gifs below, I did not encounter any issues with the syntax highlighting of wikitext in dark mode. I will move this to Done, thanks for all your work!

*Status: ✅ PASS
Environment: Patch Demo
OS: macOS Sonoma 14.6.1
Browser: Chrome 128
Device: MBA
Emulated Device:** NA

Test Artifact(s):

Test Steps

1. Visit Special:Preferences and enable syntax highlighting (Color blind friendly).
2. Enable dark mode.
3. Click on "Edit source"
4. Activate "Syntax highlighting"

✅ AC1: Confirm that the syntax highlighting is functional. Confirm that the colors are compatible with dark mode. Confirm that all text is legible.

CodeMirror 5 + WikiEditor: https://patchdemo.wmcloud.org/wikis/4226970e0f/wiki/CodeMirror?action=edit&useskin=vector-2022&vectornightmode=1

CodeMirror 6 + WikiEditor: https://patchdemo.wmcloud.org/wikis/4226970e0f/wiki/CodeMirror?action=edit&useskin=vector-2022&vectornightmode=1&cm6enable=1

CodeMirror 5 + 2017 editor: https://patchdemo.wmcloud.org/wikis/4226970e0f/wiki/CodeMirror?veaction=editsource&useskin=vector-2022&vectornightmode=1

CodeMirror 6 + 2017 editor: https://patchdemo.wmcloud.org/wikis/4226970e0f/wiki/CodeMirror?veaction=editsource&useskin=vector-2022&vectornightmode=1&cm6enable=1