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

Add dark editor style support #9683

Merged
merged 4 commits into from Sep 10, 2018

Conversation

@jasmussen
Contributor

jasmussen commented Sep 7, 2018

This fixes #6451.

This PR enables a new command to themers. They can now add add_theme_support( 'dark-theme' ); in order to ask the editing canvas to be friendly to dark themes.

What this does is add a body class to the editor, is-dark-theme, which enables already present color changes to the side UI and borders, that are friendly to dark themes.

To test, add a dark editor style, then enable support. For example, add this to your theme functions.php:

/**
 * Enqueue editor style in Gutenberg
 */

function navi_gutenberg_styles() {
	 wp_enqueue_style( 'navi-gutenberg', get_theme_file_uri( '/style-editor.css' ), false, '1.0', 'all' );
}
add_action( 'enqueue_block_editor_assets', 'navi_gutenberg_styles' );
add_theme_support( 'editor-styles' );
add_theme_support( 'dark-theme' );

In "style-editor.css", put the following:

/**
 * Editor style
 */

body.gutenberg-editor-page {
	background-color: #252526;
}

body.gutenberg-editor-page .editor-post-title__block,
body.gutenberg-editor-page .editor-post-title__input,
body.gutenberg-editor-page .editor-default-block-appender,
body.gutenberg-editor-page .editor-block-list__block {
	color: white;
}

Now test and see that the UI is usable.

Screenshots:

screen shot 2018-09-07 at 11 53 39

screen shot 2018-09-07 at 11 56 19

Add dark editor style support
This fixes #6451.

This PR enables a new command to themers. They can now add `add_theme_support( 'dark-theme' );` in order to ask the editing canvas to be friendly to dark themes.

What this does is add a body class to the editor, `is-dark-theme`, which enables already present color changes to the side UI and borders, that are friendly to dark themes.

@jasmussen jasmussen self-assigned this Sep 7, 2018

@jasmussen jasmussen requested review from youknowriad and WordPress/gutenberg-core Sep 7, 2018

@tofumatt

This comment has been minimized.

Show comment
Hide comment
@tofumatt

tofumatt Sep 7, 2018

Member

😎

Member

tofumatt commented Sep 7, 2018

😎

@tofumatt

Makes sense to me; just a tweak in the documentation requested from me.

Show outdated Hide outdated docs/extensibility/theme-support.md Outdated

@tofumatt tofumatt self-requested a review Sep 7, 2018

@tofumatt

Tested locally with a dark theme sent to me by @jasmussen. Works though I find the light sidebar/topbar UI a bit odd:

screenshot 2018-09-07 23 17 21

But I think that's unrelated. 🚢

@karmatosed

This comment has been minimized.

Show comment
Hide comment
@karmatosed

karmatosed Sep 8, 2018

Member

I have to agree on the dark sidebar. I don't think we can tackle it but wow it really makes me want this to work throughout.

Member

karmatosed commented Sep 8, 2018

I have to agree on the dark sidebar. I don't think we can tackle it but wow it really makes me want this to work throughout.

@karmatosed karmatosed self-requested a review Sep 8, 2018

@karmatosed

🕳[ couldn't find dark emoji so imagine this is a blackhole ]. 👍

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 8, 2018

Contributor

Thanks for the reviews!

Important to note for passers by: this is not a dark theme for Gutenberg.

This PR enables UI to work on dark editor style backgrounds.

The difference here is that you can imagine any color background as defined by the WordPress theme in question. In this case, I picked a very dark gray at random.

Contributor

jasmussen commented Sep 8, 2018

Thanks for the reviews!

Important to note for passers by: this is not a dark theme for Gutenberg.

This PR enables UI to work on dark editor style backgrounds.

The difference here is that you can imagine any color background as defined by the WordPress theme in question. In this case, I picked a very dark gray at random.

@jasmussen jasmussen added this to the 3.9 milestone Sep 8, 2018

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 8, 2018

Contributor

🕳[ couldn't find dark emoji so imagine this is a blackhole ]. 👍

😂

Contributor

jasmussen commented Sep 8, 2018

🕳[ couldn't find dark emoji so imagine this is a blackhole ]. 👍

😂

@chrisvanpatten

This comment has been minimized.

Show comment
Hide comment
@chrisvanpatten

chrisvanpatten Sep 8, 2018

Contributor

Would it be worth renaming this "dark canvas" instead of "dark theme" to avoid confusion with the editor's own theme?

Contributor

chrisvanpatten commented Sep 8, 2018

Would it be worth renaming this "dark canvas" instead of "dark theme" to avoid confusion with the editor's own theme?

@tofumatt

This comment has been minimized.

Show comment
Hide comment
@tofumatt

tofumatt Sep 8, 2018

Member

"Dark canvas" sounds cool.

At any rate, sounds like this is doing the right thing, but it's sort of weird that dark canvas doesn't at least have some saner defaults. I get no styling has been done to the sidebar, but if that's how it looks unstyled we could do better.

But that can totally be a later issue. This isn't a super-high priority 🚢

Member

tofumatt commented Sep 8, 2018

"Dark canvas" sounds cool.

At any rate, sounds like this is doing the right thing, but it's sort of weird that dark canvas doesn't at least have some saner defaults. I get no styling has been done to the sidebar, but if that's how it looks unstyled we could do better.

But that can totally be a later issue. This isn't a super-high priority 🚢

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 9, 2018

Contributor

Maybe actually "dark-editor-style"?

I understand the lightness of the UI, but I'm not sure the UI should be affected by the content. As in, if the UI it too bright when editing a post in a dark WordPress theme, should the WordPress theme affect the UI?

Contributor

jasmussen commented Sep 9, 2018

Maybe actually "dark-editor-style"?

I understand the lightness of the UI, but I'm not sure the UI should be affected by the content. As in, if the UI it too bright when editing a post in a dark WordPress theme, should the WordPress theme affect the UI?

@tofumatt

This comment has been minimized.

Show comment
Hide comment
@tofumatt

tofumatt Sep 9, 2018

Member

That works for me.

Generally I'm cool with the idea that theme content doesn't affect UI or with the idea that it can, but since this PR seems to allow the latter to a certain degree I say we just go for it and allow further UI adjustments. 🤷‍♂️

As mentioned though: can happen later, feel free to ship 😊

Member

tofumatt commented Sep 9, 2018

That works for me.

Generally I'm cool with the idea that theme content doesn't affect UI or with the idea that it can, but since this PR seems to allow the latter to a certain degree I say we just go for it and allow further UI adjustments. 🤷‍♂️

As mentioned though: can happen later, feel free to ship 😊

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 9, 2018

Contributor

I appreciate your reviews quite a bit. Thank you. Have a good Sunday.

Contributor

jasmussen commented Sep 9, 2018

I appreciate your reviews quite a bit. Thank you. Have a good Sunday.

Use dark-editor-style instead.
Hopefully this will help prevent confusion.

@jasmussen jasmussen merged commit e90aad0 into master Sep 10, 2018

2 checks passed

codecov/project No report found to compare against
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@jasmussen jasmussen deleted the try/dark-editor-styles branch Sep 10, 2018

@jasmussen jasmussen referenced this pull request Sep 11, 2018

Merged

Add/drag handle #9569

10 of 10 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment