Unsure on how to configure app.min.less

Dashboard
1

Dear all,

I am currently trying to build an executable program using electron-packager as mentioned in my previous post on General: Using Credentials on HTTP Request Nodes causes flow to not work on startup

One of my objectives is to ensure that the same dashboard theme is seamlessly ported to new machines that does not have node-red.

I have looked through this link: DashBoard :: Theme custom :: Make own theme?

The method I have used is to use a ui_template node and manually assign colors to the various html objects by ID and CSS variables. The CSS variables are mentioned in the README in the github repo for dashboard: https://flows.nodered.org/node/node-red-dashboard .I however wanted to find a different way if possible without using the template node.

The link mentioned the ability to modify the source code for the node-red-dashboard module. I've found app.min.css and app.min.less.

The css variables mentioned in https://flows.nodered.org/node/node-red-dashboard are defined here in app.min.less and are linked to hex color codes that changes when u change the "THEME" colors in the editor for dashboard.

However, on my two separate computers, the following steps of modification do not appear to have any effect:

  1. Remove template node to ensure no clashes.
    2.Change each @variable to desired hex color code(example:@pageBackgroundColor: #fffff)
  2. Save the app.min.less file, and do npm rebuild on my user directory( in this case C:/Users/hbo/.node-red
  3. Restart node-red.
  4. Clear browser cache
  5. Load dashboard UI

I note that modifying the theme colors within the editor seems to not affect the app.min.less after I have edited it. This remains the same when I have restarted the computer( this means that the colors stated on the app.min.less are different from the dashboard's colors, including light theme).

Is there another file/ file location that is currently overriding my edited variable? I have removed the template node as stated to prevent conflicts. Or am I not rebuilding the package correctly such that it may take effect? Did I have to run npm rebuild within the module itself?

Thank you all for taking the time to read. Hope this thread may help another newbie work with Node-RED.

2

If you create a custom dashboard theme within the editor it should be saved in the flow file itself so it is present next time you start. So if you are providing a pre-done flow file there should be no need to mess with defaults.
If you really do need to then you need to fork the original dashboard project, edit the theme.less file and rebuild the package (using gulp). This will then recreate the .min files for you.
This is hardly beginner level stuff though.