Page MenuHomePhabricator

Minerva/MobileFrontend icons not using embedded data URI rules should be compatible with night mode
Open, HighPublic2 Estimated Story PointsBUG REPORT

Description

For performance reasons we use image URLs rather than embedded images for URL. This means they can't be colored in the same way as other icons.

For now, we will use an invert. We will later do a spike to explore better more maintainable options.

Steps to replicate the issue (include links if applicable):

What happens?:
All icons are gray on black:

Screenshot 2024-02-06 at 3.09.02 PM.png (1×1 px, 183 KB)

What should have happened instead?:

Icons should appear white or off-white.

Software version (skip for WMF-hosted wikis like Wikipedia):
The following CSS should be applied in night mode (make sure to workshop this with Justin!)

Proposed fix: Add the skin-invert class to all icons that do not use the Codex mixin.

Other information (browser name/version, screenshots, etc.):

QA

Check icons on following pageS:

Event Timeline

Jdlrobson renamed this task from Minerva icons should be compatible with night mode to Minerva logos and icons should be compatible with night mode.Tue, Feb 6, 11:24 PM
Jdlrobson renamed this task from Minerva logos and icons should be compatible with night mode to Minerva icons should be compatible with night mode.
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: JScherer-WMF.
Jdlrobson lowered the priority of this task from High to Medium.Thu, Feb 8, 7:14 PM

The invert approach should be sufficient for our needs for now, but I think it'll be worth investigating if we can use the mask-image + background-color approach used in the last-edited toolbar for icons more broadly.

Screenshot 2024-02-12 at 2.07.18 PM.png (374×1 px, 125 KB)

That would allow us to use the CSS variable colors for the night mode version of the icons.
(I'll set up a spike around this).

Jdlrobson renamed this task from Minerva icons should be compatible with night mode to Minerva icons not using embedded data URI rules should be compatible with night mode.Thu, Feb 15, 6:24 PM
Jdlrobson updated the task description. (Show Details)
ovasileva raised the priority of this task from Medium to High.Thu, Feb 15, 6:29 PM
ovasileva set the point value for this task to 2.
Jdlrobson renamed this task from Minerva icons not using embedded data URI rules should be compatible with night mode to Minerva/MobileFrontend icons not using embedded data URI rules should be compatible with night mode.Fri, Feb 23, 6:51 PM
Jdlrobson updated the task description. (Show Details)