Core Block suggestion: Theme Style Toggle

[tomdevisser]

What problem does this address?

The site owner can't easily let visitors change the appearance of the site, which could improve accessibility. Think "high contrast" style or "dark mode". Also the theme styles are such a nice addition, but there's way more potential hidden behind a really simple block. Right now only the site owner can change the style, but the other styles stay "hidden" and inactive.

What is your proposed solution?

Add a simple toggle block which you could e.g. add to your site header, where you select one of your Theme Styles to toggle to. As soon as you click the toggle, the styles toggle to the chosen style. This way you can easily add a High Contrast style, Big Fonts style, Dark Mode style, etc. to your site, making it more accessible and/or providing a better user experience.

Can be as easy as this example.

[joedolson]

We discussed this in the accessibility bug scrub today, and think that this would be a great feature to standardize. A few questions to consider:

1) Should this only support two design variants, or more? 2) Should there be a mechanism in the style book for quickly comparing the variants to ensure that the design implementation is complete on both?

[spacedragn]

I’m shocked there isn’t a suitable plugin on the market to address this, given how smoothly Style Variations operate within the Site Editor (“Browse Styles” pane) and the growing client expectations on Dark Mode.

Considerations

• The “Browse Styles” pane might include a way to designate light and dark Variations for prefers-color-scheme
• This proposed “Toggle Styles” block could be a checkbox list to select your Variations for front-end rendering
• If one Variation is picked, the “Toggle Styles” block renders as a basic toggle button (as OP suggests)
• If multiple Variations are picked, then it might convert to a dropdown feature

Related conversations: https://github.com/WordPress/gutenberg/issues/42828 https://github.com/WordPress/gutenberg/issues/24368 https://wordpress.org/support/topic/best-practice-theme-json-for-dark-mode/

[egor-kugno]

Good afternoon Please allow theme authors to publish their themes with theme switching blocks from dark to light (and vice versa) in the Wordpress repository. This problem has been pointed out by one of the most popular authors of free themes for vordpress, Anders Noren in this topic I am sincerely convinced that Anders's opinion is worth listening to - he personally with his free themes has added to the worldwide popularity of Wordpress at least 1 percent of those 43% of the world's sites that run on Wordpress.

[bph]

@richtabor built such a block: See Dark Mode Toggle Block

[richtabor]

I don't think this block would be suitable for core, as we'd need a way to effectively apply a dark mode style to any theme (not feasible).

My dark mode toggle block is is block, along with instructions for setting up CSS on your end.

I propose we close this.

[dhanson-wp]

I recently came upon this variation style switcher block in this video. Looks like a pretty simple plugin that accomplishes the main feature in this suggested feature for block themes.

[saschafoerster]

@dhanson-wp Tried the last plugin out with my custom styles and it did not work as expected. Also it creates an annoying menu in the backend instead of hiding.

[justintadlock]

Should this only support two design variants, or more?

I believe it should support any number and not be limited to something like dark vs. light mode.

I think the best course of action would be to integrate with the existing style variations system so that we're not introducing a new concept for themers to learn.

Under the hood, there's probably some things to work out with the way variations are stored. For example, users can't make per-variation style overrides, and style variations themselves are stored as user customizations (see: https://github.com/WordPress/gutenberg/issues/62661).

[daotw]

Reminder: It should automatically detect site visitors' preference through an OS setting or a user agent setting, or provide a way to work with prefers-color-scheme.