Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark Mode Master Issue #12320

Open
nheagy opened this issue Aug 14, 2019 · 33 comments

Comments

@nheagy
Copy link
Contributor

commented Aug 14, 2019

Goals

dark-mode-i2

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))
  • 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
  • Modal HUD shown after hitting Continue on New Account screen should use system grey background.

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
  • Post Settings: After setting a featured image, tapping on the featured image (e.g. to remove it) shows a white background
  • Block editor: Bullet overlaps placeholder when adding a new list block (dark mode only)

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
  • Settings: Time Zone & Tags screens have a white background when you pull to refresh
  • Settings: Pickers have white text on white background (Posts per page & Discussion settings: Close commenting, Paging, Links in comments)

Reader

  • Tapping "Reply" on a reader comment shows a white background around the comment
  • Followed Sites: Tapping Manage and then back leaves the "Manage" cell highlighted (white background)

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 🎉

@nheagy nheagy added the Dark mode label Aug 14, 2019

@nheagy nheagy self-assigned this Aug 14, 2019

nheagy added a commit that referenced this issue Aug 20, 2019
nheagy added a commit that referenced this issue Aug 20, 2019
Merge pull request #12344 from /issues/12320-no-results
Dark mode: Fix no results background color
@mattmiklic

This comment has been minimized.

Copy link
Member

commented Aug 21, 2019

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.

nheagy added a commit that referenced this issue Aug 21, 2019
Merge pull request #12345 from /issues/12320-stats-i2
Dark mode: fixes for stats: maps and view more
nheagy added a commit that referenced this issue Aug 22, 2019
Merge pull request #12355 from /issues/12320-new-loading-animation
Dark mode: loading animations and no results view text
@nheagy nheagy referenced this issue Aug 22, 2019
1 of 1 task complete
nheagy added a commit that referenced this issue Aug 22, 2019
Merge pull request #12357 from /issues/12320-remove-shade-label
Dark mode: remove shade label from semantic color functions
@frosty frosty referenced this issue Aug 22, 2019
1 of 1 task complete
nheagy added a commit that referenced this issue Aug 23, 2019
Merge pull request #12372 from /issues/12320-semantic-names-i2
Dark mode: semantic color names v2
@nheagy nheagy referenced this issue Aug 23, 2019
1 of 1 task complete
This was referenced Aug 23, 2019
@nheagy nheagy referenced this issue Aug 25, 2019
1 of 1 task complete
@frosty frosty referenced this issue Aug 26, 2019
1 of 1 task complete
nheagy added a commit that referenced this issue Aug 26, 2019
@frosty

This comment has been minimized.

Copy link
Contributor

commented Aug 26, 2019

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
nheagy added a commit that referenced this issue Aug 26, 2019
Merge pull request #12384 from /issues/12320-my-sites-i2
Dark Mode: My Sites section fixes part 1
@nheagy nheagy referenced this issue Aug 27, 2019
1 of 1 task complete
@frosty frosty referenced this issue Aug 27, 2019
1 of 1 task complete
nheagy added a commit that referenced this issue Aug 27, 2019
Merge pull request #12401 from /issues/12320-my-sites-p2
Dark Mode: My Sites Part 2
@jkmassel

This comment has been minimized.

Copy link
Contributor

commented Aug 28, 2019

IMG_64CCB4F0DE2C-1

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

@mattmiklic

This comment has been minimized.

Copy link
Member

commented Sep 3, 2019

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

@frosty

This comment has been minimized.

Copy link
Contributor

commented Sep 4, 2019

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

@iamthomasbishop

This comment has been minimized.

Copy link

commented Sep 5, 2019

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

@mattmiklic

This comment has been minimized.

Copy link
Member

commented Sep 5, 2019

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

@mattmiklic

This comment has been minimized.

Copy link
Member

commented Sep 5, 2019

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

@mattmiklic

This comment has been minimized.

Copy link
Member

commented Sep 5, 2019

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

@mattmiklic

This comment has been minimized.

Copy link
Member

commented Sep 5, 2019

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

@mattmiklic

This comment has been minimized.

Copy link
Member

commented Sep 5, 2019

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

This comment has been minimized.

Copy link
Member

commented Sep 5, 2019

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

@mattmiklic

This comment has been minimized.

Copy link
Member

commented Sep 5, 2019

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

@danielebogo

This comment has been minimized.

Copy link
Contributor

commented Sep 5, 2019

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

@mattmiklic

This comment has been minimized.

Copy link
Member

commented Sep 5, 2019

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

@mattmiklic

This comment has been minimized.

Copy link
Member

commented Sep 5, 2019

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

@mattmiklic

This comment has been minimized.

Copy link
Member

commented Sep 6, 2019

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.

@frosty

This comment has been minimized.

Copy link
Contributor

commented Sep 9, 2019

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

@rachelmcr

This comment has been minimized.

Copy link
Member

commented Sep 17, 2019

@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

This comment has been minimized.

Copy link
Contributor

commented Sep 17, 2019

Thanks @rachelmcr !

@elibud

This comment has been minimized.

Copy link
Contributor

commented Sep 19, 2019

Comment moderation has incorrect background on the comment cell.

File (2)

@melindahelt

This comment has been minimized.

Copy link

commented Sep 20, 2019

#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

@elibud

This comment has been minimized.

Copy link
Contributor

commented Sep 20, 2019

Pinging @etoledom for that last one.

@iamthomasbishop

This comment has been minimized.

Copy link

commented Sep 20, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
10 participants
You can’t perform that action at this time.