Why are we doing this?
As a part of the larger work on Reading themes and Appearance preferences we would like to include a way for users to 'dim' images for added reading comfort. Images are a large part of the Explore feed and without image dimming light or bright images might cause reading discomfort for some users.
User story
I use the Wikipedia app reading themes to read comfortably in the dark or in the evenings. I love all of the informative images in Wikipedia articles and in my feed, but light or bright images can make reading at night uncomfortable even when I have the Dark reading theme applied.
Design constraints
- Reducing image saturation will not work on black and white images
- Reducing image brightness can cause colorful images to appear 'blown out'
Design
 |  |  |
Image dimming toggle is disabled on Default and Sepia modes. Image dimming active on Dark mode.
Design details
- When image dimming is enabled, decrease image opacity to 65%
- In the first release image dimming will only be available on the Dark theme.
- The toggle will appear disabled on the Default and Sepia themes.
- The default is for image dimming to not be enabled (users will have to toggle image dimming on after switching to Dark theme)
- If a user has image dimming set to on/enabled on Dark theme, it would be ideal to remember this selected state if they toggle between themes (eg. image dimming on, on dark mode > toggle to default > toggle back to dark mode, image dimming should still be enabled).
Questions / future considerations
- Should the opacity be set at 65%? If not what is better? Play around with image opacity here: https://jsfiddle.net/carolynlm/k9b0d5qh/3/
- If we want to support image dimming for Sepia in a later release, I'd suggest that we utilize an opacity overlay of #7B4E10 at 25%
