Change Details

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): * Visit https://m.mediawiki.org/w/index.php?title=Reading%2FWeb%2FAccessibility_for_reading%2FFrequently_asked_questions&minervanightmode=1 * Open main menu **What happens?**: All icons are gray on black: {F41797356} **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!) ``` .minerva-icon { filter: brightness(0) invert(1); } ``` **Other information** (browser name/version, screenshots, etc.):

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): * Visit https://m.mediawiki.org/w/index.php?title=Reading%2FWeb%2FAccessibility_for_reading%2FFrequently_asked_questions&minervanightmode=1 * Open main menu **What happens?**: All icons are gray on black: {F41797356} **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: * Hamburger menu * Page actions under article title (edit pencil) * Section headings * User placeholder icon on https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=User:User-0.5677663645738522-I%C3%B1t%C3%ABrn%C3%A2ti%C3%B4n%C3%A0liz%C3%A6ti%C3%B8n * Search icon

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): * Visit https://m.mediawiki.org/w/index.php?title=Reading%2FWeb%2FAccessibility_for_reading%2FFrequently_asked_questions&minervanightmode=1 * Open main menu **What happens?**: All icons are gray on black: {F41797356} **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: ```* Hamburger menu .minerva-icon {* Page actions under article title (edit pencil) filter: brightness(0) invert(1);* Section headings }* User placeholder icon on https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=User:User-0.5677663645738522-I%C3%B1t%C3%ABrn%C3%A2ti%C3%B4n%C3%A0liz%C3%A6ti%C3%B8n ```* Search icon **Other information** (browser name/version, screenshots, etc.):