How to build light/dark mode with theme.json

[bph]

Discussed in #331

^{Originally posted by justintadlock November 5, 2024}
Using color-scheme and light-dark(), which both have pretty widespread browser support, theme authors can start building color palettes that support the user's OS preferences.

• https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme (Baseline: Widely Available)
• https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark (Baseline: 2024)

This proposal is for a topic that would walk readers through creating color palettes that work with system preferences without ever leaving theme.json (well, at least for the front end).

There is one minor thing: the color picker in the editor requires a few lines of code to work.

Here's an example repo of a TT4 child theme of this in action: https://github.com/justintadlock/tt4-dark-mode

Stretch goal for the tutorial: There may be a possibility of explaining how to create a light/dark toggle with Block Bindings and the Interactivity API (haven't worked this out yet). This could be a fun addition to the tutorial but is not a hard requirement.

[bph]

An interesting list of methods in the outreach channel

[justintadlock]

Working on this here and expect to have the first draft finished tomorrow: https://docs.google.com/document/d/1GUIICX4H8GDWZ5B2SMqsRwSwaXYFz5ndN1Y0erPS-g8/edit?usp=sharing

[justintadlock]

Ready for reviews! 🎉

[ndiego]

The first review is complete. Left a few minor suggestions. Great article, learned a lot about the CSS spec for light dark 👌

[justintadlock]

learned a lot about the CSS spec for light dark

Yep, it's really neat what you can do with just basic, modern CSS for this now. No more complex methods!

[ryanwelcher]

Second review is done. No suggestions from me.

[justintadlock]

All right. Post is moved to the Dev Blog in draft mode. I plan to publish on Thursday.

[justintadlock]

Social Copy:

Learn how to create light and dark mode color schemes for your block themes using theme.json:

https://developer.wordpress.org/news/2024/12/mastering-light-and-dark-mode-styling-in-block-themes/