Steps to replicate the issue (include links if applicable):
- Example URL: https://en.wikipedia.org/wiki/Hydrogen_chloride#Organic_synthesis (with dark theme enabled, there is a way to force DT in the URL)
- Mouse over some articles where the lede image (which appears when selected w/ mouse) is an SVG with a transparent background (possibly PNG also?).
- As can be seen, the content of the SVG is hard to distinguish from the background
- As I was writing it, this issue was fixed for the below file. Perhaps the pages simply need to purge and this is a duplicate request. (https://en.wikipedia.org/wiki/Hydrogen_chloride#See_also)
- Use #c8ccd1 for the background, do not use a CSS variable for this (see resources/skins.vector.styles/media.less for approach for images in article)
Derived Requirement
Ensure that SVG images with transparent backgrounds displayed in article previews on hover in dark mode have a visible background color (#c8ccd1), without using a CSS variable, to improve legibility.
BDD
gherkin Feature: Legibility of Transparent-background SVGs in Dark Mode on Article Previews Scenario: Display SVG images with a visible background color in dark mode article previews Given a user has enabled dark mode on the website And an article preview contains an SVG image with a transparent background When the user hovers over the article preview Then the background color of the SVG should be #c8ccd1 to improve legibility
Test Result - Beta|Prod
Status: ✅ PASS / ❓Need More Info / ❌ FAIL
Environment: beta/testwiki
OS: macOS Sonoma 15.0
Browser: Chrome 130
Device: MBA
Emulated Device: NA
Test Artifact(s):
Test Steps
Test Case 1: Verify Background Color of Transparent SVGs in Dark Mode
- Enable dark mode on Wikipedia.
- Navigate to Hydrogen chloride article.
- Hover over the article preview containing an SVG image with a transparent background.
- ✅❓❌⬜ AC1: Confirm that the SVG image background is displayed with the color #c8ccd1, making it legible in dark mode.
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T375045#10298169 |
QA Results - PROD
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T375045#10314222 |