# How can I change the color of a template by injecting the desired color through msg.payload?

**URL:** <https://discourse.nodered.org/t/how-can-i-change-the-color-of-a-template-by-injecting-the-desired-color-through-msg-payload/99568>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [3 November 2025 08:40 UTC](https://discourse.nodered.org/t/how-can-i-change-the-color-of-a-template-by-injecting-the-desired-color-through-msg-payload/99568 "2025-11-03T08:40:25Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Overpago](https://avatars.discourse-cdn.com/v4/letter/o/3ec8ea/32.png) [@Overpago](https://discourse.nodered.org/u/Overpago)\
**Post date:** [3 November 2025 08:40 UTC](https://discourse.nodered.org/t/how-can-i-change-the-color-of-a-template-by-injecting-the-desired-color-through-msg-payload/99568/1 "2025-11-03T08:40:25Z")

</div>

the layout is:

inject -\> http request -\> funktion -\> template

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/4/04b005d03d33b795858e41f37c266f8089c6e640.png)

I want the color to change based on whether it is connected or not. But no matter what I try, I am not able to "inject" a color into the template. Please help me figure out a way to do this. I am not proficient in coding and have mostly been using AI to write my code. Thank you in advance.

funktion:

```js
const html = msg.payload || "";
const normalizedHtml = html.toUpperCase();

if (normalizedHtml.includes("RUN")) {
    msg.color = "#3FADB5";
    msg.text = "Connected";
} else {
    msg.color = "yellow";
    msg.text = "No connection";
}
return msg;

```

template:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/c/7ce7284610b2d72a57ad03772c6be798a92290bb.png)

the rest (injector and http request) are working as intended

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [3 November 2025 09:51 UTC](https://discourse.nodered.org/t/how-can-i-change-the-color-of-a-template-by-injecting-the-desired-color-through-msg-payload/99568/2 "2025-11-03T09:51:38Z")

</div>

Welcome to the forum @Overpago

No doubt you have discovered that you can include msg.text in the template content using 'mustaches', eg

```auto
<p>{{msg.text}}</p>

```

The syntax for styling an element `<div style = "yellow"> ...` is different.  
Try

```auto
<div :style="{'background-color' : msg.color}">

```

Note the colon before 'style'.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [3 November 2025 10:49 UTC](https://discourse.nodered.org/t/how-can-i-change-the-color-of-a-template-by-injecting-the-desired-color-through-msg-payload/99568/3 "2025-11-03T10:49:20Z")

</div>

Welcome. You may need to specify that the template is for Dashboard 2 if using AI as ng-style I think is Dashboard (1).

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [3 December 2025 10:49 UTC](https://discourse.nodered.org/t/how-can-i-change-the-color-of-a-template-by-injecting-the-desired-color-through-msg-payload/99568/4 "2025-12-03T10:49:28Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.