node-red-contrib-themes / theme-collection Goto Github PK
View Code? Open in Web Editor NEWA collection of themes for Node-RED
License: MIT License
A collection of themes for Node-RED
License: MIT License
If node build.js
is run from within /scripts/
for example, it will throw an error.
dev
branchscripts
directorynode build.js
❯ cd scripts
❯ node build.js
node:internal/fs/utils:347
throw err;
^
Error: ENOENT: no such file or directory, scandir '/Users/mbonani/Developer/node-red-contrib-themes/theme-collection/dev/scripts/themes'
at readdirSync (node:fs:1438:3)
at Object.<anonymous> (/Users/mbonani/Developer/node-red-contrib-themes/theme-collection/dev/scripts/build.js:7:16)
at Module._compile (node:internal/modules/cjs/loader:1155:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
at Module.load (node:internal/modules/cjs/loader:1033:32)
at Function.Module._load (node:internal/modules/cjs/loader:868:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:22:47 {
errno: -2,
syscall: 'scandir',
code: 'ENOENT',
path: '/Users/mbonani/Developer/node-red-contrib-themes/theme-collection/dev/scripts/themes'
}
No response
No response
No response
No response
No response
I don't know what happened to cause this.
Back story:
Things were working - afaik - quite happily.
I opened a function
node and the background colour was WHITE.
I tried a few others and they were the same.
Strange as I have worked on this machine recently and not seen this problem.
I have recently installed the theme on another machine and remembered the new way to do it.
So I went through the motions of checking. the settings.js
file didn't look right.
So I checked the pallet manager and the theme wasn't shown.
Installed it edited the theme and restarted.
Oh the pain. (Sorry)
Same.
I have 3 4 machines running NR all with NR 3.0.2 (or 3.0.1 maybe) and they were all working happily.
Now it is confusing to me.
I've installed the node on 3 of them and now it is the dashboard
list is messed up.
function
nodes are fine.
Please help.
There are no errors listed/shown.
No response
No response
3.0.2
Buster
Firefox
(Why the issue was filed) - Install didn't have desired results (AKA nothing changed)
As per Node-Red Forum - https://discourse.nodered.org/t/dark-mode-theme-looking-rather-pale/49768
knolleary
You have run the install in the wrong directory.
You need to be in ~/.node-red
I'm building a custom node red docker image and need to know how to add theme settings in Dockerfile. Thanks!
I have been a software engineer for over 30 years. But I have always loved the artistic nature of Steam Punk.
While working with Node-RED the other day, I had the idea that with the 'wires' and objects, what if they were in shapes of steam punk machines and the wires were various piping? Then I thought that working with Node-RED with such a theme would encourage young people into programming and software development, since building functions and apps would be not only functional, but artistic and cool creations.
We could take it even farther by various animations when running in debug mode...electric arcs, steam puffs, spinning things and flashing lights.
Close the browser (Chrome) with the editor open in a tab
Restart node-red
Open the browser
The editor appears but the theme is not applied, the default theme appears to be used.
The browser console shows
Refused to apply style from 'http://localhost:1880/theme/css/theme.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
:1880/#flow/bdd7be38.d3b55:1 Refused to apply style from 'http://localhost:1880/theme/css/theme-customizations.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
To get the theme applied refresh the browser page.
Once the page has been refreshed then there is no further problem. The browser may be closed and opened and the theme continues to be used. To see the problem node-red must be restarted and the browser opened.
I believe the problem is that if node-red is restarted and then http://localhost:1880/theme/css/theme.min.css
is entered into the browser window the response is
Cannot GET /theme/css/theme.min.css
If the node-red editor page is then refreshed then that url shows the theme as expected.
The problem is not seen with Firefox so I guess it is a timing issue to do with when the theme css becomes available.
Perhaps this should be reported against node-red, I don't know.
See also this post on the forum https://discourse.nodered.org/t/themes-from-themes-collection-not-applied-on-startup-on-chrome/59383
I would have like to first create this under discussions, but I don't seem to have access. I don't see a "create discussion" button. When I go there from the link I get "You can't perform that action at this time.". Moving on...
I cannot install this add-on. If I do so from the Node Red palette it says it failed and the log only shows this:
-----------------------------------------------------------
2023-11-23T04:34:36.560Z Install : @node-red-contrib-themes/theme-collection 3.1.5
I'm running under docker with tag 3.1, and it has node v18.17.1. When I made the host the same version and installed with npm I get:
npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name "@node-red-contrib-themes" of package "@node-red-contrib-themes": Tags may not have any characters that encodeURIComponent encodes.
I'm running the npm install in the same folder that has "node_modules" - I assume that is the correct location.
Note sure what to do next.
No response
It installs.
No response
v3.1.0
Ubuntu
Chrome
Using the dark or midnight-red themes with a mermaid diagram in the node description, the diagram shown in the Information panel for the node is not ideal.
For the exported node below it appears, in midnight-red as
In the dark theme it is similarly shown.
For reference, in Obsidian it appears as
[{"id":"55d54d1c275c150f","type":"function","z":"bdd7be38.d3b55","name":"Test mermaid markdown","func":"\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":810,"y":60,"wires":[[]],"info":"```mermaid\nstateDiagram-v2\nState_1 --> State_2: Transition 1\nState_2 --> State_3: Another transition\nState_3 --> State_1: Back to \\nthe start\n```"}]
The diagram should be displayed more clearly
3.0.6
3.1.0-beta.4
Ubuntu 22.04
Edge (Firefox is similar)
cyan/turquoise accent #1D817F
I was under the impression we were in the process of discussing including the theme in the collection. I've replied to you at Node-RED forum asking not to archive the repository and explaining the reasoning why I would be ok if it was not included in the collection while I would have liked it to be found under the @node-red-contrib-themes org. Now I see the repository archived and no more have access to remove the notice and point the possible few users of the theme back to my personal GitHub repository where I apparently will be maintaining the theme in future.
As I explained in my reply, this is one way to keep my CSS skills up-to-date but I need to be able to maintain the creative freedom to include the "unorthodox" customizations required to make the theme look like it does on the screenshots I've posted at https://discourse.nodered.org/t/announce-node-red-contrib-themes-solarized-dark-grey/29504, even if it means it cannot then be included in the official theme pack.
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
This repository currently has no open or pending branches.
.github/workflows/lock.yml
dessant/lock-threads v5.0.1
.github/workflows/pr-labels.yml
jesusvasquez333/verify-pr-label-action v1.4.0
.github/workflows/release-drafter.yml
release-drafter/release-drafter v6.0.0
.github/workflows/release-publish.yml
actions/setup-node v4.0.3
actions/checkout v4.1.7
actions/checkout v4.1.7
JS-DevTools/npm-publish v3.1.1
.github/workflows/stale.yml
actions/stale v9.0.0
package.json
chalk 5.3.0
chokidar 3.6.0
command-line-args 6.0.0
csso 5.0.5
fs-extra 11.2.0
khroma 2.1.0
nodemon 3.1.4
ora 8.0.1
sass 1.77.8
node >=18
If you apply the dark theme and open the radial menu the font is not readable.
Apply dark theme, then touch and hold on a node.
It should look like this:
As a workaround I added this lines to node-red-contrib-themes/theme-collection/themes/dark)/dark.min.css
.red-ui-editor-radial-menu-opt {
color: var(--red-ui-primary-text-color)
}
.red-ui-editor-radial-menu-opt.red-ui-editor-radial-menu-opt-disabled {
color: var(--red-ui-tertiary-border-color)
}
To solve the main problem in the Node-RED style.min.css
the color should be added to the red-ui-editor-radial-menu-opt
class.
3.0.6
3.0.2
No response
No response
Using NodeRED In Home Assistant.
When selecting the Cobalt theme, it is not possible to edit Flow names (Properties screen missing).
When selecting another theme (Dark) the Properties appear again.
hassio-addons/addon-node-red#1906
Changing theme should not disable or delete NodeRED functions or configurations.
No response
4.0.3
Home Assistant
Firefox
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.