深色/浅色模式下HTML/CSS转Tumblr图片变量失效问题求助

错误原因 #

你的失效代码存在两个核心问题：

• style.setProperty()的第一个参数必须是标准CSS属性名，或是--开头的CSS自定义属性名，不能直接把Tumblr模板标签{image:bgimage}作为属性名传入，浏览器无法识别这个非标准的属性标识。
• 拼接url()值时遗漏了闭合右括号，本身存在CSS语法错误；同时错误地把Tumblr模板标签放在属性名位置，逻辑完全不成立。

正确写法 #

1. 首先在全局CSS的:root作用域下，定义绑定Tumblr变量的CSS自定义属性，统一管理所有主题变量：

:root {
  --mediumgreen: {color:mediumgreen};
  --bg-image: url("{image:bgimage}");
}

2. JS切换主题时，setProperty第一个参数固定传入你定义的CSS自定义属性名，第二个参数传入正确格式的属性值，注意url()的括号必须完整闭合：

// 颜色属性设置（你之前的颜色生效逻辑可以统一改成自定义变量写法，更易维护）
document.documentElement.style.setProperty('--mediumgreen', '#fbfbfb')
// 图片属性正确设置方式，Tumblr变量渲染时会自动替换为真实图片地址
document.documentElement.style.setProperty('--bg-image', 'url("{image:bgimage}")')

// 深色模式切换时直接替换为对应图片路径即可，注意补全右括号
// document.documentElement.style.setProperty('--bg-image', 'url("/images/topdark2.svg")')

注意事项 #

• Tumblr的image:类型变量渲染后会直接输出图片的完整访问地址，只需要放在url()的引号内即可，不需要额外嵌套模板语法。
• 所有CSS的url()值必须补全前后括号、路径引号，否则会因为语法错误导致样式失效。

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