search

WordPress / developer-blog-content

In this GitHub space, WordPress team coordinates content to be published on the Developer Blog. Discussions and montly meetings (first Thu - 13:00 UTC) in WP Slack #core-dev-blog
https://developer.wordpress.org/news
40 stars 5 forks source link

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

Open bph opened 2 weeks ago

bph commented 2 weeks ago

Discussed in https://github.com/WordPress/developer-blog-content/discussions/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.