Changing the Base Color Setting via CSS

As it is, the ui-digital-display node doesn't have any custom colour options (yet) instead it uses the Dashboard Theme colours. For example with the Base colour set as green...

image image

But with my preferred dark theme, it looks a little bland...


As I have been playing around with CSS for a bit, I figured I must have the knowhow to fix that...

Nope! :stuck_out_tongue:

I can change the background (EG. Black) but not the "display elements" (I wanted Green). Am I mistaken on the "descriptor name" to use?


<style >
    [node-id="bfb33b6669fac0e5"] {
    background-color: #000000 !important;
    color: #00ff00 !important;

You cant currently define or override the digit sections colors. They are tied to dashboard theme colors and as they are created with svg - the CSS "color" (color of the text) will not affect at all.

May be to ask the nodes author to improve the widget by adding custom color option...

Ya... Checking out the GitHub page was the first thing I did :slight_smile:

Hoping to bypass the Base colours was the second thing... oh well, I tried.

Hmmm... but one can set the Dashboard Theme Base colour to the needed setting and change everything else (at least on the tab with the display) back around to whatever would be desired :wink:


I just might try using some of your "blue" mode adaptations and making my own "dark mode override"... Just not sure how much I really want to use that digital display :thinking:

That of course is an option but it really takes a bit too much to get color for couple of digits...

If you inspect the digits using devtools you should be able to create a CSS selector that targets the digits specifically then apply colour.

1 Like

"Invisible" segments use style="fill: var(--nr-dashboard-groupBackgroundColor);"
"visible" segments use style="fill: var(--nr-dashboard-pageTitlebarBackgroundColor);"

So you can override it like this:

Untitled 1

.nr-dashboard-ui_digital_display.visible svg path {
 --nr-dashboard-pageTitlebarBackgroundColor : red;

Edit - I don't think you need .visible since it's the entire widget which is visible not individual segments.


Thank you... That is precisely what I was looking for. Just wish I could have figured it out myself... but looking at the solution, that would have taken a wee-bit-o-time :laughing:


I don't even know what that is... but sounds like something I should look into.

EDIT - Oh... that is the F12 thing I randomly hit by accident all the time :rofl:

I had actually tried that before posting here, but I couldn't recognize anything at the time. Now I see that I wasn't selecting the actual display elements, rather the whole display.

Right click inspect

Right click copy selector

Test (and adjust) selector

If you manage to get a selector that highlights the parts of interest, then you have a working selector that you can use in CSS


What I do is - in Firefox but all browsers have it - right click|inspect.
Which taught me that the widget uses var(--nr-dashboard-pageTitlebarBackgroundColor)
So I googled CSS variables (who knew such a thing exists?) and told me

To create a variable with global scope, declare it inside the :root selector. The :root selector matches the document's root element.
To create a variable with local scope, declare it inside the selector that is going to use it.

1 Like

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