Best practice for using CSS variables

Developing Nodes
1

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?

2

Fancy seeing you here :wink:

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

Sorry for pinging you here Nick

3

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

4

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?

5

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)

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

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

@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
@media (prefers-color-scheme: dark) {
  .zwjs-some-class-i-already-created {
     ... 
   }
}