Steps to replicate the issue (include links if applicable):
- Visit desktop https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)/Archive_218#Thumbnail_background in dark mode
- Visit mobile - https://en.m.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)/Archive_218#Thumbnail_background in dark mode
What happens?:
Images use a fixed background color #c8ccd1 defined in Vector (https://gerrit.wikimedia.org/g/mediawiki/skins/Vector/+/df3e7fb3efa87111fd9de4cf23cb73f606993497/resources/skins.vector.styles/media.less#19)
and in Minerva (https://gerrit.wikimedia.org/g/mediawiki/skins/MinervaNeue/+/14ce43900462a0f82053afd084b9962896c1d068/resources/skins.minerva.styles/content/images.less#131)
What should have happened instead?:
- The images should be identical on mobile and desktop
- Following input from DST on T387543 the images should be updated to use a fixed white background (@background-color-base-fixed) in both dark and light mode
- In dark mode the images should also receive a filter: brightness(0.8);
- Light mode should not be impacted by our changes.
Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):
Other information (browser name/version, screenshots, etc.):
Requirement
Improve thumbnail styling for dark mode to ensure consistent appearance across desktop and mobile. Update styles to use a fixed white background and apply a brightness filter in dark mode, while preserving the current appearance in light mode.
BDD
Feature: Update thumbnail styling for dark mode legibility
Scenario: Thumbnails render consistently across skins
Given I view a thumbnail image in light or dark mode
Then the thumbnail has a white background
And it looks visually consistent across Minerva and Vector skins
Scenario: Thumbnails are filtered in dark mode for legibility
Given I view a page in dark mode
When I view a thumbnail
Then the thumbnail has a brightness filter applied
Scenario: Light mode appearance remains unchanged
Given I view a page in light mode
Then the thumbnail displays as it did previouslyTest Steps
Test Case 1: Verify thumbnails use white background and brightness filter in dark mode (Vector)
- Enable dark mode on desktop using Vector skin.
- Visit: https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)/Archive_218#Thumbnail_background
- Locate a thumbnail image.
- AC1: Confirm the background is white.
- AC2: Confirm a brightness(0.8) filter is applied.
Test Case 2: Verify thumbnails use white background and brightness filter in dark mode (Minerva)
- Enable dark mode on mobile (or emulate mobile view).
- Visit: https://en.m.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)/Archive_218#Thumbnail_background
- Scroll to a thumbnail.
- AC3: Confirm the background is white.
- AC4: Confirm a brightness(0.8) filter is applied.
Test Case 3: Verify light mode is unaffected
- Disable dark mode (return to light mode).
- Visit either desktop or mobile version of the above article.
- AC5: Confirm thumbnail styling remains unchanged from the previous behavior.
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T388197#10696596 |
| 2 | ✅ | T388197#10696596 |
| 3 | ✅ | T388197#10696596 |
| 4 | ❓ | T388197#10696596 |
| 5 | ✅ | T388197#10696596 |
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T388197#10711343 |
| 2 | ✅ | T388197#10711343 |
| 3 | ❌ | T388197#10711343 |
| 4 | ❓ | T388197#10711343 |
| 5 | ⬜ | T388197#10711343 |
In event of rollback, it's important not to revert 588efdff805. Reverting the Vector and Minerva changes should be sufficient.
