# Text color on ui-gauge (battery level)

**URL:** <https://discourse.nodered.org/t/text-color-on-ui-gauge-battery-level/92138>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [2 October 2024 19:07 UTC](https://discourse.nodered.org/t/text-color-on-ui-gauge-battery-level/92138 "2024-10-02T19:07:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gaetano](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gaetano/32/81395_2.png) [@Gaetano](https://discourse.nodered.org/u/Gaetano)\
**Post date:** [2 October 2024 19:07 UTC](https://discourse.nodered.org/t/text-color-on-ui-gauge-battery-level/92138/1 "2024-10-02T19:07:13Z")

</div>

In my dashboard 2 I use a ui-gauge widget, of the battery-level type, to display the percentage of battery charge of a SmartPhone that is used to monitor some information.

The widget works well, but I would like to be able to change the color of the percentage which is currently white or black depending on the aforementioned percentage.

The percentage of charge is almost always between 70 and 80% (when it drops below 70%, the socket on which the power supply is connected is turned on via MQTT and then turned off when it reaches 80%).

I have not been able to find any parameter (including a dynamic one) to be able to do this. The white is difficult to read.

Is it possible? If so, what information should I use?  
Just as an example, this is what appears to me:

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

Because the percentage is almost always between 70-80%, the text color is always white.

In some circumstances (when I don't receive data from SmartPhone) I change the segments color in red and I see a black text color that is much more readable.

Thanks.

---

<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:** [2 October 2024 19:44 UTC](https://discourse.nodered.org/t/text-color-on-ui-gauge-battery-level/92138/2 "2024-10-02T19:44:40Z")

</div>

CSS override

```auto
.nrdb-ui-gauge-battery label.nrdb-ui-gauge-battery--bglabel,
.nrdb-ui-gauge-battery label.nrdb-ui-gauge-battery--fglabel{
    color:rgb(0, 0, 0) !important;

}

```

For me it feels that the breakpoint (white/black) is not well balanced. Hard of course to judge.

---

<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:** [2 October 2024 19:45 UTC](https://discourse.nodered.org/t/text-color-on-ui-gauge-battery-level/92138/3 "2024-10-02T19:45:49Z")

</div>

I think this is what's going on:

There are two data values superimposed  
`label class="nrdb-ui-gauge-battery--bglabel"` (which by default seems to be black, at least for the default theme)  
and  
`label class="nrdb-ui-gauge-battery--fglabel"` (by default it seems to be white)

As the gauge level changes around 50% fglabel gradually becomes visible, overlaying bglabel.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/0/d0de449df67775627c3a4ed32860f01bef7842f3.png)

You can use a CSS template to style them individually or together:

```auto
label.nrdb-ui-gauge-battery--bglabel, label.nrdb-ui-gauge-battery--fglabel {
    color: red !important;
}

```

---

<div class="post-metadata">

**Author:** ![Gaetano](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gaetano/32/81395_2.png) [@Gaetano](https://discourse.nodered.org/u/Gaetano)\
**Post date:** [3 October 2024 06:16 UTC](https://discourse.nodered.org/t/text-color-on-ui-gauge-battery-level/92138/4 "2024-10-03T06:16:42Z")

</div>

Thank you very much: it works.

---

<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:** [17 October 2024 06:17 UTC](https://discourse.nodered.org/t/text-color-on-ui-gauge-battery-level/92138/5 "2024-10-17T06:17:36Z")

</div>

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