Enabling WordPress appearance controls

If you wish to restore some of the default WordPress appearance controls edit the child theme’s theme.json file to include the following:

Child theme’s theme.jsonJSON

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"appearanceTools": false,
		"color": {
			"background": true,
			"custom": true,
			"customDuotone": false,
			"customGradient": false,
			"defaultDuotone": false,
			"defaultGradients": false,
			"defaultPalette": false,
			"duotone": [],
			"gradients": [],
			"link": false,
			"text": true,
			"palette": [
				{
					"color": "var(--ska-color-site)",
					"name": "Base text color",
					"slug": "ska-site"
				},
				{
					"color": "var(--ska-color-site-heading)",
					"name": "Heading text color",
					"slug": "ska-site-heading"
				},
				{
					"color": "var(--ska-color-site-subtext)",
					"name": "Subtext color",
					"slug": "ska-site-subtext"
				},
				{
					"color": "var(--ska-color-site-muted)",
					"name": "Muted text color",
					"slug": "ska-site-muted"
				},
				{
					"color": "var(--ska-color-site-inverted)",
					"name": "Inverted text color",
					"slug": "ska-site-inverted"
				},
				{
					"color": "var(--ska-color-primary)",
					"name": "Primary color",
					"slug": "ska-primary"
				},
				{
					"color": "var(--ska-color-secondary)",
					"name": "Secondary color",
					"slug": "ska-secondary"
				},
				{
					"color": "var(--ska-color-plain)",
					"name": "Plain color",
					"slug": "ska-plain"
				}
			]
		},
		"spacing": {
			"customSpacingSize": false,
			"blockGap": false,
			"margin": false,
			"padding": false,
			"spacingSizes": []
		},
		"typography": {
			"customFontSize": false,
			"lineHeight": false,
			"dropCap": false,
			"fluid": false,
			"fontStyle": false,
			"fontWeight": false,
			"letterSpacing": false,
			"textDecoration": false,
			"textTransform": true,
			"fontSizes": [
				{
					"name": "xs",
					"size": "var(--ska-font-size-xs)",
					"slug": "xs"
				},
				{
					"name": "sm",
					"size": "var(--ska-font-size-sm)",
					"slug": "sm"
				},
				{
					"name": "base",
					"size": "var(--ska-font-size-base)",
					"slug": "base"
				},
				{
					"name": "lg",
					"size": "var(--ska-font-size-lg)",
					"slug": "lg"
				},
				{
					"name": "xl",
					"size": "var(--ska-font-size-xl)",
					"slug": "xl"
				},
				{
					"name": "2xl",
					"size": "var(--ska-font-size-2xl)",
					"slug": "2xl"
				},
				{
					"name": "3xl",
					"size": "var(--ska-font-size-3xl)",
					"slug": "3xl"
				},
				{
					"name": "4xl",
					"size": "var(--ska-font-size-4xl)",
					"slug": "4xl"
				},
				{
					"name": "5xl",
					"size": "var(--ska-font-size-5xl)",
					"slug": "5xl"
				}
			]
		}
	}
}

This setup just enables changing text/background color and font size, but you can toggle things on-off and add values as needed.

Because the theme filters a lot of the CSS out that is generated automatically by WordPress –

such as this

--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, #9b51e0 100%);
--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg, #7adcb4 0%, #00d082 100%);
--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100%);
--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg, rgba(255, 105, 0, 1) 0%, #cf2e2e 100%);
--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg, #eee 0%, #a9b8c3 100%);
--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg, #4aeadc 0%, #9778d1 20%, #cf2aba 40%, #ee2c82 60%, #fb6962 80%, #fef84c 100%);
--wp--preset--gradient--blush-light-purple: linear-gradient(135deg, #ffceec 0%, #9896f0 100%);
--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg, #fecda5 0%, #fe2d2d 50%, #6b003e 100%);
--wp--preset--gradient--luminous-dusk: linear-gradient(135deg, #ffcb70 0%, #c751c0 50%, #4158d0 100%);
--wp--preset--gradient--pale-ocean: linear-gradient(135deg, #fff5cb 0%, #b6e3d4 50%, #33a7b5 100%);
--wp--preset--gradient--electric-grass: linear-gradient(135deg, #caf880 0%, #71ce7e 100%);
--wp--preset--gradient--midnight: linear-gradient(135deg, #020381 0%, #2874fc 100%);

.has-black-color {
	color: var(--wp--preset--color--black) !important;
}

.has-cyan-bluish-gray-color {
	color: var(--wp--preset--color--cyan-bluish-gray) !important;
}

.has-white-color {
	color: var(--wp--preset--color--white) !important;
}

.has-pale-pink-color {
	color: var(--wp--preset--color--pale-pink) !important;
}

.has-vivid-red-color {
	color: var(--wp--preset--color--vivid-red) !important;
}

.has-luminous-vivid-orange-color {
	color: var(--wp--preset--color--luminous-vivid-orange) !important;
}

.has-luminous-vivid-amber-color {
	color: var(--wp--preset--color--luminous-vivid-amber) !important;
}

.has-light-green-cyan-color {
	color: var(--wp--preset--color--light-green-cyan) !important;
}

.has-vivid-green-cyan-color {
	color: var(--wp--preset--color--vivid-green-cyan) !important;
}

.has-pale-cyan-blue-color {
	color: var(--wp--preset--color--pale-cyan-blue) !important;
}

.has-vivid-cyan-blue-color {
	color: var(--wp--preset--color--vivid-cyan-blue) !important;
}

.has-vivid-purple-color {
	color: var(--wp--preset--color--vivid-purple) !important;
}

– you’ll also need to add this filter to child theme’s functions.php file:

add_filter('ska_theme_wp_global_stylesheet_purge_config', '__return_empty_array');

This will prevent ska-theme from filtering out the custom rules from the child theme’s theme.json.

This approach will create a lot of additional bloat but can make it easier for someone who doesn’t know anything about Tailwind to make minor appearance changes.