node-red-contrib-themes / solarized-dark-grey

DEPRECATED REPOSITORY

DEPRECATED REPOSITORY

This theme is now maintained at https://github.com/ristomatti/node-red-contrib-theme-solarized-dark-grey

Solarized Dark Grey Node-RED theme

About

A dark theme for Node-RED inspired by Solarized color palette by Ethan Schoonover.

Install

Change to the Node-RED userDir directory, usually ~/.node-red.

cd ~/.node-red

Install this package.

npm install @node-red-contrib-themes/solarized-dark-grey

Add the following to the editorTheme section of your settings.js.

editorTheme: {
    page: {
        css: [
            "<HOME>/.node-red/node_modules/@node-red-contrib-themes/solarized-dark-grey/solarized-dark-grey.css",
            "<HOME>/.node-red/node_modules/@node-red-contrib-themes/solarized-dark-grey/solarized-dark-grey-nodes.css"
        ],
        scripts: [
            "<HOME>/.node-red/node_modules/@node-red-contrib-themes/solarized-dark-grey/theme-tomorrow.js",
            "<HOME>/.node-red/node_modules/@node-red-contrib-themes/solarized-dark-grey/solarized-dark-grey.js"
        ]
    }
}

Replace <HOME> with the home directory of the user running Node-RED. For example, /home/username.

For more details on the configuration please refer to the Node-RED official documentation.

Restart Node-RED.

Enjoy!

Update

Change to the Node-RED userDir directory, usually ~/.node-red.

cd ~/.node-red

Update this package.

npm update @node-red-contrib-themes/solarized-dark-grey

Reload the Node-RED page on the web browser.

Acknowledgments

• Ethan Schoonover - for the awesome Solarized color palette.
• Mauricio Bonani - for his help with pushing me to publish the theme.

License

MIT

solarized-dark-grey's Issues

Help with Node color changing

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

Replace solarized-dark-grey-nodes.css with a settings.js configuration

Node-RED supports setting node colors in settings.js. This removes the need for awkward CSS trickery to change the node colors in CSS. The CSS colors need to be moved to a JS/JSON file which can then be required directly from node_modules in settings.js.

Settings file syntax for reference:

{
  editorTheme: {
    palette: {
      theme: [
        // Override node colours - rules test against category/type by RegExp.
        { category: ".*", type: ".*", color: "#f0f" }
      ]
    }
  }
}