Page MenuHomePhabricator

[Share Highlights] Add transparent and average image color backgrounds
Closed, ResolvedPublic3 Estimated Story Points

Description

The share card currently has 3 backgrounds: white, dark, and wikipedia.

Acceptance criteria

  • remove wikipedia's background - not in design
  • implement the transparent background - design
  • re-use the average image color logic from ImageBrowsing - design
  • full tinting of wordmark and license icon images is not implemented with this patch; broken out to T423210

Event Timeline

HSwan-WMF set the point value for this task to 3.Mar 24 2026, 4:20 PM
SherryYang-WMF raised the priority of this task from Low to Medium.Apr 1 2026, 4:58 PM
mfossati changed the task status from Open to In Progress.Apr 7 2026, 2:13 PM
mfossati claimed this task.

Change #1268983 had a related patch set uploaded (by Marco Fossati; author: Marco Fossati):

[mediawiki/extensions/ReaderExperiments@master] ShareHighlight: add transparent and average image color backgrounds

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

Change #1268983 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] ShareHighlight: add transparent and average image color backgrounds

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

bvibber subscribed.

Merged! There was some excitement with a node version problem breaking the testing, which has been happily resolved thanks to our dear friends looking out for us in the guts of jenkins <3

Broke out the tinting details to T423210, will attach my exploratory patch to it.

Etonkovidova subscribed.
SUMMARY of Testing

Checked on itwiki wmf.24

  • transparent and average color options for backgrounds are present

itwiki wmf.24 https://it.wikipedia.org/wiki/Marna_(fiume)?shareHighlight=1

average is enabled
Screenshot 2026-04-16 at 9.51.53 AM.png (968×1,668 px, 1 MB)
transparent is enabled
Screenshot 2026-04-16 at 12.07.15 PM.png (361×782 px, 285 KB)
  • if Dark mode (in mobile Settings) is enabled there not so much visual difference between Dark, Light, and Transparent mode options on the Share card - see the gif below.
    • also, all options on the share card, i.e. the logo, license logos should be equally visible in any mode

share_highlight_modes.gif (405×834 px, 230 KB)

  • if Dark mode (in mobile Settings) is enabled there not so much visual difference between Dark, Light, and Transparent mode options on the Share card - see the gif below.

share_highlight_modes.gif (405×834 px, 230 KB)

Filed a follow-up task: T423688: [Share Highlights] Light and transparent backgrounds don't display properly in Minerva's dark theme.

  • also, all options on the share card, i.e. the logo, license logos should be equally visible in any mode

Mentioned in T423210: [Share Highlights] Tinting for Wikipedia wordmark and license icons.

Thanks @Etonkovidova for spotting!