I want to change colour dynamically using HEX code with inline CSS in the thymeleaf template.
But when I set hex code colour in the context.setVariable("invoiceColor","#E01B33")
, the result of this template comes as \#E01B33
.
Context context = new Context();
context.setVariable("invoiceColor", "#E01B33");
var templateHTML = templateEngine.process("invoiceA4", context);
Template Code
<style th:inline="css">
:root {
--primary-color: [[${invoiceColor}]];
}
</style>
Generated HTML
<style th:inline="css">
:root {
--primary-color: \#E01B33;
}
</style>
How do I change colour dynamically?
CodePudding user response:
[[ ... ]]
will escape what is there. Try [( .. )]
instead:
--primary-color: [(${invoiceColor})];
See https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html chapter "Expression inlining":
Note that, while [[...]] corresponds to th:text (i.e. result will be HTML-escaped), [(...)] corresponds to th:utext and will not perform any HTML-escaping.