# Dashboard text-node change text color

**URL:** <https://discourse.nodered.org/t/dashboard-text-node-change-text-color/94475>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [9 January 2025 08:47 UTC](https://discourse.nodered.org/t/dashboard-text-node-change-text-color/94475 "2025-01-09T08:47:00Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![klaarnou](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/klaarnou/32/97820_2.png) [@klaarnou](https://discourse.nodered.org/u/klaarnou)\
**Post date:** [9 January 2025 08:47 UTC](https://discourse.nodered.org/t/dashboard-text-node-change-text-color/94475/1 "2025-01-09T08:47:00Z")

</div>

Hello.

I would like to change the text color of a text node depending on the input.

-------- [IF switch is on show ON(green) else show OFF(red)]

From this page : [https://dashboard.flowfuse.com/nodes/widgets/ui-text.html#dynamic-properties](https://dashboard.flowfuse.com/nodes/widgets/ui-text.html#dynamic-properties)

I should be able to send msg.ui\_update.color to the text-node and change the font color, but I cannot get this to work. Please help.

thanks

Bernard.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 January 2025 09:08 UTC](https://discourse.nodered.org/t/dashboard-text-node-change-text-color/94475/2 "2025-01-09T09:08:07Z")

</div>

Hello and welcome to forum.

It starts working if you tick the Apply style

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/e/9ec020bfbdbde2d3e6c0122f65a41157e42e3c08.png)

But the way it does the color change may surprise you a bit....

---

<div class="post-metadata">

**Author:** ![klaarnou](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/klaarnou/32/97820_2.png) [@klaarnou](https://discourse.nodered.org/u/klaarnou)\
**Post date:** [9 January 2025 09:12 UTC](https://discourse.nodered.org/t/dashboard-text-node-change-text-color/94475/3 "2025-01-09T09:12:05Z")

</div>

Hello, thank you very much for your help.  
I did tick that box, did not work.

Obviously I am messing up somewhere, please post a example.

thank you very much.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 January 2025 09:15 UTC](https://discourse.nodered.org/t/dashboard-text-node-change-text-color/94475/4 "2025-01-09T09:15:59Z")

</div>

Here you are

```auto
[{"id":"191ee848013e1267","type":"ui-text","z":"8240715f881ef736","group":"2c34b9c7d6324531","order":0,"width":0,"height":0,"name":"","label":"the text node","format":"{{msg.payload}}","layout":"row-spread","style":true,"font":"","fontSize":16,"color":"#bfbfbf","wrapText":false,"className":"","x":810,"y":1360,"wires":[]},{"id":"9f72c3b497988bd1","type":"inject","z":"8240715f881ef736","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"OFF","payloadType":"str","x":450,"y":1340,"wires":[["1f2ef2aa8b0e3a25"]]},{"id":"b5296ae047bcd9be","type":"inject","z":"8240715f881ef736","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"ON","payloadType":"str","x":450,"y":1380,"wires":[["1f2ef2aa8b0e3a25"]]},{"id":"1f2ef2aa8b0e3a25","type":"function","z":"8240715f881ef736","name":"function 10","func":"const c = msg.payload == \"OFF\" ? \"#ff0000\" : \"#00ff00\"\nmsg.ui_update = {\"color\":c}\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":630,"y":1360,"wires":[["191ee848013e1267"]]},{"id":"2c34b9c7d6324531","type":"ui-group","name":"Devices","page":"7294756f31e17b81","width":"6","height":"1","order":2,"showTitle":false,"className":"dynamic-title","visible":"true","disabled":"false","groupType":"default"},{"id":"7294756f31e17b81","type":"ui-page","name":"Home","ui":"29792df7d7b05e2e","path":"/home","icon":"home","layout":"grid","theme":"52ba8a01d6eda628","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":9,"className":"","visible":"true","disabled":"false"},{"id":"29792df7d7b05e2e","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":[],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"52ba8a01d6eda628","type":"ui-theme","name":"Mobile","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"5px","groupGap":"5px","groupBorderRadius":"10px","widgetGap":"5px"}}]

```

---

<div class="post-metadata">

**Author:** ![klaarnou](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/klaarnou/32/97820_2.png) [@klaarnou](https://discourse.nodered.org/u/klaarnou)\
**Post date:** [9 January 2025 09:21 UTC](https://discourse.nodered.org/t/dashboard-text-node-change-text-color/94475/5 "2025-01-09T09:21:55Z")

</div>

Thank you very much for your help, will try that as soon as I get home.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [9 January 2025 12:30 UTC](https://discourse.nodered.org/t/dashboard-text-node-change-text-color/94475/6 "2025-01-09T12:30:54Z")

</div>

is there a way to change the background color?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 January 2025 12:33 UTC](https://discourse.nodered.org/t/dashboard-text-node-change-text-color/94475/7 "2025-01-09T12:33:40Z")

</div>

I don't see any options to do it with the `ui_control.something-dedicated` but definitely possible to apply some CSS using `msg.class`

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [9 January 2025 12:34 UTC](https://discourse.nodered.org/t/dashboard-text-node-change-text-color/94475/8 "2025-01-09T12:34:49Z")

</div>

i tried doing it, but it is affecting all the text nodes across the dashboard. need to see how to do a particular widget only.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [9 January 2025 12:38 UTC](https://discourse.nodered.org/t/dashboard-text-node-change-text-color/94475/9 "2025-01-09T12:38:42Z")

</div>

Got it...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/c/ac3937537969d252df8c01b7f302ba558a8ceec2.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/3/f31d9b5216f9024f747d0d5a0738548eae73670b.png)

---

<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:** [23 January 2025 12:38 UTC](https://discourse.nodered.org/t/dashboard-text-node-change-text-color/94475/10 "2025-01-23T12:38:52Z")

</div>

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