Actually I have a bit better example for ui_text. Usually the text color is changed to indicate some conditions. The solution can support that logic. And it is more flexible that way.
[{"id":"b607d1be694f207f","type":"ui-text","z":"4eb808f5e19fb7e2","group":"a3080de905f2fb29","order":13,"width":"6","height":"1","name":"","label":"I'm label","format":"{{msg.payload}}","layout":"col-center","style":false,"font":"","fontSize":"20","color":"#8c27a0","className":"hotnipi-textwidget","x":500,"y":2580,"wires":[]},{"id":"d703e5e7c25f23ba","type":"ui-template","z":"4eb808f5e19fb7e2","group":"","page":"","ui":"da26eafa8eb48ab3","name":"Dasboard 2.0 CSS","order":0,"width":0,"height":0,"head":"","format":".hotnipi-textwidget{\n --error:red;\n --wet:blue;\n --hot:orange;\n --textcolor:currentColor;\n --labelcolor:currentColor;\n}\n\n.hotnipi-textwidget.error{\n --textcolor:var(--error);\n --labelcolor:var(--error);\n}\n.hotnipi-textwidget.hot{\n --textcolor:var(--hot);\n}\n.hotnipi-textwidget.wet{\n --textcolor:var(--wet);\n}\n.hotnipi-textwidget .nrdb-ui-text-value{\n color:var(--textcolor); \n}\n.hotnipi-textwidget .nrdb-ui-text-label{\n color:var(--labelcolor); \n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":530,"y":2540,"wires":[[]]},{"id":"61ef7c45fd5873f8","type":"inject","z":"4eb808f5e19fb7e2","name":"","props":[{"p":"payload"},{"p":"class","v":"","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Condition is unknown","payloadType":"str","x":220,"y":2520,"wires":[["b607d1be694f207f"]]},{"id":"97863e43fc8a5f40","type":"inject","z":"4eb808f5e19fb7e2","name":"wet","props":[{"p":"payload"},{"p":"class","v":"wet","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Condition is wet","payloadType":"str","x":230,"y":2560,"wires":[["b607d1be694f207f"]]},{"id":"4254a11031768ff0","type":"inject","z":"4eb808f5e19fb7e2","name":"hot","props":[{"p":"payload"},{"p":"class","v":"hot","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Condition is hot","payloadType":"str","x":230,"y":2600,"wires":[["b607d1be694f207f"]]},{"id":"55a9aa8d0f04414e","type":"inject","z":"4eb808f5e19fb7e2","name":"error","props":[{"p":"payload"},{"p":"class","v":"error","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Now we have an error","payloadType":"str","x":230,"y":2640,"wires":[["b607d1be694f207f"]]},{"id":"a3080de905f2fb29","type":"ui-group","name":"Test","page":"de1b5cd94c089676","width":"6","height":"1","order":2,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"da26eafa8eb48ab3","type":"ui-base","name":"Board","path":"/dashboard","showPathInSidebar":false},{"id":"de1b5cd94c089676","type":"ui-page","name":"Text","ui":"da26eafa8eb48ab3","path":"/text","icon":"text","layout":"grid","theme":"a965ccfef139317a","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"a965ccfef139317a","type":"ui-theme","name":"Default","colors":{"surface":"#404040","primary":"#109fbc","bgPage":"#e8e8e8","groupBg":"#d6d6d6","groupOutline":"#6fbc10"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
