Gutenberg DarkMode

[etoledom]

PR for Gutenberg DarkMode

Known Issues:

• ToolBar button colors are not changed. Will need some extra work.
• The SafeArea border colors on Landscape can get some more ❤️
• Dynamically changing between Dark and Light mode with the editor open, some parts of the editor won't change accordingly (bottom-sheet and a few elements in the toolbar)

All these will be worked on, on future PRs.

To test:

• rake dependencies
• Build and run using Xcode 11 (beta)
• Set the device to Dark Appearance
• Open gutenberg editor
• Check that is dark 🌑

Test for a solved crash:

• Open gutenberg editor
• Close gutenberg editor
• Go to iOS settings and change the appearance mode.
• Go back to WordPress app
• Check that it does not crash (there was a crash at this point before)

[frosty]

This is looking really good! I know you identified the toolbar as not being correctly coloured yet, but I also noticed one or two other things:

I think the deselected block movement icons are too faint – it's hard to make them out against the background. Also, in Thomas's original mockups the selected ones are a light grey instead of blue:

If possible, I think it'd be good if image placeholders and dimmed out uploading images were dark too – but this might need to wait for a future PR depending on complexity:

[etoledom]

Thank you for the review @frosty !

Yes, those issues with the toolbar button colors are the ones I was referring too. It will take some refactoring on the JS side to make the proper change, so the idea is to handle that on another PR.

I think it'd be good if image placeholders and dimmed out uploading images were dark too

Good catch! And I agree that it's better for a future PR too.

[frosty]

Okay, let’s ship this and address those other things separately!

[etoledom]

Thank you!

(Also cc @iamthomasbishop about the image placeholder)

[iamthomasbishop]

Agreed, this is looking really solid for the first version! I made some notes over the weekend of things I noticed on the design side, some of which you've already identified. I'd like to get these into the mix as quickly as possible, but I'll order based on "importance" from my POV:

• [Known] Toolbar buttons, icons, active state using old grays
• [Known, fix might be incoming] Crash when adding separator
• [Known] Image background when loading is light, display is jarring
• Quote is missing left border (https://cloudup.com/cSNcB3W9RmC)
• Placeholder labels on bottom sheet inputs are using old grays
• Separators on bottom sheets are still using old shades of gray
• List placeholder text isn't indented (https://cloudup.com/cfOYSzeUKnD)
• [Known] Image overlay while loading is light (use rgba(0,0,0,0.4))
• [Known, not just dark mode] Separator showing on left side of toolbar (https://cloudup.com/cBZ5PTWBmvE)

And as @frosty noted:

I think the deselected block movement icons are too faint

I agree, we should lighten these up. When we update those icon colors in general, let's make the disabled style color == gray 70 or gray 60.

[frosty]

@etoledom Do we have @iamthomasbishop's list of changes documented anywhere else (in an issue, maybe)? Just don't want to lose track of these :)