Erm I coule well be wrong but ercently I upgraded my NR to nodejs 18 and NR to 3.0-something. All was well.
This morning I upgraded to NR 3.10 - flawless using your script.... I could be wrong but until this morning I never noticed my FUNCIONS - the status line underneath - having a light grey background (I'm using a dark background)..
node.status({fill:"green",shape:"dot",text:"Cabinet LR temperature " + msg.payload.AM2301.Temperature + String.fromCharCode(176) + "C" + global.get("handyDate")});
Now they all look odd..
That is a fault of your theme. It is addressed in some themes that have been updated.
The status now have a semi-opaque background (as of 3.1) for clarity when wires run underneath. It was all discussed in the beta.4 thread.
PS, if you update your title to something like "Node-RED 3.1, status under node has an odd background" I am fairly certain our main theme maintainer see it and will pop in to explain.
I'm not a whizz at themes - point me to the line to add any dark theme and I'll do it
Or do you still have to go into settings? Long time since I changed the theme - midnight red or similar....
I believe it is already done. theme-collection (node) - Node-RED was updated yesterday
@mbonani can you chip in please?
Wow - I just installed that contrib node - did nothing else - and everything works - that was easy. Thanks
1 Like
@scargill , you need to update to the latest version of the theme collection package.
Run the following command from within the Node-RED user data directory (by default, $HOME/.node-red).
npm install @node-red-contrib-themes/theme-collection
Then restart Node-RED and hit refresh in your browser.
Not working for me.
Updated Docker image,
Must admit that I recently simply used the Stylus browser extension to make life a bit less white:
:root {
/* --red-ui-primary-background: red; */
--jk-bg: hsl(40,7%,70%,1);
--jk-bg-l1: hsl(40,7%,83%,1);
--jk-bg-l2: hsl(40,7%,92%,1);
--jk-bg-d1: hsl(40,7%,65%,1);
}
/* Calm down the glaring white backgrounds */
.red-ui-workspace-chart-background {
fill: var(--jk-bg);
}
.red-ui-palette-header,
.red-ui-tabs ul li.active {
background-color: var(--jk-bg);
}
.red-ui-panel,
.red-ui-editableList-item-content,
.red-ui-info-outline-item-controls,
.red-ui-tray-body,
.red-ui-tabs,
.red-ui-palette-content,
.red-ui-sidebar-context-stack,
#red-ui-sidebar-content {
background-color: var(--jk-bg-l1);
}
.red-ui-editableList-container li,
table.red-ui-info-table td {
background-color: var(--jk-bg-l1) !important;
}
.red-ui-editableList-container li {
background-color: var(--jk-bg-l2) !important;
}
.red-ui-workspace-chart-grid-h,
.red-ui-workspace-chart-grid-v {
stroke: var(--jk-bg-d1) !important;
}
/* Remove odd fade image that only looks ok on default colours - just not needed at all */
.red-ui-tabs ul li.active .red-ui-tabs-fade {
background-image: none;
}
.red-ui-flow-node-status-background {
fill-opacity: .4;
}
/* Compress vertical spacing of palette */
.red-ui-palette-node {
margin-top: 5px !important;
margin-bottom: 5px !important;
}
.red-ui-palette-header, .red-ui-palette-header i {
line-height: .9em;
}
.red-ui-palette-label {
line-height: 1em;
}
/* Centres the label text in the parent */
.red-ui-palette-node:before, .red-ui-palette-label {
display:inline-block;
vertical-align:middle;
}
.red-ui-palette-node:before {
content:"";
height:100%
}
This is the one that makes the status background semi-transparent:
.red-ui-flow-node-status-background {
fill-opacity: .4;
}
From within which directory?
This is how I do it in the container shell.
cd /data
npm install @node-red-contrib-themes/theme-collection
Then restart the container and refresh the browser.
Right - all done and working but... call this a dumb question if you like - how do you access this theme collection From within node-red?
Unfortunately, this is currently not possible.
You can only override the theme from settings.js. Or, as I did, from a browser extension.
Oops, I thought he was talking about updating the theme collection package from within Node-RED.
Yes, that is exactly what I did.
Can you try uninstalling and reinstalling the package?
In the container shell.
cd /data
npm uninstall @node-red-contrib-themes/theme-collection
npm install @node-red-contrib-themes/theme-collection
Then restart the container and refresh the browser.
system
24 September 2023 02:46
20
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
