Automatic dark mode

[jenxi]

Make the theme switch between light and dark style variations based on system preference.

It could be a way for users to discover how style variations can be used.

@richtabor has a toggle block for it https://github.com/richtabor/dark-mode-toggle-block.

[saschafoerster]

I am searching and hoping exactly for that. Some other dark/light-mode-plugins do it automatically but not well enough. I wish to have more control and the you described would be my expectation: I can create a style and then the toggle switches between (at least) two defined ones.

[MaggieCabrera]

This is something that needs to happen in Gutenberg/core more than in the theme, I think. Is there an open GB issue for this so we can add it to the wishlist?

[carolinan]

Automated dark mode depending on preferences and a toggle can also be thought of as two separate features.

Core Block suggestion: Theme Style Toggle https://github.com/WordPress/gutenberg/issues/48249

[richtabor]

It's possible, but from my experience not something that most users will want, nor expect. I think it'll likely be more confusing why the site looks different.

[richtabor]

I think perhaps it's something that a plugin can do exceptionally well, even my dark mode toggle block perhaps, but it does require a bit of a lift from the user.

[aristath]

Toggling between dark and light modes is the easy part, and not the part we should (IMO) focus on. Thinking of what dark/light mode actually does, we'd need a way for users to define different pallettes for each mode. If they define a background or color for a block, they should be able to select 2 colors instead of one, one for each mode. Before we even consider adding a toggle, first we need to figure out how to allow users to define 2 colorsets for each element/block! That will require a refactor in a few components, and we should definitely work towards that - but it's not something that can be implemented without A LOT of forethought and design.

[aristath]

An addition to my previous comment: It is possible to automatically calculate all colors... 🤔 We could for example add a script on the frontent which would allow us to get the hues, revert the lightness, and apply a11y principles to ensure that everything is still readable when the user switches modes. However, it may lead to unexpected results. Auto-calculating colors is easy. but sub-optimal for most sites.

[carolinan]

While not a true dark mode, nor automatic, but I would like the visitor to be able to select from the color palette presets that the theme ships with.

[joedolson]

A thought concerning a possible interface for selecting colors is to give the entire editor multiple editing modes, so that when editing in dark mode, you're selecting colors for the dark mode preference, and when editing in light mode, you're selecting for standard mode.

Rather than revamping all components, it would change the data storage and sources, so that you'd build a separate profile. This could also have some linting that could compare the two profiles to identify decisions that hadn't been made yet.

Not really a theme issue, more an editor issue, but conceptually, that's how I'd probably want to set it up.

[carolinan]

Yes, there is currently no way for users to create their own global style variations, and save them for later use. They only override the current styles. I will try to find the discussion on the Gutenberg repo and see how it is progressing.

[karmatosed]

I would vote for a dark color style set which is high contrast even, but I do think that having a dark mode switch falls to me inside the interface over the theme itself. As noted, a true dark mode switches everything. Now having a theme switch only is different hence a dark style would be great.

[richtabor]

Sure, a dark style variation should be included. But not one that admin interface alongside, or one that is applied automatically with a user preference. As I mentioned before, that’s outside default theme territory.

I’m going to close this as not planned, to maintain focus. But if you have ideas of style variations for a darker vibe, please do share them in an issue to share style variation ideas. Thanks!