Custom card styles in theme

Configuration Frontend
1

Is it possible to add styles of custom cards in a theme file?

As example:

entities:
  - entity: sensor.example
positions:
  icon: 'off'
  indicator: 'off'
  minmax: inside
  title: inside
  value: inside
style: |-
  .contentbar-direction-right {
   flex-direction: column;
  }
    bar-card-value {
    margin: 0px;
    color: black
  }
  bar-card-name {
    color: black
  }


title: Custom CSS Layout
type: 'custom:bar-card'

Instead of putting this to every bar i make, i would like to add this into a theme, and changes by light or dark. example : bar-card-name: color: black, for light and bar-card-name: color: white for dark.

Is this possible?

3

Check card-mod theme topic.

4

i have, but can’t get some things to work:

home_schmitz:

  modes:

#Light
    light:
      background-image: 'center / cover no-repeat url("/local/images/lovelace/backgrounds/background-light.jpg") fixed'
      primary-text-color: "#2c3b4b"
      ha-card-border-color: "#d9d9d9"

      ## Custom values ##
      --my-barcard-font-color: "black"
      --my-customfield-info-border-color: "white"


# Dark
    dark:
      background-image: 'center / cover no-repeat url("/local/images/lovelace/backgrounds/background-night.png") fixed'
      ha-card-border-color: "#454545"

      ## Custom values ##
      --my-barcard-font-color: "white"
      --my-customfield-info-border-color: rgb(217, 217, 217)




## Card Mod ##
  card-mod-theme: home_schmitz
  card-mod-card: |

    ha-card.popup-head {
      --name-font-size: 18px !important;
      background-color: transparant !important;
      box-shadow: none;
      border: 0px;
      --ha-card-border-width: 0px;
    }

    ha-card.popup-content {
      font-size: 14px !important;
      background-color: transparant !important;
      box-shadow: none;
      border: 0px;
      --ha-card-border-width: 0px;
    }
    
    ha-card.popup-custom-field-info {
      box-shadow: none;
      font-size: 14px !important;
      border-color: var(--my-customfield-info-border-color) !important;
    }

    bar-card-contentbar {
      color: var(--my-barcard-font-color);
    }

the
–my-barcard-font-color: “black” Does work.

the
–my-customfield-info-border-color: “white” Does not work > is not defined…
I dont understand why.

5

I suggest to ask this question in cardmod themes thread.