I have just published my custom Node-RED dark theme. It's inspired by Ethan Schoonover's classic solarized dark color theme with the main difference of a dark grey background instead of a dark blue one.
A big thank you to @mbonani for regular reminders to complete and publish the theme, and also for letting me use @node-red-contrib-themes/midnight-red documentation template! Without his help it could have taken another 6 months for me to get this done.
NB: The theme also customizes node colors (as can be seen on the screenshot). This might be considered somewhat controversial. Custom node colors can be left out by leaving out solarized-dark-grey-nodes.css from settings.js. Personally I feel the muted colors do not go well with the solarized palette....
Hi Ristomatti,
Nice work!CSS always has been a weak point for me. I saw recently some Node-RED issues (I think from @mbonani?) about hardcoded css. I have lots of such css in my nodes, so I assume that will be horrible for guys like you and Mauricio, to write a custom theme?
Bart
I actually very rarely see any issues with contrib nodes. I've got no CSS tweaks for custom nodes in the theme. But if you want to make sure not to cause issues, just avoid setting text or background colors. If there's no way around setting them, then set both background and text/foreground colours.
Just to let you know, so has for me. At work I always avoid tasks involving CSS. I hate positioning stuff with a vengeance! It rarely makes sense to me and I need to resort to brute force trial and error.
But I am also a big fan of dark UI's so that has led me to create a bunch of customizations during the years (userstyles for Stylus mainly). Editing colors doesn't require understanding the complex positioning system of CSS. It's more like a coloring book with a an element of a puzzle to figure out which rules to override.
Yes I had already seen that in the previous period. Very nice to see that you figure out where things needs to be corrected, and that Nick solves it. Think I would get nuts while doing such a job
Ok that makes sense. Thought I had a massive amount of hardcoded css in my nodes, bute when I have a quick look it is indeed mostly about sizing:
I decided to look at the theme again without the node colors CSS and it doesn't look as bad as I remembered. I'll at some point update the documentation to mention the node colors are optional and also post a screenshot of either option.
In the long run my goal is to try and see how would it look and how much work would be to try to create slight variations from the standard solarized palette to be able to give a distinct color to all the built in nodes the very least.
Another thought I've had is to try to use CSS filters to make all node colors fit the theme's solarized palette better. Working with the node colors is tricky and tedious though as they use inline CSS and there's no fixed pattern. Some use hex values, some rgb and some color names.
Edit: forgot to comment on the grey default node color. I've (naturally) first and foremost developed the theme for myself to use. The idea with most nodes being grey is to make a starker contrast to certain nodes I wanted to highlight on my own flows.
Thanks! There's some glitches here and there still. I've just recently started updating my flows and now I've started noticing the bugs. For instance import/export dialog is a mess and configuration nodes tab has node names on black color. Luckily those are not features you normally use all the time as I likely don't have the time to fix them.
If any other obvious issues arise, please raise an issue on the GitHub repository.
