# Ui-theme colour variable

**URL:** <https://discourse.nodered.org/t/ui-theme-colour-variable/97504>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [9 June 2025 05:14 UTC](https://discourse.nodered.org/t/ui-theme-colour-variable/97504 "2025-06-09T05:14:05Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![amhaziq](https://avatars.discourse-cdn.com/v4/letter/a/eb8c5e/32.png) [@amhaziq](https://discourse.nodered.org/u/amhaziq)\
**Post date:** [9 June 2025 05:14 UTC](https://discourse.nodered.org/t/ui-theme-colour-variable/97504/1 "2025-06-09T05:14:05Z")

</div>

When I using ui-template, if i need to set CSS colour, I'm using hex or RGB code. If colour used same as colur set at ui-theme, is there any variable to use instead of repeatedly use hex/RGB code?

---

<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:** [9 June 2025 07:02 UTC](https://discourse.nodered.org/t/ui-theme-colour-variable/97504/2 "2025-06-09T07:02:08Z")

</div>

See [CSS Colors](https://www.w3schools.com/cssref/css_colors.php)

---

<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:** [9 June 2025 07:04 UTC](https://discourse.nodered.org/t/ui-theme-colour-variable/97504/3 "2025-06-09T07:04:37Z")

</div>

Oh, perhaps you meant that you want to use whatever colour is defined in the current theme (so that it will automatically change if you change the theme. If that is the question then I don't know the answer.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [9 June 2025 11:06 UTC](https://discourse.nodered.org/t/ui-theme-colour-variable/97504/4 "2025-06-09T11:06:43Z")

</div>

Inspecting a Dashboard 1 page , I can see these variables -

```
--nr-dashboard-pageBackgroundColor
--nr-dashboard-pageTitlebarBackgroundColor
--nr-dashboard-pageSidebarBackgroundColor
--nr-dashboard-groupTextColor
--nr-dashboard-groupBackgroundColor
--nr-dashboard-groupBorderColor
--nr-dashboard-widgetTextColor
--nr-dashboard-widgetBackgroundColor
--nr-dashboard-widgetBorderColor
--nr-dashboard-widgetColor
--nr-dashboard-widgetBgndColor

```

---

<div class="post-metadata">

**Author:** ![amhaziq](https://avatars.discourse-cdn.com/v4/letter/a/eb8c5e/32.png) [@amhaziq](https://discourse.nodered.org/u/amhaziq)\
**Post date:** [10 June 2025 03:24 UTC](https://discourse.nodered.org/t/ui-theme-colour-variable/97504/5 "2025-06-10T03:24:29Z")

</div>

Variable to use in CSS

Dashboard Header - rgb(var(--v-theme-navigation-background))  
Dashboard Primary - rgb(var(--v-theme-primary))  
Pages Background - rgb(var(--v-theme-background))  
Group Background - rgb(var(--v-theme-group-background))  
Group Outline - rgb(var(--v-theme-group-outline))

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [10 July 2025 03:25 UTC](https://discourse.nodered.org/t/ui-theme-colour-variable/97504/6 "2025-07-10T03:25:07Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.