Thymeleaf模板中如何通过内联CSS动态设置HEX颜色值？

Thymeleaf默认的[[${}]]内联语法会自动转义特殊字符，导致你设置的HEX颜色码里的#被转成\#，进而让CSS变量无法正确识别颜色值。

解决方法很直接，改用无转义内联语法[(${})]即可——它会直接输出变量的原始内容，不会对特殊字符做转义处理：

修改后的模板代码：

<style th:inline="css">
    :root {
        --primary-color: [(${invoiceColor})];
    }
</style>

Java代码无需改动，保持原逻辑：

Context context = new Context();
context.setVariable("invoiceColor", "#E01B33");
var templateHTML = templateEngine.process("invoiceA4", context);

此时生成的HTML会输出正确的颜色值：

<style th:inline="css">
    :root {
        --primary-color: #E01B33;
    }
</style>

如果你的场景需要考虑XSS安全（比如invoiceColor变量内容不可信），也可以用Thymeleaf字符串工具类手动取消转义：

<style th:inline="css">
    :root {
        --primary-color: [[${#strings.unescapeXml(invoiceColor)}]];
    }
</style>

不过这种方式不如[(${})]简洁，推荐优先使用第一种方案。

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