Help with Node color changing

[ctrl50]

First of all. Thanks. This is a very cool theme, best one you released yet, in my opinion!

Second, Sorry if this is the wrong place for this.

I am trying to add some color to nodes for home assistant. Looking at the solarized-dark-grey-nodes.css file I can pretty much understand whats going on.

/* node: call-service */
#red-ui-palette-container .red-ui-palette-node[data-palette-type*="call service"],
#red-ui-palette-container .red-ui-palette-node[data-palette-type*="call service"] .red-ui-palette-label,
#red-ui-palette-container .red-ui-palette-node[data-palette-type*="call service"] .red-ui-palette-icon,
#red-ui-palette-container .red-ui-palette-node[data-palette-type*="call service"] .red-ui-palette-icon_container,
#red-ui-workspace-chart .red-ui-flow-node[fill*="rgb(82, 192, 242)"] {
   background-color: #3be0af !important;
   fill: #3be0af !important;
}

This is what im trying to achieve. If i understand correctly I have to get the default color and put it into, "[fill*="rgb(82, 192, 242)"]" which I have done using dev options in Chrome.

I then changed the backgrounad and fill color, uploaded the new file and restarted node-red.

Nothing changed for that node. Am I using the call service name correctly?

Based on your theme that has the 'events: state' and 'trigger: state', and the 'get template' nodes already changed from default. So Im guessing im just missing something.?

Any help would be much appreciated.
Thanks

[ctrl50]

ok so i have managed to change it in the side bar using 'api-call-service', as the type. but when I drag it out it goes back to grey.

guessing im missing the place to change it in the main flow workspace

[ristomatti]

First of all. Thanks. This is a very cool theme, best one you released yet, in my opinion!

Thanks ! This is the only one I've released BTW. The other themes in the repository are designed by @bonanitech.

I should probably document this somewhere but I thought nobody else than myself would like to use the custom colors file 🙁. You'll need to check the hard coded fill color used by the node using browser development tools. Here's an example using Chrome Devtools (press F12 on Windows/Linux to open them):

So in this case, you'd make the second last as below. Some nodes use rgb colors, some hex and some color names. The CSS rule attribute needs to match the format. I hope this helps!

#red-ui-workspace-chart .red-ui-flow-node[fill*="#f49242"] {
   background-color: #3be0af !important;
   fill: #3be0af !important;
}

[ctrl50]

Yeah I had that part figured out, Its just that it is only changing the color on the sidebar, when i drag it out it goes to the other color.

code for this is

/* node: api-current-state */
#red-ui-palette-container .red-ui-palette-node[data-palette-type*="api-current-state"],
#red-ui-palette-container .red-ui-palette-node[data-palette-type*="api-current-state"] .red-ui-palette-label,
#red-ui-palette-container .red-ui-palette-node[data-palette-type*="api-current-state"] .red-ui-palette-icon,
#red-ui-palette-container .red-ui-palette-node[data-palette-type*="api-current-state"] .red-ui-palette-icon_container,
#red-ui-workspace-chart .red-ui-flow-node[fill*="#52C0F2"] {
   background-color: #0000ff !important;
   fill: #0000ff !important;
}

/* node: api-call-service */
#red-ui-palette-container .red-ui-palette-node[data-palette-type*="api-call-service"],
#red-ui-palette-container .red-ui-palette-node[data-palette-type*="api-call-service"] .red-ui-palette-label,
#red-ui-palette-container .red-ui-palette-node[data-palette-type*="api-call-service"] .red-ui-palette-icon,
#red-ui-palette-container .red-ui-palette-node[data-palette-type*="api-call-service"] .red-ui-palette-icon_container,
#red-ui-workspace-chart .red-ui-flow-node[fill*="#52C0F2"] {
   background-color: #ff0000 !important;
   fill: #ff0000 !important;
}

Not really sure whats going on

[ristomatti]

Can you give a link to the nodes?

[ctrl50]

Sure.

https://flows.nodered.org/node/node-red-contrib-home-assistant-websocket

[ristomatti]

I pushed a new release to npm making the home-assistant-websockets nodes blue. You can take example from the changes if you want to make them some other color. My idea with contrib node colors has been to find the closest color to the original node color from the solarized color palette. Alternatively I might have picked the color based on a company/product/brand logo if applicable.

I've just colored a few that I use personally but I decided to add this one as it's so widely used (even though I'm not using it myself).

[ristomatti]

Note that it's unfortunately not possible to color a single node from a set of nodes as there's no unique identifier on the flow editor other than the node color.

[ctrl50]

Nice ill have a look. I kind of figured as much with the nodes being the same color. Either way Its such an awesome theme all around. Thanks!

Ill go ahead and close this now.

[ristomatti]

No prob. And don't be afraid to report bugs on the theme. I know there's few places which look crappy but they just haven't yet annoyed me enough to fix them. A bug report could create the needed push to fix them.

[ctrl50]

Updated the home assistant nodes and everything went back to grey. Looks like the hex colors were changed.

old:

/* node: home-assistant-websocket */
#red-ui-palette-container-home_assistant #red-ui-palette-home_assistant .red-ui-palette-node,
#red-ui-palette-container-home_assistant #red-ui-palette-home_assistant .red-ui-palette-node .red-ui-palette-label,
#red-ui-palette-container-home_assistant #red-ui-palette-home_assistant .red-ui-palette-node .red-ui-palette-icon,
#red-ui-palette-container-home_assistant #red-ui-palette-home_assistant .red-ui-palette-node .red-ui-palette-icon_container,
#red-ui-workspace-chart .red-ui-flow-node[fill*="#038FC7"],
#red-ui-workspace-chart .red-ui-flow-node[fill*="#52C0F2"] {
   background-color: #f49242 !important;
   fill: #f49242 !important;
}

changed it to:

#red-ui-palette-container-home_assistant #red-ui-palette-home_assistant .red-ui-palette-node,
#red-ui-palette-container-home_assistant #red-ui-palette-home_assistant .red-ui-palette-node .red-ui-palette-label,
#red-ui-palette-container-home_assistant #red-ui-palette-home_assistant .red-ui-palette-node .red-ui-palette-icon,
#red-ui-palette-container-home_assistant #red-ui-palette-home_assistant .red-ui-palette-node .red-ui-palette-icon_container,
#red-ui-workspace-chart .red-ui-flow-node[fill*="#46B1EF"],
#red-ui-workspace-chart .red-ui-flow-node[fill*="#5BCBF7"] {
   background-color: #007700 !important;
   fill: #007700 !important;
}

Seems to be working again. However a couple of them show the chaged color in the sidebar but default to grey in the workspace.

I also cant remeber for sure but I no longer seem to see anything named "#red-ui-palette-container-home_assistant" or "#red-ui-palette-home_assistant"

I now see:
"red-ui-flow-node" and "red-ui-flow-node-group" I cant remember for sure if this has always been the same or not

Also I noticed the issue you made. Is that related to how this will work now or?

thanks

[ristomatti]

Yes I would suggest testing the approach I describe on issue #2. I've been so busy with work forthe last ~5 months that I haven't had time/energy to do anything Node-RED related. But I did try it at the time I created the issue. It should make things nice and clean! 🤞

[ctrl50]

Okay thanks. I looked and dont quite understand how to make the work right. I totally understand about not having the time or energy. (ive got 2 kids) But being busy is better than being lazy :)

Im going to reclose this and make a comment on the other issue.