Page MenuHomePhabricator

skin-invert-image stopped working on thumbnails
Closed, ResolvedPublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

What happens?:

  • The kanjis are displayed black on gray

What should have happened instead?:

  • The image should have been inverted to show the kanjis white on black

Since T388197 the dark mode styles use a brightness filter that overwrites the invert filter of the skin-invert-image class.
If this is now intentional, the docs on https://www.mediawiki.org/wiki/Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis#Apply_filters_to_dark_images_with_transparent_background should be updated.

Requirement

Images with the skin-invert-image class should be visually inverted in dark mode to maintain readability (e.g., black kanji should appear white on black backgrounds)

BDD

Feature: Inversion of images in dark mode using `skin-invert-image` class

Scenario: `skin-invert-image` thumbnail displays correctly in dark mode  
  Given I visit an article in dark mode  
  When the image with the `skin-invert-image` class loads  
  Then the image is visibly inverted (e.g., kanji appears white on black)

Test Steps

Test Case 1: Inverted image displays correctly in dark mode

  1. Visit https://de.wikipedia.org/wiki/Jiu_Jitsu
  2. Switch to dark mode
  3. Locate the first image in the article (kanji image)
  4. AC1: Confirm that the image is visually inverted using skin-invert-image styling (e.g., appears white on black)

QA Results - Prod

ACStatusDetails
1T391800#10910139

Event Timeline

Would a suitable approach be to add an exception for skin-invert and skin-invert-image in content.media-dark.less?

/* Desktop legacy HTML */
.mw-parser-output,
/* Parsoid HTML (mobile) */
section .mw-heading ~ div,
/* Parsoid HTML (desktop) */
section,
/* e.g. https://en.wikipedia.org/wiki/Pullback_(category_theory)#Universal_property */
dd,
/* For targeting p span.mw-default-size */
p {
	> span.mw-default-size,
	> figure[ typeof='mw:File' ],
	> figure[ typeof='mw:File/Thumb' ],
	> figure[ typeof='mw:File/Frameless' ] {
		&:not( .skin-invert, .skin-invert-image ) {
			img {
				background-color: @background-color-base-fixed;
				color: @color-base-fixed;
				filter: brightness( 0.8 );
			}
		}
	}
}
Jdrewniak triaged this task as Medium priority.Apr 28 2025, 5:17 PM
Jdrewniak moved this task from Incoming to Q4 on the Web-Team board.
Jdlrobson-WMF changed the task status from Open to In Progress.May 12 2025, 5:11 PM

Change #1153417 had a related patch set uploaded (by Gerrit Patch Uploader; author: My Name):

[mediawiki/core@master] skip dark-mode-image-styles rules for elements of class skin-invert-image, requested in T391800

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

The patch relocates some comments.

This has not been done arbitrarily, but stems from the observation
that a less to css preprocessor generates an empty rule, if the first
line consists solely of a comment:

html.skin-theme-clientpref-night {
  /* Desktop legacy HTML */
}

The difference can be tested online,
for instance with less-preview

Change #1153417 had a related patch set uploaded (by Jdlrobson; author: My Name):

[mediawiki/core@master] skip dark-mode-image-styles rules for elements of class skin-invert-image

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

Change #1153417 merged by jenkins-bot:

[mediawiki/core@master] Skin: skip brightness filter for images with skin-invert-image class

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

Test Result - Prod

Status:
Environment: dewiki
OS: macOS Sequoia 15.5
Browser: Chrome Canary (latest as of test date)
Device: MS
Emulated Device: NA

Test Steps

Test Case 1: Inverted image displays correctly in dark mode

  1. Visit https://de.wikipedia.org/wiki/Jiu_Jitsu
  2. Switch to dark mode
  3. Locate the first image in the article (kanji image)
  4. AC1: Confirm that the image is visually inverted using skin-invert-image styling (e.g., appears white on black)

The what should happen section states that the colors should be inverted. That's not what happens, and I'm not sure it is what should happen. Instead, the white bacground of the image goes from ffffff to d2d2d2 which is subtle, but probably what it should do.

LightDark
screenshot 38.png (422×324 px, 36 KB)
screenshot 39.png (415×341 px, 38 KB)

1.45.0-wmf.5 isn't live on dewiki yet

hgzh claimed this task.

This is fixed since 1.45.0-wmf.5

hgzh removed hgzh as the assignee of this task.Aug 11 2025, 1:47 PM