Card_Mod var() Question

[digital bane]

[view.yaml]
background: rgba(var(--cool-color),0.2)

[theme.yaml]
cool-color: "137, 179, 248"

[paper nova]

thanks @digital bane, here is my full code, when i use your code snipped the background will be removed

type: custom:simple-thermostat
card_mod:
  style: |
    ha-card {
      --st-font-size-toggle-label: 6px;
      --st-spacing: 0px;
      --st-default-spacing: 0px;
      --st-mode-background: var(--ha-card-background);
      margin-left: 12px;
      margin-right: 12px;
      border: none;
    }
    ha-card .mode-item.active.cool { 
      background: rgba(var(--cool-color),0.2);
      color: #2196f3;
    }
    ha-card .mode-item.active.heat { 
      background: rgba(255, 129, 0, 0.2);
      color: #f44336;
    }
    ha-card .mode-item.active.auto { 
      background: rgba(0, 128, 0, 0.2);
      color: #ff9800;
    }
    ha-card .mode-item.active.dry { 
      background: rgba(239, 189, 7, 0.2);
      color: #ff9800;
    }
    ha-card .mode-item.active.off { 
      background: rgba(138, 138, 138, 0.2);
      color: #cc0000;
    }
    ha-card .mode-item:hover { 
      background: #363636;
      color: #9e9e9e;
    }
    ha-card .mode-item {
      --st-spacing: 4px;
      border-radius: 10px;
    }
    ha-card .modes {
      grid-gap: 12px;
    }
entity: climate.schlafzimmer_klimaanlage
header: false
setpoints: false
hide:
  temperature: true
  state: true
layout:
  mode:
    headings: false
    icons: true
    names: false
  step: row
control:
  hvac: true

[digital bane]

Yes, because the variable "cool-color" is either defined in your theme or the simple thermostat integration that you are using. You need to check what is actually the parameter in this variable and amend / redefine it to your needs.

If you do it in card-mod directly, it works:

                ha-card .mode-item.active.cool { 
                  --cool-color: 33, 150, 243;
                  background: rgba(var(--cool-color), 0.2) !important;
                  color: rgb(var(--cool-color)) !important;
                }

... or in case you can't find or can't amend this one, you just create a new variable in your theme and name it "cool-color-rgb: 33, 150, 243" and use this instead.

[paper nova]

it looks like the variables are from the simple-thermostat styles
https://github.com/nervetattoo/simple-thermostat/blob/master/src/styles.css

so the variables are existing and useable, when i understand it right

your example works, but i wanna use the variable code like that, so it looks like it is not possible to use that variable

ha-card .mode-item.active.cool { 
  --cool-color: var(--cool-color);
  background: rgba(var(--cool-color), 0.2) !important;
  color: #2196f3;

[digital bane]

Sorry, I dont get you. You just found the CSS file and confirmed that the variable "cool-color" contains a hex color code. You can't use a hex color code in the rgb(a) functions. At least not directly. You need to convert the hex to rgb values. This can be done by code or by redefining / overriding the variable. ...or, as already mentioned you create you OWN variable cool-color-rgb that contains just the right rgb values that you need.

--cool-color: var(--cool-color); <- doesn't make sense

The CSS you found defines --cool-color: #2b9af9; Just put the rgb values there and you are good.

As mentioned another option would be to convert hex to rgb values in code or maybe even manipulate the hex code string and add the transparency in hex to it. Just google for it how this works. There are many examples.