^{Originally posted by justintadlock June 16, 2023}
From this discussion on the Dev Blog: https://developer.wordpress.org/news/2023/05/customizing-core-block-style-variations-via-theme-json/

I'm wondering if many theme authors know how to utilize the settings.custom property in theme.json and pair it with custom stylesheets.

For example:

{
	"settings": {
		"custom": {
			"code": {
				"color": "#000000",
				"background": "#fafafa"
			}
		}
	}
}

Produces these custom properties:

--wp--custom--code--color: #000000;
--wp--custom--code--background: #fafafa;

On its own, that's all it does. The exciting part is using these custom properties to do your own thing.

With the above example, I could style the <code> element (for inline code) like this in my style.css:

:where( :not( pre ) > code ) {
	color: var( --wp--custom--code--color );
	background: var( --wp--custom--code--background );
}

Why not just stick it all in your CSS file to start with?

Good question. A few reasons:

• It's useful for people who want to manage their styles entirely in theme.json.
• It can be customized via /styles/{stylename}.json files.
• It can be customized via theme.json files in child themes.
• For things like HTML elements like <code>, it'd be simple to transfer the JSON code if/when core supports the element in theme.json.

Any other things you can do with it?

It's possible to couple this with Hybrid/Universal themes that use the customizer because you have access to these via PHP. For example, a classic/hybrid theme could set up custom color options in the customizer for users (they don't have Site Editor access, mind you). Then, override these via the PHP filter hooks.

In need of an example

The above was just a quick example, so I'm opening this up to discuss potential ideas to really show off this feature. The simple use case of customizing the <code> element could work, but let's think a little bigger.