This happens with all black characters and not only in CSS files.

I think that black text (with class="p") should remain black (if it doesn't change all the color scheme).

See https://www.mediawiki.org/wiki/Heading_HTML_changes for an HTML example.

Looks like .mw-highlight pre defines a hardcoded background of #f8f8f8 but doesn't define color so that needs updating.

I actually don't know what the appropriate thing to do here is. Right now it kind of looks like a fix was tried here and it didn't select the right element because of CSS elsewhere. SyntaxHighlight has this block of LESS:

/* pygments.wrapper.less */
.mw-highlight {
	...
	pre {
		...
		background-color: #f8f8f8;
	}

	code&,
	div& {
		background-color: #f8f8f8;
		color: #333;
	}
	...
}

And this separate block of CSS from elsewhere.

/* from pygments.generated.css */
.mw-highlight { background: #f8f8f8; }

pygments.generated.css is generated by updateCSS.php according to the documentation...? (What a pain.)

The skin (loading from common CSS folder) has:

@media screen {
  pre, code, .mw-code {
    background-color: var(--background-color-neutral-subtle, #f8f9fa); /* overridden by SH; in dark mode, --background-color-neutral-subtle is #202122 */
    color: var(--color-emphasized, #000); /* in dark mode, --color-emphasized is #fff */
    ...
  }
}

It's the skin color that's causing the color issue in SyntaxHighlight. I think the skin is probably doing fine. So I guess we can add the same color that was added for T356956 (the .mw-highlight pre's background-color), but either way it feels like way too many colors are running around all trying to do the same thing. (I actually think that div& may be wrong and causing the background to be displayed incorrectly next to floating content, something I don't recall occurring before recently. OK it was happening before recently but it is a visual bug, the pygments.generated.css is also to blame on that one.) I think there's also a question of whether this extension needs a fuller treatment to give it a real dark mode, which maybe can be a different task?

pygments.generated.css is generated by updateCSS.php according to the documentation...? (What a pain.)

Yes, it is essentially the default CSS style we use as provided by the pygments binary for the syntax highlighting. The pygments.wrapper.less is for the MW specific things which we then add on top of those defaults. This, some degree, is needed because the default <code> and <pre> elements ALSO provide styling and this needs more specificity for that reason as well as to color the parent of those nested code and pre elements.

I think there's also a question of whether this extension needs a fuller treatment to give it a real dark mode, which maybe can be a different task?

That definitely would be a separate task yes. I think there already is one, but not sure where... Hmm. maybe it was CodeMirror that already had a separate task for that.

Anyway, the pygments default shipped styles are listed at https://pygments.org/styles/, or we can completely write our own of course.

Ok, filed T365926: Develop or select a dark-friendlier color palette for syntax highlighting and T365927: SyntaxHighlight's background is a bit too expansive for those two items. The second one is a regression which looks to have been caused by dark theme work.

Change #1035658 had a related patch set uploaded (by Steven Rawson; author: Steven Rawson):

[mediawiki/extensions/SyntaxHighlight_GeSHi@master] SyntaxHighlight: Add color to override skin

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

Change #1035658 merged by jenkins-bot:

[mediawiki/extensions/SyntaxHighlight_GeSHi@master] SyntaxHighlight: Add color to override skin

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

Test Result - PROD

Status: ✅ PASS
Environment: PROD
OS: macOS Sonoma 14.5
Browser: Chrome 125
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Ensure Black Text Remains Visible in Dark Mode

1. Visit this page or this page in dark mode.
2. Verify that black text, including semicolons, colons, curly brackets, and full stops, remains visible.
3. ✅AC1: Confirm that black text does not inherit the background color and remains visible.