Optimizing WordPress 6.3 Child Theme: Editing Theme.json File for Default Site Colors
Setup: Using WordPress 6.3.__ with a TwentyTwentyThree child theme, editing the child theme’s theme.json file.
I didn’t want the theme default colors to show, so I turned them off in theme.json
I didn’t like the color name ‘base’ in the color palette, so I changed it.
“Waaa, what happed to my site editor?”
Must set your default site colors
I submitted a bug report https://github.com/WordPress/gutenberg/issues/54517 :
Site editor background-color: #1e1e1e if theme.json styles.color not set and settings.color.palette missing base color in TT3 #54517
If theme.json defaultPalette is false, and settings.color.palette doesn’t have slug ‘base’, the Site Editor displays with background-color: #1e1e1e; and text color black, illegible.
Suggestion: Add error-checking, so :
if settings.color.palette is missing a ‘base’ color, and
defaultPalette is false, and
styles.color doesn’t have both a color and background-color set, then
set styles.color so the site editor is readable.
For a light theme, black on blanchedalmond is readable but designers would wonder “where did that color come from”.
Suggestion: Add documentation to https://fullsiteediting.com/lessons/theme-json-color-options/ giving the impacts of not having palette color ‘base’ and not having styles.color set.
Perhaps “Your Site Editor background color and text color are set from the settings.color.palette ‘base’ and ‘contrast’ colors. If you don’t define them, the Editor colors are taken from styles.color (so you should define one or both of these text and background colors).”
Set your Site Default Colors
Theme.json set styles.color
"color": {
"text": "#000000",
"background": "blanchedalmond"
},Now the Site Editor background is blanchedalmond. You can set this to whatever colors you like, but you definitely should set it.
Use the Recommended Color Palette names
If you use the color palette names that TwentyTwentyThree uses, and you then change the site’s theme, those elements styled using those basic colors will look good.
https://fullsiteediting.com/lessons/theme-json-color-options/ How should I name the colors?
“It is recommended to use base and contrast followed by primary, secondary, tertiary, and so on as the color slug and name.”
You can have the name be whatever makes sense, but you really should not change the slug.
settings.color.palette should start with this:
{
"color": "#ffffff",
"name": "Base",
"slug": "base"
},
{
"color": "#000000",
"name": "Contrast",
"slug": "contrast"
},
Rules for theme.json editing:
“Always set styles.color, both color and background-color; they are used throughout most themes as the default color, for example in the Site Editor and Page Editor editing area.”
“For child themes, keep the slugs of the ‘most basic’ colors of the parent theme; in TwentyTwentyThree these are ‘base’ and ‘contrast’ (with other recommended slugs: ‘primary’, ‘secondary’, ‘tertiary’). You could get unexpected colors in places, since the theme designers likely expected those color slugs are set.”
Leave a Reply
You must be logged in to post a comment.