Custom Theme for 'Global' variables

I would like to create a theme to be used for global variables. Essentially variables like a color to be used for motor running/stopped, valves open/closed, etc. So if I create this theme and name it ‘myTheme’, if I import into each of the entry point CSS (dark, dark-cook, dark-warm, light, light-cool, light-warm) then if I select any one of themes my custom theme will still work? And, will this also cover me from upgrades and restarts?

It should work, but upgrades will wipe this out. You can't modify the supplied themes.

That’s what I’m worried about and trying to clarify. Maybe I read wrong, but I thought entry point CSS files are not affected. Entry point being what I show in the photo…

I’m only modifying the entry point CSS, not the folders. I edited each of the entry point CSS to import my theme, so any selected theme should work.

This is from the README, “Note, changes to light.css and dark.css entry points will not be discarded on startup to provide you with the ability to override certain rules declared and inherited from the corresponding theme directories (see section on overriding or adapting themes).”

Am I reading that correctly?

1 Like

Oooo! I missed that. You are probably fine. Carry on!

1 Like

Geez, I completely missed this in the README (didn’t read far enough). But this works for me.

Overriding or Adapting Themes

Overriding or adapting themes is easy by leveraging the “C” in CSS (Cascading Style Sheet). Simply add your own CSS import pointing to your own custom style sheet containing the rulesets that you want to override or adapt AFTER any existing imports. For example, to override something declared in IA’s owned light theme, add your own import in the light.css entry file like so:

light.css

@import "./light/index.css" 
@import "./custom/overrides.css"

We do not attempt to rewrite this file on startup unless it does not exist.

2 Likes