Page MenuHomePhabricator

Design research and proposal for dark mode
Closed, ResolvedPublic

Description

Comparative analysis of night / reading modes on iOS apps**: https://docs.google.com/presentation/d/1XdZeRqSFWnRNU0Uh-2P0CzcAXu2pIhMKdmsaiP6v1kk/edit?usp=sharing


Suggested design elements

Auto night mode toggle
Auto night mode based on environmental light conditions (like iBooks) automatically changes the reading theme to an appropriate setting (eg. dark mode when there is limited light). This could be toggled on and off by users in settings.

Image dimming toggle
Transparent black overlay on all images when the user has dark mode turned on. This could be toggled on and off by users in settings.

Night mode / reading themes applied on all app screens
Night mode and any other reading themes would be applied to all screens in the app, not just the reading view.

Adjust theme in reading theme and in settings
Allow users to adjust their reading theme and theme settings (auto night mode and image dimming) in their app settings. Additionally, allow users to switch between reading themes in the article view.

Stretch design elements

Brightness settings
A screen brightness slider with the same functionality of the brightness slider in the control center.

Reading themes
Themes are pre-set color combinations (text, links, backgrounds, chrome, etc). Reading themes were available on all of the iOS apps with night mode reviewed in the report above including Apple’s iBooks. Reading themes can help address reading comfort in a variety of reading situations. Creating themes in multiple colors that meet AAA accessibility standards will require additional design work and could potentially require a significant amount of development work.


Proposed color palette

Prototype https://wikimedia.invisionapp.com/share/6YCB5PV38#/240605346_Dark_Mode_-_Feed

Dark mode - Feed.png (667×375 px, 223 KB)
Dark mode - Article.png (667×375 px, 198 KB)

Dark mode color palette.png (1×899 px, 75 KB)

This color palette is built off of the WMF style guide and all color combinations utilized int he mocks above have WCAG conformance level of at least “AA,” with most having a "AAA" conformance level (layered background colors were not tested for WCAG conformance)

'Blue' was added as the WMF's Accent50 was not "AA" conformant on any of the dark backgrounds.
'Dark gray' was added as an additional dark background was needed for feed and article elements.


Preliminary reading controls

Prototype: https://wikimedia.invisionapp.com/share/NQC90AUSV#/239934092_01
(Colors used in the prototype were just for illustration purposes and do not match the colors used above)

Event Timeline

cmadeo updated the task description. (Show Details)
cmadeo subscribed.

To be added potentially to a future ticket, but here are some different possible presentation styles for accessing reading controls: https://wikimedia.invisionapp.com/share/NQC90AUSV

cmadeo removed cmadeo as the assignee of this task.Jul 3 2017, 8:10 PM
JMinor claimed this task.

Great work @cmadeo! Already looking good in the alpha channel...