Remove WordPress Parent Theme Styles in Child Theme

I’m currently working on creating a child theme based on the Twenty Twenty-Four theme. I noticed that there isn’t a proper way to completely disable the Twenty Twenty-Four theme’s styles in a child theme. However, there is a workaround: it’s enough to simply create a style file in the /wp-content/themes/child-theme-name/styles folder without adding any settings or styles.

Example ember.json

The Ember style code with the ember.json file in the parent theme folder looks as follows. I’ve shortened it a bit here for clarity.

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"title": "Ember",
	"settings": {
		"color": {
			"duotone": [
				...
			],
			"gradients": [
				...
			],
			"palette": [
				...
			]
		},
		"typography": {
			"fontFamilies": [
				...
			]
		}
	},
	"styles": {
		"blocks": {
			...
		},
		"elements": {
			...
		}
	}
}

To hide this style in the child theme, we now create /wp-content/themes/child-theme-name/styles/ember.json. It only needs the first three properties. The complete file looks like this:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"title": "Ember"
}

That’s all it takes, and the Ember style will no longer appear under Styles in the Designer.

Here’s the before/after comparison, after I did the same for all styles: