Dark Mode Master Issue

[nheagy]

Goals

• Add support for iOS 13's dark mode

Tasks

Global

• Add XCODE11 build flag to support parallel development between Xcode 10 & 11 (#12120)
• Create initial set of preview screenshots
• First-pass at dark mode support on main tab bar screens
• Dark mode versions for badged state of tab bar images
• Fancy alerts have white backgrounds
• Revisions section has white backgrounds
• QuickStart has some white background
• Add new site flow has some white background
• Update fancy button border style (#12320 (comment)) #12592
• Change textPlaceholder Muriel color to use tertiaryLabel on iOS 13.
• Register domain has white backgrounds
• Edit comment is white text on white background.
• Pending comments have a white background.
• Gravatar cropping screen has a white background

Regressions

• Reader tag area shows visible side gradients: #12457
• Web preview has blue toolbar on iOS 12

NUX

• Dark mode for NUX
• Login NUX button has black spinner while signing in
• Header text on sign up bottom sheet isn't readable
• Header and footer on signup epilogue are white and should be listForeground
• New account epilogue has a different color behind 'new account' which shouldn't be there #12593
• Modal HUD shown after hitting Continue on New Account screen should use system grey background. #12595
• Activity indicator on secondary NUX buttons appears white-on-white in light mode. #140

Editor

• Dark mode for editor
• Dark text on dark background in Aztec HTML mode
• Post Settings: Tags screen has white to the left and right of the tags field #12596
• Post Settings: After setting a featured image, tapping on the featured image (e.g. to remove it) shows a white background #12597
• Block editor: Bullet overlaps placeholder when adding a new list block (dark mode only) #1391 Gutenberg

Stats

• Some areas in Stats Insights still have white backgrounds
• Dark countries map can be too dark to read

My Sites

• Posts cells (expanded view) have white backgrounds for some labels
• Post / pages tab bar style should match Stats
• Themes support icon isn't being tinted correctly
• Ghost view in posts / pages has a white background
• Activity logs (in help and support) have white text on white background
• Plans are still light colored
• Activity screen is still light colored
• Reverse text and textSubtle colors in Activity Log list.
• Remove divider below 'free plan' footer in Activity Log list
• Plans list 'Best for...' text should use textSubtle
• Menus: Down arrows and reorder handles should use textTertiary (via textPlaceholder?) Page icon beside 'new item' should use listIcon color.
• Menus: When editing a menu name, use tertiarySystemBackground / gray80 for the background color. Text should be text and X icon should be listIcon.
• Sharing > Sharing Buttons / Manage > Edit sharing buttons – icons should use listIcon. "share this" and "official buttons" should use textSubtle.
• Posts list: After trashing a post, the "undo" cell has a white background #12598
• Settings: Time Zone & Tags screens have a white background when you pull to refresh #12599
• Settings: Pickers have white text on white background (Posts per page & Discussion settings: Close commenting, Paging, Links in comments) #12600

Reader

• Tapping "Reply" on a reader comment shows a white background around the comment #12601
• Followed Sites: Tapping Manage and then back leaves the "Manage" cell highlighted (white background) #12602
• When liking a post, the star icon has a black background during the animation #12603

Extensions

• Update widget
• Update share extension
• Update notifications rich content extension

V2

• Make tab bar translucent

Switching between dark and light mode #12441

• Reader Detail
• Fancy button
• SearchBar strokes

Notifications

• Comment moderation has incorrect background on the comment cell, screenshot added to the thread.

Analytics

There are no analytics events for this project.

Related issues

This will finally close #6373 🎉

[mattmiklic]

Let's swap the gray being used for the bottom tab bar to the default system gray color used for tabs. I'm not sure if the color has a name but it's #757575 in dark mode, #999999 in light mode. That will make the tab bar match what's seen in the mockups above.

[frosty]

My Sites subsections outstanding:

• Post / pages tab bar style should match Stats
• Themes support icon isn't being tinted correctly
• Ghost view in posts / pages has a white background

[jkmassel]

Adding this to the pile – the black-on-black text is hard to read

[mattmiklic]

According to the semantic color names spreadsheet, textPlaceholder uses muriel gray 30 on iOS 13. We should switch that to use the system tertiaryLabel color for iOS 13 as that's the color Apple says is intended for placeholders.

[mattmiklic]

On the Menus screen:

• The chevron-down icon and the icon that's used to drag and reorder items in the menu should both use the textTertiary color. The Page icon (beside "New item") and the pencil icon (beside "Default Menu") should use the listIcon color.

[mattmiklic]

Also in Menus, when editing a menu name in dark mode the background color is too light. For iOS 13 we should use tertiarySystemBackground and for iOS 12 and below we can use muriel Gray 80.

The text should be text color and the (X) icon should be listIcon.

[danielebogo]

Thanks @mattmiklic for these feedback! I already fixed some (even the page in Pages @iamthomasbishop )

[mattmiklic]

Under Sharing > Sharing Buttons / Manage > Edit sharing buttons, the icons in the list should use listIcon.

[mattmiklic]

Also in Menus, the "Share this" and "Official buttons" text should use whatever we're using elsewhere in this kind of view. I think it's textSubtle but am not sure.

[mattmiklic]

This is testing 13.2.1.0 from Testflight:

On the New Account created screen, the background color behind the status bar is different from the color behind the rest of the page. The color behind the status bar is the one that's incorrect.

The modal progress indicator that appears after hitting Continue on the New Account screen looks off; this should use a regular material background, a standard spinner, and text color text; but I'm not sure if that is time consuming. Maybe just using a system gray background in the interim would help so it responds to dark mode.

There's a layout bug on Notifications the first time the screen is loaded. If the user hasn't already allowed notifications it causes the tab bar to be cut off.

If the user has dismissed the push notification prompt, there's just a bunch of extra space above the first notification in the list.

This isn't specific to dark mode but it is new as of 13.2.

[frosty]

I've added all the open reports in here to the task list at the top of this issue.

[rachelmcr]

@frosty I've added the additional issues I saw to the task list (under My Sites, Editor, Reader). If anything is unclear please let me know and I can clarify with screenshots, etc.

[danielebogo]

Thanks @rachelmcr !

[elibud]

Comment moderation has incorrect background on the comment cell.

[melindahelt]

#2364138-zen

Reported: I have a bug in Wordpress iOS night mode. In my iOS 13.1 beta in paragraph and order text is white and background is white to! I hope you will update to fix this.

[elibud]

Pinging @etoledom for that last one.

[iamthomasbishop]

@melindahelt @elibud that's on Aztec so I think @frosty might also be able to assist with that issue

[designsimply]

Profile > Help & Support > My Tickets screen is still light colored:

^{Tested with WPiOS 13.3.0.0 (TestFlight) on iPhone 6S iOS 13.1 beta 4.}

[etoledom]

@melindahelt @elibud that's on Aztec so I think @frosty might also be able to assist with that issue

I can take it during the week unless someone is already taking care of it. @frosty, @danielebogo ?

[frosty]

This issue closed because tracking of these issues has now moved over to a Github Project: https://github.com/orgs/wordpress-mobile/projects/45