New Dashboard - How to change canvas text color for other themes?

[opnsenseuser]

Hi Stephan

I wanted to ask you in which file I can change the text colors for the canvas charts? And how can I then overwrite these for my themes?

Thanks Regards, Rene (team-rebellion)

Our forum is located at https://forum.opnsense.org , please consider joining discussions there in stead of using GitHub for these matters.

Before you ask a new question, we ask you kindly to acknowledge the following:

• [x ] I have read the contributing guide lines at https://github.com/opnsense/core/blob/master/CONTRIBUTING.md
• [x ] I am convinced that my issue is new after having checked both open and closed issues at https://github.com/opnsense/core/issues?q=is%3Aissue

[swhite2]

Hey there :)

I've committed https://github.com/opnsense/core/commit/e4635872fc6e306a010f6d9112935f42ec6489d5 as a possible strategy. You can then do the following in the CSS file:

:root {
    --chart-js-background-color: #f7e2d6;
    --chart-js-border-color: #d94f00;
    --chart-js-font-color: #d94f00;
}

Some of the text in the charts is placed with a custom plugin, I'll investigate inheriting the defaults from the Chart global there.

[opnsenseuser]

thx - works great. what i´m missing is to change the black color for this

[opnsenseuser]

So in this case, the text (number) of the %.

[swhite2]

@opnsenseuser Should work with https://github.com/opnsense/core/commit/b74baecf135c45ebdecfeac3bcdb6f42a114763c. This will adapt to the chart font color, if you'd like it to be configurable separately let me know.

[opnsenseuser]

@swhite2 perfect ! How can i use this with css to change the color?

[swhite2]

@opnsenseuser The text in those gauge widgets should adapt to the same --chart-js-font-color value globally.

[opnsenseuser]

@swhite2 sorry, it seems like this doesnt work.

[opnsenseuser]

i also allready patched the core code dooing >> opnsense-patch -c core b74baec

[swhite2]

Works without issue on my end

Based on the screenshot (memory usage should show secondary text as well) you're likely behind the master branch, in which case the patch may have failed to apply properly. Be sure to try a different browser as well to rule out caching issues.

Edit: The gauge widgets specifically have been refactored into a base class, given that you're missing these commits it's likely best if you make upgrade in your local repo clone

[opnsenseuser]

ok, maybe its an caching problem.

[opnsenseuser]

@swhite2 you are right. file is missing even after upgrade of repo

[swhite2]

@opnsenseuser Just pull the latest core repository and make upgrade, I assume you're not editing anything there.

The dashboard is still under development, so things will change in the meantime - be sure to upgrade when you want to work on the theme.

[opnsenseuser]

everything works great....one more text i found. is it possible to change this text color too?

[swhite2]

https://github.com/opnsense/core/commit/9b55214aaa16ac8c76c389408438be9e4cfbab11 should do it.

Appreciate the work on the theme :)

[opnsenseuser]

@swhite2 perfect. works great

[opnsenseuser]

@swhite2 do we need this hover effect on the right side if you hover any widget? on opnsense this is not shown because of the white color of the widgets

[swhite2]

what element class/id is the hover effect? Seems to be something internal to gridstack

[opnsenseuser]

should be any of these classes

[swhite2]

Cannot reproduce this, I think it's best if I take a look as soon as I'm able to check out an initial version of your changes

[opnsenseuser]

@swhite2 Maybe the color can be set here >> gridstack-all.min.js but in the online manual its really dificult to find the problem. i only found the resize sample https://gridstackjs.com/demo/sizeToContent.html