variables are doing nothing inside themes

[Netesfiu]

My Home Assistant version: 0.11.3

My lovelace configuration method (GUI or yaml): gui

What I am doing:

I wanted to update the Catpppuccin theme to work with card-mod variables, but they do nothing. the art noevau theme works fine when I change both the profile and the dashboard theme and I don't know where I'm going wrong with my custom theme.

Minimal steps to reproduce:

# The least amount of code possible to reproduce my error
Farkaslak:
  card-mod-theme: farkaslak

...Catpppuchin theme...

  card-mod-card: |
    ha-card {
      background: transparent;
      background-size: 1000px;
      --ha-card-border-radius: 10px;
      border: red;
      box-shadow: 3px -3px 6px 3px red, 3px 3px 6px 3px blue;
      transition: 3s;
    }
  card-mod-root: |
    ha-app-layout, div#view {
      background: red;
      background-size: 300px;
    }
    app-header, div.header {
      background: red !important;
      border-bottom: blue;
      padding-bottom: 3px;
      transform: none !important;
    }
    app-toolbar, div.toolbar {
      background: none !important;
      border-bottom: red
    }
    app-toolbar div[main-title] {
      font-variant: small-caps;
    }
# End of code

Error messages from the browser console:

---

By putting an X in the boxes ([]) below, I indicate that I:

• [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• [x] Have made sure I am using the latest version of the plugin.

• [x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• [x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[ildar170975]

You should have asked in the dedicated card-mod themes Community first.

Farkaslak:
  card-mod-theme: farkaslak

These are different names.

Farkaslak:
  card-mod-theme: Farkaslak

  my-color: red

  card-mod-card: |
    ha-card {
      --ha-card-background: cyan;
    }
  card-mod-root: |
    .header {
      background-color: red !important;
    }

[ildar170975]

Answers were provided. Not a bug / FR. Wrong use by a user.