Add support for setting widget areas as dark (darker background, light content) (original) (raw)

Unless I'm mistaken, there is currently no support for setting a sidebar widget area as having a dark background, therefore changing the content and appender to a lighter colour.

In the main post editor this is typically handled by using the .is-dark-theme CSS class.

Currently this is how a widget area looks with the background colour set by manually styling the background-color for [data-widget-area-id="header"] (with the sidebar name being "header" in this case):

Whereas by applying .is-dark-theme to the .wp-block-widget-area__inner-blocks container for the widget area the appender and paragraph content is now more visible. The colour of the appender automatically changes (handled by core), whereas the paragraph text colour has been styled by myself:

Currently the only approach to styling this would be to manually style every block and the core appender for the [data-widget-area-id="header"] selector, but this is less than ideal as it populates the amount of CSS needed and also means I would need to style core UI (the appender).

I propose 2 possible solutions to handle this:

1. Add a filter where you can manually set the CSS classes which are applied to the .wp-block-widget-area__inner-blocks container, where one argument of the filter is the name of the widget so you can then either apply the CSS class(es) to a particular widget area or all of them.
2. Enhance the register_sidebar API to add an array argument such as 'dark_theme' => true, where it will automatically apply the .is-dark-theme class. Arguably more user-friendly than the first option, but more restrictive.