Wordpress-ios: Dark Mode Master Issue

Created on 14 Aug 2019  ·  36Comments  ·  Source: wordpress-mobile/WordPress-iOS

Goals

dark-mode-i2

Tasks

Global

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

Regressions

NUX

Editor

Stats

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

My Sites

  • [x] Posts cells (expanded view) have white backgrounds for some labels
  • [x] Post / pages tab bar style should match Stats
  • [x] Themes support icon isn't being tinted correctly
  • [x] Ghost view in posts / pages has a white background
  • [x] Activity logs (in help and support) have white text on white background
  • [x] Plans are still light colored
  • [x] Activity screen is still light colored
  • [x] Reverse text and textSubtle colors in Activity Log list.
  • [x] Remove divider below 'free plan' footer in Activity Log list
  • [x] Plans list 'Best for...' text should use textSubtle
  • [x] Menus: Down arrows and reorder handles should use textTertiary (via textPlaceholder?) Page icon beside 'new item' should use listIcon color.
  • [x] Menus: When editing a menu name, use tertiarySystemBackground / gray80 for the background color. Text should be text and X icon should be listIcon.
  • [x] 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 https://github.com/wordpress-mobile/WordPress-iOS/issues/12598
  • [ ] Settings: Time Zone & Tags screens have a white background when you pull to refresh https://github.com/wordpress-mobile/WordPress-iOS/issues/12599
  • [ ] Settings: Pickers have white text on white background (Posts per page & Discussion settings: Close commenting, Paging, Links in comments) https://github.com/wordpress-mobile/WordPress-iOS/issues/12600

Reader

Extensions

  • [x] Update widget
  • [x] Update share extension
  • [x] Update notifications rich content extension

V2

  • [ ] Make tab bar translucent

Switching between dark and light mode #12441

  • [ ] Reader Detail
  • [ ] Fancy button
  • [ ] SearchBar strokes

Notifications

  • [x] 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 🎉

Dark mode [Type] Beta OS

Most helpful comment

@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.

All 36 comments

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.

My Sites subsections outstanding:

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

IMG_64CCB4F0DE2C-1

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

Ghost view in posts / pages has a white background

Ghosts are the loading placeholders? Here's what I'm seeing (expanded and compact mode) and I think it's the ghost item that's already on the checklist:

wpios-13 2-beta-dark-mode-posts-list-loading-placeholders-are-light IMG_2992
Tested with WPiOS 13.2-beta1 (TestFlight) on iPhone 6S iOS 13.1 Beta 1 in Dark Mode.

Heading on the New Account screen seen during signup has a white background with very light gray text and the button at the bottom also has a light background:

new-account-email-unreadable-in-siwa-dark-mode-ios-13 1-beta1-wpios-13 2-beta1
Tested with WPiOS 13.2-beta1 (TestFlight) on iPhone 6S iOS 13.1 Beta 1 in Dark Mode—seen during Sign In With Apple testing.

Posts cells (expanded view) have white backgrounds for some labels

Spotted a couple examples of this:

  • Content shared from Bear
  • Space after the date field (only for the Me filter, in the Everyone filter the author name is shown there instead)
  • "Uploading post…" notice
  • "Upload failed" notice

wpios-13 2-beta-dark-mode-posts-list-me-filter wpios-13 2-beta-dark-mode-uploading-post-notice-has-white-bg
Tested with WPiOS 13.2-beta1 (TestFlight) on iPhone 6S iOS 13.1 Beta 1 in Dark Mode.

App logs are displayed with white text on a white background.

wpios-13 2-beta-dark-mode-white-text-on-white-bg-for-app-logs
Tested with WPiOS 13.2-beta1 (TestFlight) on iPhone 6S iOS 13.1 Beta 1 in Dark Mode.

Plans descriptions are still light colored.

IMG_2994
Tested with WPiOS 13.2-beta1 (TestFlight) on iPhone 6S iOS 13.1 Beta 1 in Dark Mode.

Activity screen is still light colored.

wpios-13 2-beta-dark-mode-activity-screen-still-light wpios-13 2-beta-dark-mode-individual-activity-screen-still-light
Tested with WPiOS 13.2-beta1 (TestFlight) on iPhone 6S iOS 13.1 Beta 1 in Dark Mode.

The countries map in stats is too dark for me to read.

wpios-13 2-beta-dark-mode-stats-countries-map-is-too-dark-to-be-readable
Tested with WPiOS 13.2-beta1 (TestFlight) on iPhone 6S iOS 13.1 Beta 1 in Dark Mode.

Terms of Service link on the "Sign up for WordPress.com" page is too dark to read.

IMG_3005
Tested with WPiOS 13.2-beta1 (TestFlight) on iPhone 6S iOS 13.1 Beta 1 in Dark Mode.

Text is black with a black background in Aztec HTML Mode.

IMG_3018
Tested with WPiOS 13.2-beta1 (TestFlight) on iPhone 6S iOS 13.1 Beta 1 in Dark Mode.

Adding this here because I haven't seen it in GitHub and want to be sure it's being tracked. Here are the specs for the button changes (in Prologue, Fancy Dialogs) we should make alongside Dark Mode.

buttons

Thanks @mattmiklic - button colours should be updated already, it’s just the border style and possibly font choice we need to update now.

Just noticed that the Post Titles on the Site Pages view are dim. I believe they should be white to match the Blog Posts view.

IMG_0572

Good catch @iamthomasbishop. The titles should use the text color and the dates should use textSubtle.

I just noticed a few wrong background colors in Plugins:

Simulator Screen Shot - iPhone Xs - 2019-09-05 at 15 12 13

Simulator Screen Shot - iPhone Xs - 2019-09-05 at 15 13 03

In this one, there's a black backgound behind the text that shouldn't be there. Also, the Version text should use the textSubtle color, and the body text of the Description should use the text color.

Simulator Screen Shot - iPhone Xs - 2019-09-05 at 15 13 10

In the activity log, the text and textSubtle colors should be reversed. In this screenshot the "About / Local draft / Draft / Draft page" text should be text and the "Page draft modified" etc text should be textSubtle.

There is also a divider below the table footer text which I think should be appearing above it directly adjacent to the table.

Simulator Screen Shot - iPhone Xs - 2019-09-05 at 15 21 04

On the Plans screen, the "Best for..." text should use the textSubtle color.

Simulator Screen Shot - iPhone Xs - 2019-09-05 at 15 24 12

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.

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.

    Simulator Screen Shot - iPhone Xs - 2019-09-05 at 15 27 35

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.

Simulator Screen Shot - iPhone Xs - 2019-09-05 at 15 27 16

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

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

Simulator Screen Shot - iPhone Xs - 2019-09-05 at 15 50 14

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.

Simulator Screen Shot - iPhone Xs - 2019-09-05 at 15 51 11

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.

IMG_1142

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.

IMG_1143

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.

IMG_1146

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

IMG_8DEB8F00F29C-1

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

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

@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.

Thanks @rachelmcr !

Comment moderation has incorrect background on the comment cell.

File (2)

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.

B01502C2-20E9-4568-AD13-16A538B3264C_L0_001
D2BC9489-D2F7-43F2-9A8B-AAC6741EDCC3_L0_001

Pinging @etoledom for that last one.

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

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

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

@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 ?

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

Was this page helpful?
0 / 5 - 0 ratings