# DashBoard :: Theme custom :: Make own theme?

**URL:** <https://discourse.nodered.org/t/dashboard-theme-custom-make-own-theme/7656>\
**Category:** Dashboard\
**Created:** [6 February 2019 12:59 UTC](https://discourse.nodered.org/t/dashboard-theme-custom-make-own-theme/7656 "2019-02-06T12:59:23Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![YanK-fr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yank-fr/32/5307_2.png) [@YanK-fr](https://discourse.nodered.org/u/YanK-fr)\
**Post date:** [6 February 2019 12:59 UTC](https://discourse.nodered.org/t/dashboard-theme-custom-make-own-theme/7656/1 "2019-02-06T12:59:23Z")

</div>

Is it possible to make own theme for the dashboard ?

---

<div class="post-metadata">

**Author:** ![emspe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/emspe/32/5421_2.png) [@emspe](https://discourse.nodered.org/u/emspe)\
**Post date:** [6 February 2019 13:27 UTC](https://discourse.nodered.org/t/dashboard-theme-custom-make-own-theme/7656/2 "2019-02-06T13:27:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [6 February 2019 14:03 UTC](https://discourse.nodered.org/t/dashboard-theme-custom-make-own-theme/7656/3 "2019-02-06T14:03:37Z")

</div>

Yes, like this

> **[bonanitech/midnight-red](https://github.com/bonanitech/midnight-red)**
>
> A gorgeous dark theme for Node-RED. Contribute to bonanitech/midnight-red development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [6 February 2019 14:26 UTC](https://discourse.nodered.org/t/dashboard-theme-custom-make-own-theme/7656/4 "2019-02-06T14:26:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![YanK-fr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yank-fr/32/5307_2.png) [@YanK-fr](https://discourse.nodered.org/u/YanK-fr)\
**Post date:** [6 February 2019 14:38 UTC](https://discourse.nodered.org/t/dashboard-theme-custom-make-own-theme/7656/5 "2019-02-06T14:38:33Z")

</div>

I just have this tabs : Layout, Site and Angular

---

<div class="post-metadata">

**Author:** ![emspe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/emspe/32/5421_2.png) [@emspe](https://discourse.nodered.org/u/emspe)\
**Post date:** [6 February 2019 14:43 UTC](https://discourse.nodered.org/t/dashboard-theme-custom-make-own-theme/7656/6 "2019-02-06T14:43:27Z")

</div>

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

![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/73f568920e759529d399b094541255a146759531.png)

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [6 February 2019 14:48 UTC](https://discourse.nodered.org/t/dashboard-theme-custom-make-own-theme/7656/7 "2019-02-06T14:48:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![YanK-fr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yank-fr/32/5307_2.png) [@YanK-fr](https://discourse.nodered.org/u/YanK-fr)\
**Post date:** [6 February 2019 14:49 UTC](https://discourse.nodered.org/t/dashboard-theme-custom-make-own-theme/7656/8 "2019-02-06T14:49:31Z")

</div>

node-red-dashboard  
2.13.2  
 ![Capture%20d%E2%80%99%C3%A9cran%20de%202019-02-06%2015-48-19](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/2c129c52d8c99ae78523a844e3dcd03fa837e27a.png)

---

<div class="post-metadata">

**Author:** ![YanK-fr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yank-fr/32/5307_2.png) [@YanK-fr](https://discourse.nodered.org/u/YanK-fr)\
**Post date:** [6 February 2019 14:58 UTC](https://discourse.nodered.org/t/dashboard-theme-custom-make-own-theme/7656/9 "2019-02-06T14:58:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [6 February 2019 18:37 UTC](https://discourse.nodered.org/t/dashboard-theme-custom-make-own-theme/7656/10 "2019-02-06T18:37:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![YanK-fr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yank-fr/32/5307_2.png) [@YanK-fr](https://discourse.nodered.org/u/YanK-fr)\
**Post date:** [7 February 2019 09:21 UTC](https://discourse.nodered.org/t/dashboard-theme-custom-make-own-theme/7656/11 "2019-02-07T09:21:27Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/3be1053f4cb78cf7ced414a43486af64cc48e3c2.gif)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [7 February 2019 11:06 UTC](https://discourse.nodered.org/t/dashboard-theme-custom-make-own-theme/7656/12 "2019-02-07T11:06:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![YanK-fr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yank-fr/32/5307_2.png) [@YanK-fr](https://discourse.nodered.org/u/YanK-fr)\
**Post date:** [7 February 2019 12:16 UTC](https://discourse.nodered.org/t/dashboard-theme-custom-make-own-theme/7656/13 "2019-02-07T12:16:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [7 February 2019 15:41 UTC](https://discourse.nodered.org/t/dashboard-theme-custom-make-own-theme/7656/14 "2019-02-07T15:41:16Z")

</div>

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.