DashBoard :: Theme custom :: Make own theme?

Dashboard
1

Is it possible to make own theme for the dashboard ?

2

In the dashboard panel there is an option called "Theme". Try that .

3

Yes, like this

4

@Colin that is a custom theme for the Node-RED editor.

As this topic is in the Dashboard category, I assume it's related to the Dashboard themes which @emspe correctly points to the Theme tab of the Dashboard sidebar.

5

I just have this tabs : Layout, Site and Angular

6

I mentioned this. I have these three tabs inside my dashboard sidebar.

Capture

7

What version of node-red-dashboard are you using?

8

node-red-dashboard
2.13.2
Capture%20d%E2%80%99%C3%A9cran%20de%202019-02-06%2015-48-19

9

Ok i see the problem.
I choose Angular theme.
If i change this option i can see theme tab.

But is just possible to change some colors.
I would like to override all css, js and font to make a custom theme.

10

The source of the dashboard project is available - you can fork it and edit whatever you like... or there is the node-red-contrib-uibuilder project that allows you to bring whatever development framework you like so you can build your own front end to Node-RED mode easily.

11

Yes i know but i just want to know if is it possible without fork or with a new module to override it.
I would like to keep original dasboard.
I think if the community could create its own templates we would have interfaces like that:

68747470733a2f2f692e696d6775722e636f6d2f586f4a7466764b2e676966
68747470733a2f2f692e696d6775722e636f6d2f586f4a7466764b2e676966.gif800Ă—430 3.35 MB

12

Yes - that is what the node-red-contrib-uibuilder can be used for.

13

Ok, nerver mind.
I just want to override css and js but keep block management.
uibuilder is to make an interface from scratch.

14

Yes - but the one you want to try to copy is way more than that.
As already said you are free to take the source and "just" override the CSS in any way you want - so lots of options..

  • just change the colours inside the dashboard
  • customise the css within a ui_template node
  • fully customise css by modifying source and rebuild
  • use uibuilder project to create custom dashboard that has Node-RED comms built in
  • go fully custom and use websockets and http endpoints to talk to Node-RE.