🔹 Card-mod - Add css styles to any lovelace card

tom_l · December 12, 2022, 4:55am

Unfortunately that is far too indiscriminate. It changes things that I don’t want changed, like the settings / devices cards. I’m gong to stick with the easy option of changing only those cards that require it but I can not get this to work:

card_mod:
  class: top-level-card
  style: |
    $: | 
      .card-header {
        font-size: 20px !important;
        font-weight: 300 !important;
        letter-spacing: 0px !important;
        padding-top: 0px !important;
        padding-bottom: 28px !important;
      }

Ildar_Gabdullin · December 12, 2022, 5:02am

Probably this may be sorted out by specifying cards’ types?
What you can do is:

    $: | 
      .card-header {
        font-size: var(....) !important;
        font-weight: var(....) !important;
        letter-spacing: var(....) !important;
        padding-top: var(....) !important;
        padding-bottom: var(....) !important;
      }
...
  ha-card.my_required_type {
   define vars here
  }
  ha-card.my_required_type .card-header {
   ...
  }

tom_l · December 12, 2022, 6:29am

I really appreciate your help Ildar, but I’m getting to the point where I’m tiring of the constant maintenance of customised themes because they are being broken by undocumented frontend changes every update. And the fact that theming isn’t really supported (and never was).

I barely understood what I was doing when I wrote this,

#################################################################
## Day
#################################################################

day:
  ### Main Interface Colors ###
  primary-color: "#93abca"
  light-primary-color: "#5F81B0"
  primary-background-color: "#F0F5FF"
  secondary-background-color: var(--primary-background-color)
  secondary-background-color-alpha: "rgba(220, 225, 235, 0.6)"
  divider-color: 'var(--primary-color)'
  lovelace-background: 'url("/local/background/day.jpg")' #'center / cover no-repeat url("/local/background/day.jpg") fixed'

  ### New stupid state colours ###
  state-default-color: "#395274"
  state-alarm-armed-color: '#F44336' # Red
  state-alarm-arming-color: '#FF9800' # Orange
  state-alarm-pending-color: '#FF9800' # Orange
  state-alarm-triggered-color: '#F44336' # Red
  state-alert-color: '#F44336' # Red
  state-automation-color: "#ebb307"
  state-binary-sensor-color: "#ebb307"
  state-binary-sensor-alerting-color: '#F44336' # Red
  state-calendar-color: '#2196F3' # Blue
  state-camera-color: '#2196F3' # Blue
  state-climate-heat-color: "#FF6262" # red
  state-climate-cool-color: "#039BE5" # blue
  state-climate-fan_only-color: "#0da035" # green
  state-climate-dry-color: "#e0b400" # yellow
  state-climate-auto-color: "ff8100" # orange
  state-cover-color: '#9C27B0' # Purple
  state-fan-color: "#ebb307"
  state-group-color: "#ebb307"
  state-humidifier-color: '#2196F3' # Blue
  state-input-boolean-color: "#ebb307"

  ### Text ###
  primary-text-color: "#395274"
  secondary-text-color: '#5294E2'
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#88A1C4"

  ### Sidebar Menu ###
  sidebar-icon-color: "#395274"
  sidebar-text-color: var(--sidebar-icon-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FF6262"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  sidebar-background-color: var(--primary-background-color)

  ### Climate devices ###
  # state-climate-heat-color: "#FF6262" # red
  # state-climate-cool-color: "#039BE5" # blue
  # state-climate-fan_only-color: "#0da035" # green
  # state-climate-dry-color: "#e0b400" # yellow
  # state-climate-auto-color: "ff8100" # orange

  ### States and Badges ###
  state-icon-color: "#395274"
  state-icon-active-color: "#ebb307"
  state-icon-unavailable-color: var(--disabled-text-color)

  ### Sliders ###
  paper-slider-knob-color: "#FF6262"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)

### Inputs ###
  input-ink-color: 'var(--primary-text-color)'
  input-label-ink-color: 'var(--secondary-text-color)'
  input-disabled-ink-color: 'var(--secondary-text-color)'
  input-fill-color: 'rgba(0, 0, 0, 0)'
  input-dropdown-icon-color: 'var(--primary-text-color)'
  input-idle-line-color: 'var(--secondary-text-color)'
  input-hover-line-color: 'var(--primary-text-color)'
  input-disabled-line-color: 'var(--disabled-text-color)'
  input-outlined-idle-border-color: 'var(--disabled-text-color)'
  input-outlined-hover-border-color: 'var(--disabled-text-color)'
  input-outlined-disabled-border-color: 'var(--disabled-text-color)'
  input-disabled-fill-color: 'rgba(0, 0, 0, 0)'

  ### Labels ###
  label-badge-background-color: none
  label-badge-text-color: "#395274"
  label-badge-red: "#FF8888"

  ### Cards ###
  # ha-card-background: 'url("/local/background/card_bg_Day.png")'
  card-background-color: "rgba(255, 255, 255, 1)" # rgba(57, 103, 158, 0.1)
  paper-listbox-background-color: '#F0F1F3'
  mdc-theme-surface: var(--primary-background-color)
  ha-card-border-radius: 10px
  border-color: 'var(--primary-text-color)'

  ### Toggles ###
  paper-toggle-button-checked-button-color: "#FF6262"
  paper-toggle-button-checked-bar-color: "#FF6262"
  paper-toggle-button-unchecked-button-color: "#395274"
  paper-toggle-button-unchecked-bar-color: "#9CB2CE"
  switch-checked-color: "var(--paper-toggle-button-checked-button-color)"
  switch-unchecked-button-color: "var(--paper-toggle-button-unchecked-button-color)"
  switch-unchecked-color: "var(--paper-toggle-button-unchecked-bar-color)"
  switch-unchecked-track-color: "var(--paper-toggle-button-unchecked-bar-color)"

  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

  restriction-regular-lock-color: '#e45e65'
  restriction-lock-row-margin-left: 78%
  restriction-lock-margin-left: 40%
  restriction-lock-opacity: "0.9"

  mini-media-player-button-color: "rgba(255, 255, 255, 0.0)"
  mini-media-player-accent-color: "var(--paper-slider-knob-color)"
  mini-media-player-overlay-color: "var(--primary-color)"

  mdc-button-outline-color: 'var(--secondary-text-color)' # Alarm panel buttons
  header-height: 48px

## Card Mod Day
###############

  card-mod-theme: day
  card-mod-card: |

    h1.card-header {
      font-size: 20px;
      font-weight: 300;
      letter-spacing: 0px;
    }

    ha-card.top-level-card {
      border: solid 1px var(--primary-text-color);
      background: linear-gradient(rgba(147, 171, 202, 1), rgba(255, 255, 255, 0.6) 56px, rgba(255, 255, 255, 0.6) 100%); #url("/local/background/card_bg_Day.png");
    }

    ha-card.top-level-card h1.card-header {
      padding-top: 0px !important;
      padding-bottom: 28px !important;
    }

    ha-card.media-player {
      border: solid 1px var(--primary-color);
    }

    ha-card.media-player mmp-shortcuts {
      $: |
        mmp-button {
          box-shadow: none;
          background: none;
          border: solid 1px var(--primary-color);
          border-radius: 10px;
        }
    }

    ha-card.inline-card {
      border: solid 1px var(--primary-color);
      box-shadow: none;
      --ha-card-background: rgba(0, 0, 0, 0);
    }

    ha-card.inline-card-no-padding {
      border: solid 1px var(--primary-color);
      box-shadow: none;
      --ha-card-background: rgba(0, 0, 0, 0);
    }
    ha-card.inline-card-no-padding > .card-content {
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
    }

    ha-card.inline-card-no-border {
      box-shadow: none;
      border: none;
      --ha-card-background: rgba(0, 0, 0, 0);
    }

    ha-card.inline-card-red {
      border: solid 1px #FF6262;
      --ha-card-background: linear-gradient(rgba(250,98,98), rgba(255, 255, 255, 0.6) 56px, rgba(255, 255, 255, 0.6) 100%);
    }

    ha-card.inline-card-red h1.card-header {
      padding-top: 0px;
      padding-bottom: 28px;
      # font-size: 20px;
      # font-weight: 300;
      # letter-spacing: 0px;
    }

    ha-card.inline-card-orange {
      border: solid 1px #ff8000;
      --ha-card-background: linear-gradient(rgba(255,128,0), rgba(255, 255, 255, 0.6) 56px, rgba(255, 255, 255, 0.6) 100%);
    }

    ha-card.inline-card-no-padding-or-border {
      box-shadow: none;
      border: none;
      --ha-card-background: rgba(0, 0, 0, 0);
    }
    ha-card.inline-card-no-padding-or-border > .card-content {
      padding-top: 0px;
      padding-right: 8px;
      padding-bottom: 8px;
      padding-left: 0px;
    }

    ha-card.top-level-graph {
      border: solid 1px var(--primary-text-color);
      background: linear-gradient(rgba(147, 171, 202, 1), rgba(255, 255, 255, 0.6) 56px, rgba(255, 255, 255, 0.6) 100%);
    }

    ha-card.top-level-graph .name > span {
      color: var(--primary-text-color);
      font-size: 20px !important;
      font-weight: 300 !important;
      letter-spacing: 0px;
      opacity: 1 !important;
    }

    ha-card.top-level-graph.compass-card .name {
      font-size: 20px !important;
      font-weight: 300 !important;
      letter-spacing: 0px;
    }

    ha-card.top-level-graph.compass-card .icon,
    ha-card.top-level-graph.compass-card .name,
    ha-card.top-level-graph.compass-card .indicator-sensors .abbr {
      color: var(--primary-text-color) !important;
    }

    ha-card.top-level-graph.compass-card .name {
      margin-top: -2px;
    }

    ha-card.top-level-graph.compass-card .value-sensors {
      top: 92px;
      font-weight: 100;
    }

    ha-card.top-level-graph.compass-card .value-sensors .value {
      font-size: 14px;
      line-height: 1.2em;
      font-weight: 400;
    }

    ha-card.top-level-graph.compass-card .value-sensors .measurement {
      font-size: 14px;
      font-weight: 300;
      line-height: 1.6em;
      opacity: 1;
      color: var(--primary-text-color) !important;
    }

    ha-card.top-level-graph.compass-card .indicator-sensors {
      top: 60px;
      font-weight: 300;
    }

    ha-card.top-level-graph.compass-card .indicator-sensors .abbr  {
      font-size: 2.4em;
      line-height: 30px;
      opacity: 1;
      color: var(--primary-text-color) !important;
    }

    ha-card.top-level-chart {
      border: solid 1px var(--primary-text-color);
      background: linear-gradient(rgba(147, 171, 202, 1), rgba(255, 255, 255, 0.6) 56px, rgba(255, 255, 255, 0.6) 100%);
      padding-top: 8px;
    }

    ha-card.top-level-chart div#header__title {
      font-size: 20px !important;
      font-weight: 300 !important;
      letter-spacing: 0px;
      color: var(--primary-text-color);
      padding-bottom: 32px;
    }

    ha-card.top-level-chart span#state {
      font-size: 2.4em !important;
      font-weight: 300 !important;
    }

    ha-card.top-level-chart span#uom {
      font-size: 1.4em !important;
      font-weight: 400 !important;
      opacity: .6 !important;
    }

    ha-card.top-level-chart div#state__name {
      font-size: 14px !important;
      font-weight: 500 !important;
      opacity: .9 !important;
    }


#################################################################
## Night
#################################################################

night:
  # Main colors
  primary-color: '#39679e'                                                        # Header
  accent-color: '#E45E65'                                                         # Accent color
  dark-primary-color: 'var(--accent-color)'                                       # Hyperlinks
  light-primary-color: 'var(--accent-color)'                                      # Horizontal line in about
  lovelace-background: 'url("/local/background/night.jpg")' #'center / cover no-repeat url("/local/background/night.jpg") fixed'

  ### New stupid state colours ###
  state-default-color: '#FFFFFF'
  state-alarm-armed-color: '#F44336' # Red
  state-alarm-arming-color: '#FF9800' # Orange
  state-alarm-pending-color: '#FF9800' # Orange
  state-alarm-triggered-color: '#F44336' # Red
  state-alert-color: '#F44336' # Red
  state-automation-color: '#F9C536'
  state-binary-sensor-color: '#F9C536'
  state-binary-sensor-alerting-color: '#F44336' # Red
  state-calendar-color: '#2196F3' # Blue
  state-camera-color: '#2196F3' # Blue
  # state-climate-heat-color: "#FF6262" # red
  # state-climate-cool-color: "#039BE5" # blue
  # state-climate-fan_only-color: "#0da035" # green
  # state-climate-dry-color: "#e0b400" # yellow
  # state-climate-auto-color: "ff8100" # orange
  state-cover-color: '#9C27B0' # Purple
  state-fan-color: '#F9C536'
  state-group-color: '#F9C536'
  state-humidifier-color: '#2196F3' # Blue
  state-input-boolean-color: '#F9C536'

  # Text colors
  primary-text-color: '#FFFFFF'                                                   # Primary text colour, here is referencing dark-primary-color
  text-primary-color: 'var(--primary-text-color)'                                 # Primary text colour
  secondary-text-color: '#5294E2'                                                 # For secondary titles in more info boxes etc.
  disabled-text-color: '#7F848E'                                                  # Disabled text colour
  label-badge-border-color: 'green'                                               # Label badge border, just a reference value

  # Background colors
  primary-background-color: '#1b3163' # '#383C45'                                             # Settings background
  secondary-background-color: '#656e82'                                           # Main card UI background
  secondary-background-color-alpha: "rgba(101, 110, 130, 0.2)"
  divider-color: 'var(--primary-color)'                                             # Divider
  sidebar-background-color: var(--primary-background-color)

  # Table rows
  table-row-background-color: '#353840'                                           # Table row
  table-row-alternative-background-color: '#3E424B'                               # Table row alternative

  # Inputs
  input-ink-color: 'var(--primary-text-color)'                                # Navigation menu selection hoover
  input-label-ink-color: 'var(--secondary-text-color)'
  input-disabled-ink-color: 'var(--secondary-text-color)'
  input-fill-color: rgba(0, 0, 0, 0)                                       # Navigation menu background (Input Selects)
  input-dropdown-icon-color: 'var(--primary-text-color)'
  input-idle-line-color: 'var(--secondary-text-color)'
  input-hover-line-color: 'var(--primary-text-color)'
  input-disabled-line-color: 'var(--disabled-text-color)'
  input-outlined-idle-border-color: 'var(--disabled-text-color)'
  input-outlined-hover-border-color: 'var(--disabled-text-color)'
  input-outlined-disabled-border-color: 'var(--disabled-text-color)'
  input-disabled-fill-color: 'rgba(0, 0, 0, 0)'

  # Cards
  paper-card-header-color: 'var(--accent-color)'                                  # Card header text colour
  card-background-color: '#1E1E1E' # rgba(57, 103, 158, 0.2)                      # Card background colour, also pop-up box header
  mdc-theme-surface: '#041D42'                                                    # Pop-up background colour
  paper-item-icon-color: 'var(--primary-text-color)'                              # Icon color
  paper-item-icon-active-color: '#F9C536'                                         # Icon color active
  paper-item-icon_-_color: 'green'
  paper-item-selected_-_background-color: 'var(--secondary-text-color)'         # List box item select
  paper-tabs-selection-bar-color: 'green'
  ha-card-border-radius: 10px
  border-color: 'var(--secondary-text-color)'
  # ha-card-border: solid 1px var(--border-color)

  # Labels
  label-badge-red: 'var(--accent-color)'                                          # References the brand colour label badge border
  label-badge-text-color: 'var(--primary-text-color)'                             # Now same as label badge border but that's a matter of taste
  label-badge-background-color: none                                         # Same, but can also be set to transparent here

  # Switches =
  paper-toggle-button-checked-button-color: 'var(--accent-color)'
  paper-toggle-button-checked-bar-color: 'var(--accent-color)'
  paper-toggle-button-checked-ink-color: 'var(--accent-color)'
  paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
  paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
  paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'
  switch-checked-color: "var(--paper-toggle-button-checked-button-color)"
  switch-unchecked-button-color: "var(--paper-toggle-button-unchecked-button-color)"
  switch-unchecked-color: "var(--paper-toggle-button-unchecked-bar-color)"
  switch-unchecked-track-color: "var(--paper-toggle-button-unchecked-bar-color)"

  # Sliders
  paper-slider-knob-color: 'var(--accent-color)'
  paper-slider-knob-start-color: 'var(--accent-color)'
  paper-slider-pin-color: 'var(--accent-color)'
  paper-slider-active-color: 'var(--accent-color)'
  paper-slider-container-color: 'var(--secondary-background-color)'
  paper-slider-secondary-color: 'var(--secondary-background-color)'
  paper-slider-disabled-active-color: 'var(--disabled-text-color)'
  paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'

  ### Climate devices ###
  state-climate-heat-color: "#FF6262" # red
  state-climate-cool-color: "#039BE5" # blue
  state-climate-fan_only-color: "#0da035" # green
  state-climate-dry-color: "#e0b400" # yellow
  state-climate-auto-color: "#ff8100" # orange

  # Google colors
  google-red-500: '#E45E65'
  google-green-500: '#39E949'

  sidebar-selected-icon-color: 'var(--secondary-text-color)'
  sidebar-selected-text-color: 'var(--secondary-text-color)'
  markdown-code-background-color: 'var(--primary-color)'

  restriction-regular-lock-color: '#e45e65'
  restriction-lock-row-margin-left: 78%
  restriction-lock-margin-left: 40%
  restriction-lock-opacity: "0.9"

  sc-background-filter: none                      # sun card bg

  mini-media-player-button-color: "rgba(255, 255, 255, 0.0)"
  mini-media-player-accent-color: "var(--paper-slider-knob-color)"
  mini-media-player-overlay-color: "var(--secondary-background-color)"

  mdc-button-outline-color: 'var(--secondary-text-color)' # Alarm panel buttons
  header-height: 48px

# Code editor
  codemirror-property: "#bf762a" # variables
  codemirror-string: "#d1b232" # string
  codemirror-keyword: "#bf3434"
  codemirror-number: "#2e90bf"
  codemirror-comment: "#32b857"

## Card Mod Night
#################

  card-mod-theme: night
  card-mod-card: |

    h1.card-header {
      font-size: 20px;
      font-weight: 300;
      letter-spacing: 0px;
    }

    ha-card.media-player {
      border: solid 1px var(--primary-color);
    }

    ha-card.media-player mmp-shortcuts {
      $: |
        mmp-button {
          box-shadow: none;
          background: none;
          border: solid 1px var(--primary-color);
          border-radius: 10px;
        }
    }

    ha-card.inline-card {
      border: solid 1px var(--primary-color);
      box-shadow: none;
      --ha-card-background: rgba(0, 0, 0, 0);
    }

    ha-card.inline-card-no-padding {
      border: solid 1px var(--primary-color);
      box-shadow: none;
      --ha-card-background: rgba(0, 0, 0, 0);
    }
    ha-card.inline-card-no-padding > .card-content {
      padding-top: 0px;
      padding-right: 8px;
      padding-bottom: 8px;
      padding-left: 0px;
    }

    ha-card.inline-card-red {
      border: solid 1px #FF6262;
      --ha-card-background: linear-gradient(rgba(250,98,98), rgba(0, 0, 0, 0.6) 56px, rgba(0, 0, 0, 0.6) 100%);
    }

    ha-card.inline-card-red h1.card-header {
      padding-top: 0px;
      padding-bottom: 28px;
      font-size: 20px;
      font-weight: 300;
      letter-spacing: 0px;
    }

    ha-card.inline-card-orange {
      border: solid 1px #ff8000;
      --ha-card-background: linear-gradient(rgba(255,128,0), rgba(0, 0, 0, 0.6) 56px, rgba(0, 0, 0, 0.6) 100%);
    }

    ha-card.inline-card-no-border {
      box-shadow: none;
      border: none;
      --ha-card-background: rgba(0, 0, 0, 0);
    }
  
    ha-card.inline-card-no-padding-or-border {
      box-shadow: none;
      border: none;
      --ha-card-background: rgba(0, 0, 0, 0);
    }
    ha-card.inline-card-no-padding-or-border > .card-content {
      padding-top: 0px;
      padding-right: 8px;
      padding-bottom: 8px;
      padding-left: 0px;
    }

    ha-card.top-level-card {
      border: solid 1px var(--secondary-text-color);
      background: linear-gradient(rgba(57, 103, 158, 1), rgba(0, 0, 0, 0.6) 56px, rgba(0, 0, 0, 0.6) 100%); #url("/local/background/card_bg_Night.png");
    }

    ha-card.top-level-card h1.card-header {
      padding-top: 0px !important;
      padding-bottom: 28px !important;
    }

    ha-card.top-level-graph {
      border: solid 1px var(--secondary-text-color);
      background: linear-gradient(rgba(57, 103, 158, 1), rgba(0, 0, 0, 0.6) 56px, rgba(0, 0, 0, 0.6) 100%);
    }

    ha-card.top-level-graph .name > span {
      color: var(--primary-text-color);
      font-size: 20px !important;
      font-weight: 300 !important;
      letter-spacing: 0px;
      opacity: 1 !important;
    }

    ha-card.top-level-graph.compass-card .name {
      font-size: 20px !important;
      font-weight: 300 !important;
      letter-spacing: 0px;
    }

    ha-card.top-level-graph.compass-card .icon,
    ha-card.top-level-graph.compass-card .name,
    ha-card.top-level-graph.compass-card .indicator-sensors .abbr {
      color: var(--primary-text-color) !important;
    }

    ha-card.top-level-graph.compass-card .name {
      margin-top: -2px;
    }

    ha-card.top-level-graph.compass-card .value-sensors {
      top: 92px;
      font-weight: 100;
    }

    ha-card.top-level-graph.compass-card .value-sensors .value {
      font-size: 14px;
      line-height: 1.2em;
      font-weight: 400;
    }

    ha-card.top-level-graph.compass-card .value-sensors .measurement {
      font-size: 14px;
      font-weight: 300;
      line-height: 1.6em;
      opacity: 1;
      color: var(--primary-text-color) !important;
    }

    ha-card.top-level-graph.compass-card .indicator-sensors {
      top: 60px;
      font-weight: 300;
    }

    ha-card.top-level-graph.compass-card .indicator-sensors .abbr {
      font-size: 2.4em;
      line-height: 30px;
      opacity: 1;
      color: var(--primary-text-color) !important;
    }

    ha-card.top-level-chart {
      border: solid 1px var(--secondary-text-color);
      background: linear-gradient(rgba(57, 103, 158, 1), rgba(0, 0, 0, 0.6) 56px, rgba(0, 0, 0, 0.6) 100%);
      padding-top: 8px;
    }

    ha-card.top-level-chart div#header__title {
      font-size: 20px !important;
      font-weight: 300 !important;
      letter-spacing: 0px;
      color: var(--primary-text-color);
      padding-bottom: 32px;
    }

    ha-card.top-level-chart span#state {
      font-size: 2.4em !important;
      font-weight: 300 !important;
    }

    ha-card.top-level-chart span#uom {
      font-size: 1.4em !important;
      font-weight: 400 !important;
      opacity: .6 !important;
    }

    ha-card.top-level-chart div#state__name {
      font-size: 14px !important;
      font-weight: 500 !important;
      opacity: .9 !important;
    }

And re-writing it all to incorporate the changes you have suggested is beyond my patience and understanding at the moment.

So, for now I’m just going to apply this extra style to the cards that need it:

card_mod:
  style: 
    $: | 
      .card-header {
        font-size: 20px !important;
        font-weight: 300 !important;
        letter-spacing: 0px !important;
        padding-top: 0px !important;
        padding-bottom: 28px !important;
      }

Again, thank you very much for assisting.

Ildar_Gabdullin · December 12, 2022, 7:23am

Good, sometimes the simpler the better…
You did a huge piece of work, btw.
Maintaining this in an unpredictable HA development is a difficult task.

Marin · December 12, 2022, 8:38pm

Hi Ildar,
finally I have what I want with plenty of head scratching.
This is the code I used. Feel free to advise if there is room for improvement.

type: entities
title: test
entities:
  - entity: switch.dnevni_roletna_mala_otvaranje
    name: otvaranje
    tap_action:
      action: none
    card_mod:
      style:
        hui-generic-entity-row:
          ha-entity-toggle:
            $:
              ha-switch:
                $: >
                  {% if is_state('switch.dnevni_roletna_mala_zatvaranje','on')
                  %}
                   .mdc-switch .mdc-switch__thumb input {
                     pointer-events: none;
                  {% endif %}
                   }
                .: |
                  ha-switch {
                    --switch-unchecked-button-color: var(--disabled-text-color);
                    --switch-checked-button-color: var(--disabled-text-color);
                  }
        .: |
          :host {
            {% if is_state('switch.dnevni_roletna_mala_zatvaranje','on') %}
              color: var(--disabled-text-color);
              --paper-item-icon-color: var(--disabled-text-color);
              pointer-events: none;
            {% endif %}
          }
  - entity: switch.dnevni_roletna_mala_zatvaranje
    name: zatvaranje
    tap_action:
      action: none
    card_mod:
      style:
        hui-generic-entity-row:
          ha-entity-toggle:
            $:
              ha-switch:
                $: |
                  {% if is_state('switch.dnevni_roletna_mala_otvaranje','on') %}
                   .mdc-switch .mdc-switch__thumb input {
                     pointer-events: none;
                  {% endif %}
                   }
                .: |
                  ha-switch {
                    --switch-unchecked-button-color: var(--disabled-text-color);
                    --switch-checked-button-color: var(--disabled-text-color);
                  }
        .: |
          :host {
            {% if is_state('switch.dnevni_roletna_mala_otvaranje','on') %}
              color: var(--disabled-text-color);
              --paper-item-icon-color: var(--disabled-text-color);
              pointer-events: none;
            {% endif %}
          }

Ildar_Gabdullin · December 12, 2022, 8:47pm

This is OK.

Marin:

              ha-switch:
                $: |
                  {% if ... %}
                   .mdc-switch .mdc-switch__thumb input {
                     ....
                  {% endif %}
                   }

Well, it may be working (never tested), I do recommend using this (at least more consistent):

              ha-switch:
                $: |
                   .mdc-switch .mdc-switch__thumb input {
                    {% if ... %}
                     ....
                    {% endif %}
                   }

Also, this must be a style which work with same conditions as “pointer-events: none”:

Marin:

                  ha-switch {
                    --switch-unchecked-button-color: var(--disabled-text-color);
                    --switch-checked-button-color: var(--disabled-text-color);
                  }

but here you have not specified these conditions.

arganto · December 12, 2022, 8:51pm

I still recommend to put the if endif around the whole styling if there is no else.

Otherwise you have still not needed text in if-not case in you html, as cardmod will still ingest all this empty definitions.

Ildar_Gabdullin · December 12, 2022, 8:54pm

Could you give an example? Gonna think about it.

arganto · December 12, 2022, 9:04pm

Take your own

Ildar_Gabdullin:

                $: |
                   .mdc-switch .mdc-switch__thumb input {
                    {% if ... %}
                     ....
                    {% endif %}
                   }

In false case, you have

.mdc-switch .mdc-switch__thumb input {}

In you html in card_mod section (or even multiple depending on the kind of declaration, you know)

With if else around the section you will have

In your html. Of course, both will work. And it should not have a difference, but every byte counts.

Ildar_Gabdullin · December 12, 2022, 9:08pm

I see your point.
Your idea is “do not create a card-mod element at all if conditions are not met”.
Hmm, some part of code after the “style” keyword may be a string, may be a dictionary.
Probably there are could be some pitfalls there… Need to check.

arganto · December 12, 2022, 9:12pm

Yes, to avoid even the empty paths would be the best. But yes, That would be to complex. And not possible in most cases in the way card mod is handling nesting shadow roots.

Here I really talk about only avoiding ingesting empty declarations. So card_mod element will still be there, but empty instead of contain text without a declaration.

                $: |
                    {% if ... %}
                     .mdc-switch .mdc-switch__thumb input {
                       ....
                     }
                    {% endif %}

Ildar_Gabdullin · December 12, 2022, 9:15pm

Yes, there is a room for thinking here. I will think about it. Probably will post some examples, we will discuss then again!

CChris · December 14, 2022, 9:54am

Hi all,

sine the coloring topic came up, I’ve started with thinking, how and where I could “improve” my dashboard…
Styling was until now not one of my major topics, because I am still in the progress to implement technical stuff and automations - the goal was to have a “nearly” finished system by the end of the year…

OK - and, some styling should now be part of this - after most technical stuff has been done and is working so far.

So, I just started with using Card Mod (which I haven’t until now)… and therefore, I still need some advice, tipps and tricks how to accomplish some of my ideas…

I do have a “DoNotDisturb” Button on my Dashboard.
Right now, the button does apply the default active color from my theme or the yellow state color from homeAssistants default theme.

For this button, I would like to create an exception. The DND is for an Echo device, and if they are set to DND, they show a violette color on the LEDs.
Therefore, I would also like to use the violette that has been assigned to the Covers for this button, when active…

grafik grafik

But at the moment, I don’t really have any idea how to start, since everything that I’ve found so far is still using the old “paper-item-color” variables and the newer codes in the recent topics did somehow not work in my tests…

here’s my current yaml… I’ve tried different variables, and also I’ve tried to use the hex color instead ov var(–rgb-purple-color);

type: horizontal-stack
cards:
    show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: switch.echo_kuche_do_not_disturb_switch
    name: Bitte nicht stören
    card_mod:
      style: |
        :host {
           --state-default-color: var(--rgb-purple-color);
           --switch-checked-button-color: var(--rgb-purple-color);
           --switch-checked-color: var(--rgb-purple-color);
           --rgb-state-default-color: var(--rgb-purple-color);
         }
    show_state: true
    icon_height: 40px

mtrista · December 15, 2022, 11:27am

Did you figure this out? I’m also trying to set a margin on the .column since I don’t like Home Assistant squishing all my columns together and looking ugly by default.

arganto · December 15, 2022, 1:44pm

I’m currently not on 2022.12 anymore, because of the known reasons. But in general, you don’t have to set the vars in :host but to set the color of the item directly. Yes, you have to dig 1-x shadow roots deeper, but there you can do whatever you want. Have a look in code inspector, where the color to the icon is set and change it there.

CChris · December 15, 2022, 1:50pm

thanks, I will give it a try later

Got it
with the recent changes from the December-Update it needs to be the RGB variable

show_name: true
show_icon: true
type: button
tap_action:
  action: toggle
entity: switch.echo_kuche_do_not_disturb_switch
card_mod:
  style: |
    :host {
     {% if is_state('switch.echo_kuche_do_not_disturb_switch', 'on') %}
       --rgb-state-switch-color: 103,58,183;
     {% endif %}
    }
name: Do Not Disturb
show_state: true

grafik
Now the Button has the same color as the LED indicator of Alexa when the device is in DND mode

CChris · December 16, 2022, 9:19am

So, again I’m getting stuck with some card-mod changes … :-/

This is my Card yaml…
It does contain two binary sensors - one has the device type “lock” - the other has the device type “plug”

The “lock” will be shown as active, when unlocked - the other will be shown as active, when plugged in.
Since this card is for getting the Status of my ev-charging, I want to be both: “red” when unplugged + unlocked → green when connected & locked.

show_name: true
show_icon: true
show_state: true
type: glance
entities:
  - entity: binary_sensor.charging_cable_connected
    name: Ladekabel
    card-mod:
      style: |
        :host {
          {% if is_state("binary_sensor.charging_cable_connected", "off") %}
            --state-icon-color: #F44336;
          {% elif_state("binary_sensor.charging_cable_connected", "on") %}
            --rgb-state-binary-sensor-color: 76,175,80;
          {% endif %};
  - entity: binary_sensor.charging_cable_locked
    name: Ladekabel
    card-mod:
      style: |
        :host {
          {% if is_state("binary_sensor.charging_cable_locked", "off") -%}
            --rgb-state-binary-sensor-color: 244,67,54;
          {% elif_state("binary_sensor.charging_cable_locked", "on") -%}
            --state-icon-color: #66a61e;
          {% endif %};
columns: 2
state_color: true

grafik

I am pretty sure, that the :host is wrong here in this context…
So, this is the HTML code from the page… what do I need to use to get the correct icons colored ?

I’ve checked the vars: --state-icon-color should be the default color when the state / sensor is OFF
and --rgb-state-binary-sensor-color is the color for the active state…

I GUESS:
That maybe the IF ELSE does conflict each other?

arganto · December 16, 2022, 1:31pm

Start with 1 card_mod and 2. closing of the {} and then perhaps it is working or at least you are 2 steps nearer.

CChris · December 16, 2022, 1:58pm

thanks
You’re right… I had some ‘basic’ issues - which I probably have overseen after x changes…
Do you know, if the --icon-state-color (when the sensor is OFF) can also be set?
Right now, I’ve just managed to change the ON color

  - entity: binary_sensor._charging_cable_locked
    name: Ladekabel
    card_mod:
      style: |
        :host {
          {% if is_state('binary_sensor.charging_cable_locked', 'on') %}
            --rgb-state-binary-sensor-color: 244,67,54;
          {% else %}
            --state-icon-color: #66a61e;;
          {% endif %}
        }

grafik

I would also like to use the red color on the other sensor while it is OFF…
When the cable is connected, this becomes active / on - and the currently red (active / on) will be off:

grafik
grafik

Ildar_Gabdullin · December 16, 2022, 1:59pm

I strongly suggest to avoid using variables in card-mod, apply styles to css properties directly (if possible).