十六进制代码颜色与百里香为css内联

Question

我想在thymelaf模板中使用带有内联CSS的HEX代码动态更改颜色。但是当我在context.setVariable("invoiceColor","#E01B33")中设置十六进制代码颜色时，该模板的结果为#E01B33。

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

模板代码

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

生成的HTML

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

如何动态更改颜色？

Answer 1

[[ ... ]]将逃离现有内容。改为尝试[( .. )]：

--primary-color: [(${invoiceColor})];

请参阅https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html章节"；表达式内联"：

请注意，虽然[[…]]对应于th:text(即结果将进行HTML转义(，但[(…(]对应于th:utext，不会执行任何HTML转义。