Widget showing wrong color

[JorgeAlberto91MS]

Current Behavior

Widget is configured as a determinated color X, but now is not showing X, but black color

Expected Behavior

Show X Color in both zones

Steps To Reproduce

Not sure,

Environment

• Dashboard version: 1.22.1
• Node-RED version: 4.0.0
• Node.js version: v22.4.1
• npm version: 10.8.1
• Platform/OS: Ubuntu / macOS
• Browser: Chromium / Chrome / Safari

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[Paul-Reed]

I'm not sure that I fully understand your issue, but I've created the flow below to demonstrate the widget working as expected.
Please try the flow, and let me know if it works for you & clarifies the configuration.
If not, please upload a simple flow to display the problem, and maybe tell us a little more of about your issue.

[{"id":"a852d7f92900e42e","type":"ui-gauge","z":"59e13ebc8d9ca735","name":"Test","group":"e1a1d1d0f2c36e60","order":0,"width":3,"height":3,"gtype":"gauge-half","gstyle":"needle","title":"Test","units":"Watts","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"2000","color":"#ffc800"},{"from":"4000","color":"#ea5353"},{"from":"6000","color":"#4936d3"}],"min":0,"max":"8000","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":415,"y":145,"wires":[]},{"id":"3a2c547b975504c8","type":"inject","z":"59e13ebc8d9ca735","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1.5","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":115,"y":145,"wires":[["e995f2b5ed29d6df"]]},{"id":"e995f2b5ed29d6df","type":"function","z":"59e13ebc8d9ca735","name":"random number","func":"msg.payload = Math.floor(Math.random() * 8000) + 1\n\nreturn msg","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":265,"y":145,"wires":[["a852d7f92900e42e"]]},{"id":"e1a1d1d0f2c36e60","type":"ui-group","name":"Group Name","page":"b058f57aa8133a26","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"b058f57aa8133a26","type":"ui-page","name":"Page Name","ui":"8c151b59721a8d9a","path":"/page2","icon":"home","layout":"grid","theme":"6a4b46dde830beb1","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":1,"className":"","visible":"true","disabled":"false"},{"id":"8c151b59721a8d9a","type":"ui-base","name":"Homeserver","path":"/dashboard","appIcon":"https://homeserver.forest-bicolor.ts.net/icon","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":"1","showDisconnectNotification":true},{"id":"6a4b46dde830beb1","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]