New Block: Dark Mode Toggle

[bhubbard]

What problem does this address?

A simple block to let site visitors toggle between dark mode and light mode.

[ramonjd]

This could be useful, but might also be tricky to deliver in the plugin because it would be very difficult to guarantee that it would work for all themes.

How would you see it working, especially in terms of styles?

[bhubbard]

@ramonjd I could see the default being the toggle, if there are multiple styles available then I could see a possible setting to allow it to be a dropdown that lets the user choose the style.

[scruffian]

I think we'd need to add some tools for themes to be able to define "light" and "dark" colors.

[bhubbard]

I think we'd need to add some tools for themes to be able to define "light" and "dark" colors.

@scruffian I agree, maybe this needs to be supported in theme.json for styles?

[github-actions]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[bhubbard]

Any suggestions on how to move this forward?

[ramonjd]

Isn't this already possible with global style variations?

See: https://fullsiteediting.com/lessons/global-style-variations/

Given that light/dark modes will be very theme-specific, it makes sense that a theme could have 2 x global style variations to cater.

[bhubbard]

Isn't this already possible with global style variations?

See: https://fullsiteediting.com/lessons/global-style-variations/

Given that light/dark modes will be very theme-specific, it makes sense that a theme could have 2 x global style variations to cater.

A theme can have many styles. The original request is to have a dark mode/light mode toggle button block, such as this one for example: https://www.w3schools.com/howto/howto_js_toggle_dark_mode.asp

This light mode/dark mode toggle is becoming more common across websites today. As a website visitor if my browser/os is set to dark mode, they may still wish to see the website in light mode. At the moment I don't think theme.json has a way to set a "style" as dark mode or light mode specific, nor does it support "prefer-color-scheme".

Further Reading:

Prefers Color Scheme

[github-actions]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[Lewiscowles1986]

Just a note that mainstream browsers have JS and CSS support for detecting the user preference on dark-mode.

It's nothing but sparkling laziness to use a physical toggle if the default is not to respect the standards-based API's.

I'm also not 100% sold that it matters if the editing experience needs to be in lock-step with the display presentation theme. There is a preview button if someone needs to see what content looks like on their frontend as a visitor would see it.

I Created Automattic/blocks-everywhere#27 for Gutenberg outside of WordPress. Which presently describes a hack, which "works for me". This hack is predicated on the visual editor not being a WYSIWYG website editor; which honestly neither TinyMCE or Gutenberg are capable of achieving despite a lot of sunk effort and painful engineering to that end.

[github-actions]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[Lewiscowles1986]

Not sure who this bot is helping, but the progress on the linked issue I believe is that it was closed (marked as completed despite not being completed)
Automattic/blocks-everywhere#27 (comment)
It's really simple; mark as want help, not priority and leave open as its honest about the shortcomings of the platform / tooling. All these bots producing sparkling nonsense does not help end-users.

[Lewiscowles1986]

This issue for example does not need any more information. The only labels applied that make sense are [Type] Enhancement.

I'd argue that from labels, the following seemed like they might apply

• Accessibility (a11y)
• [a11y] Color Contrast
• CSS Styling
• [Feature] Colors
• [Feature] Custom Editor Styles
• [Feature] Design Tools
• General Interface
• [Feature] Style Variations
• [Priority] Low
• [Status] Blocked or [Status] Not Implemented

[github-actions]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[bhubbard]

Maybe we can move this forward by adding support for "prefers-color-scheme" to the styles JSON?

prefers-color-scheme: dark
prefers-color-scheme: light

• https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
• Discussion: prefers-color-scheme media-query #24368
• Check color contrast and provide recommendations to meet WCAG guidelines #16826

[Lewiscowles1986]

Thanks @bhubbard

So one limitation of a solely CSS based approach (although that is better than what we have now); is that it does not let a user set an override (for session or otherwise).

I did use the prefers-color-scheme, by-proxy, but because the software I'd integrated Gutenberg with had system theme independence, I also used some JS Automattic/blocks-everywhere#27

I Think not locking down to solely CSS is an ideal world, and I'm open to any world where I'm not writing custom CSS hacks 👍

[github-actions]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[Lewiscowles1986]

I'd like to move that bot forward... into the bin. While I understand the need to keep issues fresh and assess interest, it comes across as disinterest.

• https://blogs.perficient.com/2022/03/04/dark-mode-and-digital-accessibility-who-it-helps-and-without-it-who-it-may-hinder/
• https://www.nngroup.com/articles/dark-mode/ (benefits for users with cataracts)

For me it was purely aesthetic, but there are always benefits to supporting multi-palette UI if the cost can be controlled.

[github-actions]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[bhubbard]

@richtabor made a block for this: https://rich.blog/dark-mode-toggle-block/

[Lewiscowles1986]

So is this asking for a block for websites to add a toggle, or for Gutenberg itself to support dark-mode?

All my posts were for the latter, not the former.

[bhubbard]

@Lewiscowles1986 So the original request is for a new toggle block. Browsing a lot of templates, I do see a lot of sites doing a drop-down that has light, dark, and system (default) as the options. And I feel this is probably best, as it defaults to system, but site visitors can then choose to see light and dark when they wish.

Example:

Based on the comments, I do see some work that may need to be completed first, such as let developers define "prefers-color-scheme" for color palette's set within the theme.json file. It might also make sense to have this as a site option stored in the wp_options table, with default being system, but allowing site owners to override the default for the site globally.

[Lewiscowles1986]

@bhubbard are wp_options user-specific?
I thought it was not https://codex.wordpress.org/Database_Description#Table:_wp_options

To add complexity, I'm not 100% certain, that a user wanting dark-mode, would wish to do so for all of their devices.

[bhubbard]

@Lewiscowles1986 wp_options is not user-specific. But I was thinking its more for site owners to choose the default for their site, if they choose to not have it be "system". The idea being a user can always use this toggle or drop-down to then change on the front-end of the site.