WordPress 6.0 theme.json自定义调色板颜色前端不生效问题

你的theme.json存在多处语法/配置错误，导致前端解析全局样式时中断，预设颜色对应的CSS规则无法生成。古腾堡编辑器自带容错机制所以后台预览正常，自定义取色直接生成内联样式不依赖全局样式表，因此不受影响。

具体错误点 #

• 无效空渐变条目：gradients字段下保留了一个slug、渐变值、名称全为空的对象，WordPress解析预设资源时遇到空slug的预设项会直接终止全局样式生成流程。不需要自定义渐变的话直接将gradients设为空数组[]即可，不要放空值占位对象。
• JSON语法错误：brandon-grotesque字体的第一个fontFace配置中，src数组缺少闭合方括号，直接导致整个theme.json文件前端解析失败。
• CSS变量语法错误：全局样式下正文字号配置的CSS变量缺少右闭合括号，"fontSize": "var(--wp--custom--typography--font-size--normal" 末尾少了)，会中断样式规则生成。
• 冗余空配置：customTemplates字段下存在一个name、title全为空的无效自定义模板条目，建议直接删除，避免后续版本解析异常。

修复代码片段 #

1. 修正color配置 #

"color": {
    "defaultPalette": false,
    "defaultGradients": false,
    "link": true,
    "custom": true,
    "background": true,
    "duotone": [],
    "palette": [
        {"slug": "white", "color": "#ffffff", "name": "Weiß"},
        {"slug": "primary", "color": "#D4B86A", "name": "Akzentfarbe"},
        {"slug": "black", "color": "#000", "name": "Schwarz"},
        {"slug": "lightgrey", "color": "#ECECEC", "name": "Helles Grau"},
        {"slug": "grey", "color": "#D9D9D9", "name": "Grau"},
        {"slug": "darkgrey", "color": "#3E3E3E", "name": "Dunkles Grau"},
        {"slug": "transparent", "color": "rgba(255, 255, 255, 0)", "name": "Transparent"}
    ],
    "gradients": []
},

2. 修正字体配置语法错误 #

找到brandon-grotesque字体的第一个fontFace条目，补全src数组的闭合括号：

{
    "fontFamily": "brandon-grotesque",
    "fontWeight": "400 700",
    "fontStyle": "normal",
    "fontStretch": "normal",
    "src": [ "https://use.typekit.net/af/XXXXXXXXXXXXX" ]
}

3. 修正CSS变量语法错误 #

找到全局typography配置，补全fontSize变量的闭合括号：

"typography": {
    "fontSize": "var(--wp--custom--typography--font-size--normal)",
    "fontFamily": "var(--wp--preset--font-family--jost)",
    "lineHeight": "var(--wp--custom--typography--line-height--normal)"
},

4. 清理无效配置 #

删除customTemplates下的空对象条目，如果暂时没有自定义模板，直接将customTemplates设为空数组[]即可。

验证步骤 #

修复完成后清空站点缓存、浏览器缓存，刷新前端页面查看元素样式，即可看到预设颜色对应的类名已经关联正确的色值规则，颜色正常渲染。

内容的提问来源于stack exchange，提问作者GrowthWizard