[Flexdash]: dark theme and b/w text / value color

Hello All, I have tried reading all of the threads and I have been through the flexdash docs several times, and I havent found any discussion about how to either 1) detect that dark mode is selected on client so that widget colors explicitly set via props can be shifted. or 2) how to set value and text colors to the correct class or selector so that the theme can change between b/w contrast based on light/dark theme.

I have stat nodes that I set the value color based on 4 thresholds, compared to operator selected Setpoint values.. so it seems easier to switch the colors with the msg.prop. from my application.

when setting the color to the standard theme black, explicitly with msg.prop the dark theme does not apply contrasting selectors to those values.

so I either need a way to explicitly set contrasting text colors in my logic or need a way to select the correct theme value that will apply the same selectors as all of the other text, so that the theme selectors can switch it. are either of these possible?

Currently the light-dark info is not sent to Node-RED. Thanks for posting the use-case for getting dark/light mode info. The one thing you can do is use the color text which should switch between back and white depending on the theme. But that doesn't help you if you want to change the intensity of red, for example.

Sending the theme info to Node-RED is not difficult for me to implement. The difficulty is making use of it 'cause it's per browser, so on a stat node update, for example, you have to set the color using _fd_socket for each connected browser.

A solution that lets you define a bunch of color names and provide per-theme values would probably be a better approach. Hmmm.

thanks tve! happy to have provided a use case for consideration. Ive learned that forums, gitter and slack chat rooms, and raising issues always yield the best results when describing what is trying to be accomplished. I had not considered having to handle individual client settings, and it makes sense now that you bring it up.

I agree that a method of defining per theme selectors and allowing the client side to handle the theming is likely the best approach to most potential uses. Or at least more cases than just mine.

setting text with msg.color, renders a different color that does not change with the theme.. However, it is a bright grey that provides enough contrast in both dark and light mode that is very readable. I would prefer if it matched the rest of the black or white text, but it is a more functional solution than explicitly setting the color palette "black"

1 Like

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