HEX code color with thymeleaf for css inline

July 20, 2022

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?

>Solution :

[[ ... ]] 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.