[Announce] @node-red-contrib-themes/solarized-dark-grey

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.

It's installed in a similar manner as the popular Midnight theme and is infact hosted under the same GitHub organization. Installation instructions can be found at the repo: https://github.com/node-red-contrib-themes/solarized-dark-grey

Screenshot:

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....

5 Likes

Hmm, I wonder if this should have been more appropriate under "Share my project"? :thinking:

Feel free to move if you (the moderators) think so.

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

Not really. @knolleary is helping us a lot by quickly fixing those issues. And they are becoming rare now. :slightly_smiling_face:

EDIT: I just realized that you were talking about custom nodes. Like @ristomatti, I rarely see them having issues with custom themes.

2 Likes

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. :slightly_smiling_face:

1 Like

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. :joy:

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 :wink:

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:

$("#node-input-animations-container").css('min-height','150px').css('min-width','400px')

So I need to stay away from hardcoded colors. Will try to remember that ...

2 Likes

Yup, fairly controversial. While it pays to read NBs I didn't notice this particular one and was about to raise an issue :no_mouth:

While I agree the pastels don't work well the dark grey looks worse imo. Perhaps the default should be to leave the node colours as built?

Well mixing the bright colors with the muted ones is likely a horrible soup. If you leave out the nodes.css does it work as expected then?

There's really not much "solarized" with it then though. Pretty much only the editor/debug window colors, node statuses and such would use the colors. :slightly_smiling_face:

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.

They actually look a lot better with my reference monitor than they did on my laptop. No surprise there I guess.

Should have said before but this theme is by far the best out there, so :+1:

1 Like

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.

1 Like

This topic was automatically closed after 60 days. New replies are no longer allowed.