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.

Sign up for GitHub

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
Merged

Add dark editor style support #9683

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fd4c2c5
Add dark editor style support
Sep 7, 2018
99204a0
Update documentation.
Sep 7, 2018
b3bdafd
Update theme support docs.
jasmussen Sep 7, 2018
c8335d5
Use dark-editor-style instead.
Sep 10, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions docs/extensibility/theme-support.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,13 @@ function mytheme_block_editor_styles() {
add_action( 'enqueue_block_editor_assets', 'mytheme_block_editor_styles' );
```

If your editor style relies on a dark background, you can add the following to invert the UI colors:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not really "Inverting the UI colours", it's more "tweaking the editor styles to accommodate a darker UI". It's not a 1:1 inversion.

Right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correct, it's definitely not a 1:1 inversion. I will add a change, awesome.

Is https://github.com/WordPress/gutenberg/pull/9683/files#diff-26f7754641e020003bf92e16ac862f50R471 kosher, though? I mean it works solidly for me, just want to make sure, as I've never ever touched that file before.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, come to think of it the docs should really include both add_theme_support( 'editor-styles' ); and add_theme_support( 'dark-theme' );, just for those who might be skimming the docs and not read above. I think that's fine…

The change itself makes sense to me, do you have a theme I can use to test it real quick? I don't have anything like that locally ^_^

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added the dark editor styles to https://github.com/jasmussen/navi, but I haven't pushed them so I sent the ones featuring copy pasta of the CSS above in a DM.

I'll make the docs change now.


```php
add_theme_support( 'dark-theme' );
```


### Basic colors

You can style the editor like any other webpage. Here's how to change the background color and the font color to blue:
Expand Down
8 changes: 6 additions & 2 deletions gutenberg.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -468,6 +468,10 @@ function toggleDropdown() {
* @return string The $classes string, with gutenberg-editor-page appended.
*/
function gutenberg_add_admin_body_class( $classes ) {
// Default to is-fullscreen-mode to avoid jumps in the UI.
return "$classes gutenberg-editor-page is-fullscreen-mode";
if ( current_theme_supports( 'editor-styles' ) && current_theme_supports( 'dark-theme' ) ) {
return "$classes gutenberg-editor-page is-fullscreen-mode is-dark-theme";
} else {
// Default to is-fullscreen-mode to avoid jumps in the UI.
return "$classes gutenberg-editor-page is-fullscreen-mode";
}
}