# How do I set the background color in the DB2 template using msg.payload?

**URL:** <https://discourse.nodered.org/t/how-do-i-set-the-background-color-in-the-db2-template-using-msg-payload/101359>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [25 June 2026 14:35 UTC](https://discourse.nodered.org/t/how-do-i-set-the-background-color-in-the-db2-template-using-msg-payload/101359 "2026-06-25T14:35:46Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hubertus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hubertus/32/10077_2.png) [@Hubertus](https://discourse.nodered.org/u/Hubertus)\
**Post date:** [25 June 2026 14:35 UTC](https://discourse.nodered.org/t/how-do-i-set-the-background-color-in-the-db2-template-using-msg-payload/101359/1 "2026-06-25T14:35:47Z")

</div>

Hello,

I'm at my wits' end. I want to dynamically set a color in hex format (e.g., ‘#167099’) as the background color of a template. I've tried all the available examples—without success.

```auto

<div class="dynamic-background" style="background-color:‘{{msg.payload.mode_rgb}}’;">
    {{msg.payload.mode_rgb}}
</div>

<style>

.dynamic-background {
   width: 100%;
   height: 100%;
   padding: 20px;
   box-sizing: border-box;
   border-radius: 4px;
}
</style>

```

That was my last attempt.

Maybe—hopefully—someone has a tip for me.

Thanks and sunny regards,

Hubertus

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [25 June 2026 20:22 UTC](https://discourse.nodered.org/t/how-do-i-set-the-background-color-in-the-db2-template-using-msg-payload/101359/2 "2026-06-25T20:22:03Z")

</div>

This section of the documentation may help [Template ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template#working-with-variables)  
Notice the `:` in front of class, try this before your style to bind the javascript/variable

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [25 June 2026 23:14 UTC](https://discourse.nodered.org/t/how-do-i-set-the-background-color-in-the-db2-template-using-msg-payload/101359/3 "2026-06-25T23:14:51Z")

</div>

Also on the page linked to by @E1cid above, pay attention to this part:

> **Important Note** : On first load, `msg.payload` may be `null` or `undefined`, and trying to access a nested property will throw an error. Using the optional chaining (?.) operator, e.g. `msg.payload?.nested?.property` will prevent these errors occurring

---

<div class="post-metadata">

**Author:** ![Hubertus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hubertus/32/10077_2.png) [@Hubertus](https://discourse.nodered.org/u/Hubertus)\
**Post date:** [26 June 2026 10:27 UTC](https://discourse.nodered.org/t/how-do-i-set-the-background-color-in-the-db2-template-using-msg-payload/101359/4 "2026-06-26T10:27:15Z")

</div>

Thanks to everyone,

I did read - [Template ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template#working-with-variables) -, but apparently I didn't understand it. The heat is unbearable and my brain isn't working right.

This Version works:

`<div class="dynamic-background" :style='"background-color:" + msg?.payload?.mode_rgb'>`

Sunny greetings from Germany  
Hubertus

---

<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:** [10 July 2026 10:27 UTC](https://discourse.nodered.org/t/how-do-i-set-the-background-color-in-the-db2-template-using-msg-payload/101359/5 "2026-07-10T10:27:46Z")

</div>

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