== Background
Most of our feedback is about SVG images that are not legible. I think it would make sense to apply a checked background to these images as we do in Multimedia Viewer.
== User story
- As a reader the default display of SVG images added outside templates and tables should be acceptable.
== Requirement
Ensure that a default background color of #C8CCD1 is applied to top-level SVG images outside of templates and tables in night mode, while ensuring that infobox images and images within div elements are excluded. The solution should be compatible with mobile and Parsoid HTML.
== BDD
```
Feature: Apply Default Background to Images in Night Mode
Scenario: Apply background to top-level SVG images in night mode
Given the user is viewing a page in night mode
When the page contains top-level SVG images outside of templates and tables
Then the images should have a background color of #C8CCD1
Scenario: Exclude background for infobox and div images
Given the user is viewing a page in night mode
When the page contains SVG images within infoboxes or div elements
Then the images should not have the background color applied
```
== Test Steps
__Test Case 1: Verify Background on Top-Level SVG Images in Night Mode__
1. Navigate to the following pages in night mode:
- [L-DOPA](https://en.wikipedia.org/wiki/L-DOPA)
- [The arts](https://en.wikipedia.org/wiki/The_arts#Music)
- [Human](https://en.wikipedia.org/wiki/Human#Gender)
- [Forceps](https://en.wikipedia.org/wiki/Forceps#Thumb_forceps)
- [Greek alphabet](https://en.wikipedia.org/wiki/Greek_alphabet#Diacritics)
- [Chroma subsampling](https://en.wikipedia.org/wiki/Chroma_subsampling)
- [Hexadecimal](https://en.wikipedia.org/wiki/Hexadecimal#Verbal_and_digital_representations)
- [Homotopy lifting property](https://en.wikipedia.org/wiki/Homotopy_lifting_property#Formal_definition)
- [Phase-change memory](https://en.wikipedia.org/wiki/Phase-change_memory#PRAM_vs._Flash)
- [Oblique projection](https://en.wikipedia.org/wiki/Oblique_projection?debug=1#Oblique_pictorial)
- [UConn Huskies women's basketball](https://en.wikipedia.org/wiki/UConn_Huskies_women%27s_basketball)
- [Indiana Hoosiers men's basketball](https://en.wikipedia.org/wiki/Indiana_Hoosiers_men%27s_basketball)
- [Ketosis](https://en.wikipedia.org/wiki/Ketosis)
- [Earth](https://en.wikipedia.org/wiki/Earth)
- [Indian General Election 2024](https://en.wikipedia.org/wiki/File:Indian_General_Election_2024.svg)
2. **AC1:** Confirm that the top-level SVG images have a background color of #C8CCD1.
__Test Case 2: Verify Background Exclusion for Infobox and Div Images__
1. Navigate to the following pages in night mode:
- [McDonald's](https://en.wikipedia.org/wiki/McDonald%27s)
- [Starbucks](https://en.wikipedia.org/wiki/Starbucks)
- [Audi](https://en.wikipedia.org/wiki/Audi)
- [Ericsson](https://en.wikipedia.org/wiki/Ericsson)
- [Gibraltar national football team](https://en.wikipedia.org/wiki/Gibraltar_national_football_team)
2. **AC2:** Confirm that SVG images within infoboxes and div elements do not have the background color applied.
== Design
(Not checked by Justin yet)
== Acceptance criteria
[] All images that are "top level" images outside of templates and tables get a background in dark mode. After speaking with the design team, I think a solid, mid-grey background is the best way forward. This was also the solution that the Android App team landed on independently of us.
Let's use the light mode hex for disabled for now, and since we don't have a fixed token for that value, lets use the hex for now: #C8CCD1 `@background-color-disabled-fixed`
[] The background only applies in dark mode.
[] The background doesn't apply to infoboxes
[] The background doesn't apply to images inside a div e.g. team jerseys in infobox on https://en.wikipedia.org/wiki/Gibraltar_national_football_team - only apply it to figure elementss that are direct descendants of the parser output.
[] The solution should apply to mobile HTML
[] The solution should apply to Parsoid HTML e.g. when appending ?useparsoid=1 to URL
[] The solution should apply to mobile Parsoid HTML e.g. when appending ?useparsoid=1 to URL
[] The background should apply to the file page image.
[] Use @screen for both the night and os themes.
== TODO
[] Patch for file pages https://gerrit.wikimedia.org/r/c/mediawiki/core/+/1058643
[x] Patch for Vector https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1058619
[] Patch for Minerva
== Communication criteria - does this need an announcement or discussion?
N/A.
== Rollback plan
N/A.
//This task was created by Version 1.0.0 of the [[ https://mediawiki.org/w/index.php?title=Reading/Web/Request_process | Web team task template ]] using [[ https://phabulous.toolforge.org/ | phabulous ]] //
Desktop only per T370074#10051805
== QA Results - PROD for Desktop only
| **AC** | **Status** | **Details** |
| ----- | ----- | ----- |
| 1 | ✅ | T367871#10045365 |