# Dashboard 2 dark theme

**URL:** <https://discourse.nodered.org/t/dashboard-2-dark-theme/98589>\
**Category:** Dashboard\
**Created:** [9 August 2025 21:39 UTC](https://discourse.nodered.org/t/dashboard-2-dark-theme/98589 "2025-08-09T21:39:04Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)\
**Post date:** [9 August 2025 21:39 UTC](https://discourse.nodered.org/t/dashboard-2-dark-theme/98589/1 "2025-08-09T21:39:04Z")

</div>

After installing Dashboard 2.0, I have 2 Default themes listed but not a Dark them as in the original dashboard. Was a Dark theme supposed to be part of the installation? If not, has anyone documented the changes necessary to set the Dark theme?

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [10 August 2025 02:12 UTC](https://discourse.nodered.org/t/dashboard-2-dark-theme/98589/2 "2025-08-10T02:12:19Z")

</div>

I was able to come close to the DB1 “Dark Theme” by creating a custom theme in Dashboard 2 and applying that to each ui-page.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/8/b8c164cae47d650a8d5107d5ceb443369014a3fa.png)

 ![Screenshot 2025-08-09 at 9.13.37 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/7/b76f453f353f891dea0d69189398d126029a12c4.png)

I had to do some custom CSS stuff (with help from the community)for the navigation bar and global font type.

---

<div class="post-metadata">

**Author:** ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)\
**Post date:** [10 August 2025 02:37 UTC](https://discourse.nodered.org/t/dashboard-2-dark-theme/98589/3 "2025-08-10T02:37:22Z")

</div>

Thanks… this gets me 90% of what I want… I still want to change the color of the Group title as well as some of the text within the group is Grey instead of White. I expect I’ll need to implement CSS to fix these.

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [10 August 2025 02:42 UTC](https://discourse.nodered.org/t/dashboard-2-dark-theme/98589/4 "2025-08-10T02:42:39Z")

</div>

You may be able to do some of this in the widget configuration panel. Otherwise it’s CSS

---

<div class="post-metadata">

**Author:** ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)\
**Post date:** [10 August 2025 02:44 UTC](https://discourse.nodered.org/t/dashboard-2-dark-theme/98589/5 "2025-08-10T02:44:22Z")

</div>

yes you can … but it would be great to do this stuff as part of the general theme settings .. at least for the common UI elements (Group Title and others)

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [10 August 2025 02:47 UTC](https://discourse.nodered.org/t/dashboard-2-dark-theme/98589/6 "2025-08-10T02:47:21Z")

</div>

> [@k5map](#):
>
> I still want to change the color of the Group title

I think Group titles may require some additional work. I remember seeing some threads here that discussed that

---

<div class="post-metadata">

**Author:** ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)\
**Post date:** [10 August 2025 02:53 UTC](https://discourse.nodered.org/t/dashboard-2-dark-theme/98589/7 "2025-08-10T02:53:42Z")

</div>

There is a Class object within the ui-Group node so that’s my next focus to change the Group title and text colors

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [10 August 2025 03:08 UTC](https://discourse.nodered.org/t/dashboard-2-dark-theme/98589/8 "2025-08-10T03:08:27Z")

</div>

> [@xx\_Nexus\_xx](#):
>
> it would be great to do this stuff as part of the general theme settings

Yeah - I mentioned the same thing in an earlier discussion. My understanding is that it is really a matter of not having enough resources to do all the work. Hopefully, this will be added down the line.

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [15 August 2025 12:03 UTC](https://discourse.nodered.org/t/dashboard-2-dark-theme/98589/9 "2025-08-15T12:03:19Z")

</div>

> [@k5map](#):
>
> There is a Class object within the ui-Group node so that’s my next focus to change the Group title

Were you able to find a way to change the group title text? I’m also looking to do the same and would appreciate any pointers. Thanks

---

<div class="post-metadata">

**Author:** ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)\
**Post date:** [15 August 2025 12:52 UTC](https://discourse.nodered.org/t/dashboard-2-dark-theme/98589/10 "2025-08-15T12:52:17Z")

</div>

Not yet… unfortunately focus has been directed elsewhere but hopefully will have time this weekend to do more testing

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [15 August 2025 14:09 UTC](https://discourse.nodered.org/t/dashboard-2-dark-theme/98589/11 "2025-08-15T14:09:10Z")

</div>

> [@k5map](#):
>
> Not yet

I went the simpler way of using a ui-text widget and styling it to match the group header. Dynamic updates work with ui\_update.label.

It takes up just a little bit of extra space than the group header (hide the title in the group configuration panel).

Now if I can only figure out where the [object],[object] is coming from! I’ve deleted the payload and the only thing being sent is the text.

 ![Screenshot 2025-08-15 at 9.07.39 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/8/f87c625856ef61340685ea5e5205a3361c6b2a26.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [15 August 2025 16:27 UTC](https://discourse.nodered.org/t/dashboard-2-dark-theme/98589/12 "2025-08-15T16:27:51Z")

</div>

> [@rakgupta](#):
>
> Now if I can only figure out where the [object],[object] is coming from! I’ve deleted the payload and the only thing being sent is the tex

Send an empty string in ui\_update.label

Alternatively, use a template node.  
Alternatively, use a markdown node.  
Alternatively, add a class to the ui-text and add CSS to hide the `label` element  
Alternatively add JS dom code in a ui-template that locates the text in the group and rewrites it based on your msg.payload.

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [15 August 2025 18:36 UTC](https://discourse.nodered.org/t/dashboard-2-dark-theme/98589/13 "2025-08-15T18:36:09Z")

</div>

> [@Steve-Mcl](#):
>
> Alternatively, use a template node.

This worked perfectly. I actually wanted to change the “group name” based on user selection, and your suggestion was the simplest way to do it. Thanks so much.

---

<div class="post-metadata">

**Author:** ![BambosD](https://avatars.discourse-cdn.com/v4/letter/b/54ee81/32.png) [@BambosD](https://discourse.nodered.org/u/BambosD)\
**Post date:** [5 November 2025 07:07 UTC](https://discourse.nodered.org/t/dashboard-2-dark-theme/98589/14 "2025-11-05T07:07:58Z")

</div>

Hello Everyone,

i'm trying to apply another theme to dashboard 2. preferably a dark theme.

how the dashboard 2 template node can be matched with ui control node for a specific page or all pages ? Can we use a tool for the styling ? like vuetify ?

Please for suggestions.