Changing the Base Color Setting via CSS

[Gunner]

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...

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!

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;
    }
</style>

[hotNipi]

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...

[Gunner]

@hotNipi

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

colour / color

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

[Gunner]

@hotNipi

You cant currently define or override the digit sections colors. They are tied to dashboard theme colors

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

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

[hotNipi]

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

[Steve-Mcl]

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

[jbudd]

"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:

.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.

[Gunner]

@jbudd

So you can override it like this:

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

@Steve-Mcl

If you inspect the digits using devtools

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

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.

[Steve-Mcl]

@Gunner

@Steve-Mcl

If you inspect the digits using devtools

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

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

[jbudd]

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 https://www.w3schools.com/css/css3_variables.asp 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.