Steps to replicate the issue (include links if applicable):
What happens?:
A figcaption of an image using the skin-invert CSS class is also inverted.
 |  |
| Without skin-invert CSS class | With skin-invert CSS class |
What should have happened instead?:
Only the image should be inverted.
Acceptance criteria
- A new skin-invert-image class is added that allows editors to mark up HTML so that in dark mode, img tags found within the element are inverted. e.g. .skin-invert-svg img { filter: invert( 1 ); }
- If editors, mix skin-invert and skin-invert-svg, this will be considered either bad input from the editor or is used intentionally and we don't need to worry about this case.
- Class should apply to Minerva and Vector 2022 skins.
QA
The image should show on https://en.wikipedia.beta.wmflabs.org/wiki/T365102?vectornightmode=1
Requirement
Add a new skin-invert-image class to allow editors to mark up HTML so that in dark mode, only the img tags within the element are inverted. Ensure this class applies to both Minerva and Vector 2022 skins. Verify the implementation on the specified beta test page and the provided production page.
BDD
gherkin
Feature: Apply skin-invert-image Class for Image Inversion in Dark Mode
Scenario: Invert only img tags within elements using skin-invert-image class
Given an image element using the skin-invert-image class
When the user views the image in dark mode
Then image shows with correct contrast
And this should apply to both Minerva and Vector 2022 skinsTest Steps
Test Case 1: Verify skin-invert-image Class Implementation
- Enable dark mode in the Vector 2022 skin.
- Navigate to the test page on beta or production.
- Verify that only the img tag within the element using the skin-invert-image class is inverted.
- AC1: Image shows with correct contrast
Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia): WMF-hosted frwiki
Other information (browser name/version, screenshots, etc.):
Sign off
https://www.mediawiki.org/wiki/Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis is updated to reference the new class.
QA Results - FAIL
| AC | Status | Details |
|---|---|---|
| 1 | ❌ | T365102#9894024 failure is addressed in T367589 |
