Add support for Dark Mode plugin

[danieltj27]

As outlined in the recent merge proposal, it'd be great if we could work together to implement a Dark Mode into Gutenberg. Currently the UI is very bright and can make the eyes quite sore. It'd be nice if Gutenberg was a little darker when writing at night.

I've written a plugin compatibility guide on how plugin developers can easily support this alternative design and I think it'd be much more beneficial for the Gutenberg styling to be a part of this plugin so the styles can be much more easily maintained when the UI is updated.

Thanks!

[jasmussen]

Good news, this will be trivial very shortly.

I've assigned myself to work on #6451.

The thing is — using editor styles, you can already provide different colored backgrounds to the Gutenberg editing canvas. This works today.

However once the background color gets across the halfway threshold and needs inverted UI colors, this doesn't quite work yet. That is — the UI is ready for it, but the is-dark-theme body class isn't yet output. But I'll make that work next week.

In other words, you'd be able to write a plugin that outputs something like add_theme_support('dark-theme'), and then enqueue editor styles that change the colors of the canvas. Through this, you should be able to provide a dark theme.

[danieltj27]

The editor styles option doesn't address Dark Mode efficiently though. That assumes that everyone will have a certain copy of a 'Dark Gutenberg' but that won't always be the case. There needs to be a way to darken the UI without relying on editor styles to do instead. Whilst the current or planned implementation does benefit the UI, there needs to be an official 'Dark Mode for Gutenberg' baked into the Gutenberg code. Things like the side menu, the popups and the toolbars etc shouldn't be left to editor styles.

[jasmussen]

Ah right, I understand now, you weren't just referring to the editing canvas.

The rest of the UI takes many of its cues from wp-admin styles, notably with a little help from this file: https://github.com/WordPress/gutenberg/blob/master/bin/packages/post-css-config.js

Should be possible to create a pull request that adds a dark theme there. Or just override colors like other admin themes do.

[jasmussen]

I'm unsure what the next steps are for this one. What are changes that need to be made to Gutenberg in order to enable a separate dark mode feature to colorize the UI? Since no-one is assigned, I'm unassigning the "in progress" label for now.

[danieltj27]

Personally I'm not up to speed enough with Gutenberg to answer that, but I'd imagine that the current work that has been done only focuses on the editable content region whereas the sidebar and top panel still need addressing which is where a Dark Mode could take effect.

I doubt there's enough time to ship a Gutenberg Dark Mode in 5.0, so perhaps this is something for 5.1 maybe? All I know though is that the editor styles doesn't really reach far enough to cover Dark Mode properly.

[jasmussen]

I doubt there's enough time to ship a Gutenberg Dark Mode in 5.0

Definitely, we're past the UI freeze.

so perhaps this is something for 5.1 maybe?

This is where I'm unclear on what, specifically, needs to be done. My current understanding is that nothing needs to be done to gutenberg, that in fact the onus of work is on those developing the Dark Mode plugin. This is why I'm lacking some action items for the Gutenberg project.

All I know though is that the editor styles doesn't really reach far enough to cover Dark Mode properly.

Understood. This was an initial misunderstanding on my part — that this was about editor styles. I understand it's about the surrounding UI.

[paaljoachim]

I am wondering how this is going?
As a user might select a black background color in the customizer and editor styles might also reflect the same black background color and this would then hide all the editor layout controls.
It would be great with an intermediate solution as @talldan is suggesting in the PR until a permanent solution is in place.

[strarsis]

Added add_theme_support( 'dark-editor-style' ); to theme but I see no changes in UI colours, they look exactly the same. Hadn't this been implemented yet? Shouldn't the documentation reflect this fact?
https://developer.wordpress.org/block-editor/developers/themes/theme-support/#dark-backgrounds

[jasmussen]

Hi @strarsis, dark-editor-style support is purely for editor styles that are dark, not the editor UI itself. For example if your WordPress theme has a dark background, the block UI will show light borders instead of dark borders, so as to be visible. dark-editor-style is not "dark mode".

[strarsis]

@jasmussen: I see, but there are no changes in the editor UI, everything should be using light colours now, to contrast from e.g. dark background of editor wrapper (body in frontend)?

[jasmussen]

Do you have all the following present in your functions.php file?

add_theme_support( 'editor-styles' );
add_theme_support( 'dark-editor-style' );
add_editor_style( 'style-editor.css' );

where style-editor.css contains a dark background? Here's what I see:

[SJNBham]

I've had good experiences using the Dark Reader extension in Chrome and Edge (Chromium) on most sites. However, the dynamic option of that extension causes performance issues with WordPress admin when you have a bunch of plugins. There are so many stylesheets it's trying to dynamically interpret that it takes a few seconds longer than when the extension is disabled. Depending on the area of the admin I'm in, there's anywhere from 80-150 style sheets being loaded. You can use the static filter and that gets you by. But the dynamic filter is much better.

[Jumaron]

Any Updates on this?

[mtias]

This plugin no longer exists. Any work on dark mode support would need to be approached separately.