# Best practice for using CSS variables

**URL:** <https://discourse.nodered.org/t/best-practice-for-using-css-variables/101897>\
**Category:** Developing Nodes\
**Created:** [12 October 2026 17:25 UTC](https://discourse.nodered.org/t/best-practice-for-using-css-variables/101897 "2026-10-12T17:25:23Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![fabnavigator](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fabnavigator/32/5403_2.png) [@fabnavigator](https://discourse.nodered.org/u/fabnavigator)\
**Post date:** [12 October 2026 17:25 UTC](https://discourse.nodered.org/t/best-practice-for-using-css-variables/101897/1 "2026-10-12T17:25:23Z")

</div>

Hi,

Is it a best practice to use the currently defined variables (i.e., var(--red-ui-palette-header-background)) in my CSS so that I get good results in light and dark modes? Can I count on these variables being defined in future releases of Node-RED?

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [12 October 2026 19:09 UTC](https://discourse.nodered.org/t/best-practice-for-using-css-variables/101897/2 "2026-10-12T19:09:39Z")

</div>

Fancy seeing you here 😉

Hopefully @knolleary will answer - as I know what this is about 😃

Sorry for pinging you here Nick

---

<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:** [13 October 2026 08:21 UTC](https://discourse.nodered.org/t/best-practice-for-using-css-variables/101897/3 "2026-10-13T08:21:23Z")

</div>

Hey - yes, those variables are provided for exactly that reason.

---

<div class="post-metadata">

**Author:** ![fabnavigator](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fabnavigator/32/5403_2.png) [@fabnavigator](https://discourse.nodered.org/u/fabnavigator)\
**Post date:** [14 October 2026 17:34 UTC](https://discourse.nodered.org/t/best-practice-for-using-css-variables/101897/4 "2026-10-14T17:34:12Z")

</div>

Sorry to be a bother, but instead of using those variables I would like to use dark-mode overrides, scoped under html.nr-theme-dark. Is that acceptable also?

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [14 October 2026 18:47 UTC](https://discourse.nodered.org/t/best-practice-for-using-css-variables/101897/5 "2026-10-14T18:47:21Z")

</div>

Hi @fabnavigator

If creating custom css rules..

Use `.zwjs-some-class-name`  
(I do this, so I dont interfere with Node Red styling. -that can effect other Nodes)

if you then want to control this based on current users preference (dark/light)

```css
@media (prefers-color-scheme: light) {
    .zwjs-some-class-name {
        background-color: var(--red-ui-palette-header-background)
    }
}

/* Example; you want to alter its dark appearance away (from default) */
@media (prefers-color-scheme: dark) {
    .zwjs-some-class-name {
        background-color: #f4f5f7;
    }
}

```

Then in any `div` (example), that should adhere to this rule...

```auto
<div class="zwjs-some-class-name">
...
</div>

```

in my css - you will see I use `zwjs-XXX` a lot.

you could also adjust my current css rules, to alter its look by wrapping them in both themes (for those rules that need to change based on theme)..

```auto
@media (prefers-color-scheme: light) {
  .zwjs-some-class-i-already-created {
     ... 
   }
}

@media (prefers-color-scheme: dark) {
  .zwjs-some-class-i-already-created {
     ... 
   }
}

```

To keep my light theme..  
you can just create and override for dark (place it at the bottom of the css file)

- css is applied in order of rule in the file, so a rule underneath 1, will overwrite the other above it

```auto
@media (prefers-color-scheme: dark) {
  .zwjs-some-class-i-already-created {
     ... 
   }
}

```