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

Gutenberg DarkMode #12379

Merged
merged 7 commits into from Aug 26, 2019

Conversation

@etoledom
Copy link
Contributor

commented Aug 23, 2019

PR for Gutenberg DarkMode

GutenDark

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)
etoledom added 3 commits Aug 23, 2019

@etoledom etoledom added this to the 13.2 milestone Aug 23, 2019

@etoledom etoledom self-assigned this Aug 23, 2019

@etoledom etoledom changed the base branch from develop to gutenberg/1.11.0 Aug 23, 2019

@frosty
Copy link
Contributor

left a comment

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:

image

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:

image

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:

image-upload-1

@etoledom

This comment has been minimized.

Copy link
Contributor Author

commented Aug 26, 2019

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
frosty approved these changes Aug 26, 2019
Copy link
Contributor

left a comment

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

@etoledom etoledom merged commit b1412c2 into gutenberg/1.11.0 Aug 26, 2019

6 checks passed

Hound No violations found. Woof!
Peril All green. Woo!
Details
ci/circleci: Build UI Tests Your tests passed on CircleCI!
Details
ci/circleci: UI Tests (iPad 6th generation) Your tests passed on CircleCI!
Details
ci/circleci: UI Tests (iPhone Xs) Your tests passed on CircleCI!
Details
ci/circleci: build_and_test Your tests passed on CircleCI!
Details
@etoledom

This comment has been minimized.

Copy link
Contributor Author

commented Aug 26, 2019

Thank you!

(Also cc @iamthomasbishop about the image placeholder)

@etoledom etoledom deleted the issue/gutenberg-dark-mode branch Aug 26, 2019

@iamthomasbishop

This comment has been minimized.

Copy link

commented Aug 26, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Sep 15, 2019

@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 :)

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