0

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?

Yash garg
  • 53
  • 1
  • 7

1 Answers1

1

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

Wim Deblauwe
  • 25,113
  • 20
  • 133
  • 211
  • Thanks for your help. It worked. But IntelliJ Idea Ultimate shows the error on opening and closing brackets but the application work just fine. – Yash garg Jul 20 '22 at 07:45
  • You could create an issue at https://youtrack.jetbrains.com/issues/IDEA for the IntelliJ showing the error. – Wim Deblauwe Jul 20 '22 at 07:50