How do I add custom colours for all themes?

Configuration Frontend
1

I would like to add custom colours to my HASS front end that are available with all themes. For example, one of my dashboard cards has a line of YAML reading: background-color: rgb(var(--jordserv-orange))

jordserv-orange is currently defined in a theme YAML as --jordserv-orange: 255, 214, 165; This is stored in config > themes > material_rounded > material_rounded.yaml
The problem is that this colour is only available when using the material_rounded theme. If not everyone is using the same theme, the cards show up without any colours.

Is there any way I can add these colour variables to the global HASS config so that it is available across all themes? Can I simply add it to the configuration.yaml file?

2

The simplest way is adding these vars into every theme.
Or start investigating how it can be added via an external js like this:

customElements.whenDefined('home-assistant-main').then(() => {
  const UIelement = customElements.get('home-assistant-main');
  const { html, css } = UIelement.prototype;
  
  const newStyle = css`
    :host {
      --primary-text-color: red;
      --sidebar-background-color: lightblue;
      --app-header-background-color: yellow;
      --ha-card-background: cyan;
      --primary-background-color: green;
    }`;

  const newStyles = [].concat(UIelement.styles, newStyle);
  Object.defineProperty(UIelement, 'styles',        {value: newStyles, configurable: true, enumerable: false});
  Object.defineProperty(UIelement, 'elementStyles', {value: newStyles, configurable: true, enumerable: false});
});
3

Thanks for the reply - that’s some good food for thought. I don’t know if I’m as comfortable with this method as my JS skills aren’t that up to scratch these days. I will keep it in mind - surely there’s a more elegant way?