How to build light/dark mode with theme.json

[justintadlock]

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]

Topic was approved and conversation continues on the issue:

• How to build light/dark mode with theme.json #336