Card_mod styling disappearing after ugrade to 3.4.4 #431

storebatfar · 2025-01-07T07:35:00Z

My Home Assistant version: 2025.1.0

My lovelace configuration method (GUI or yaml):
Both

Looking at my dashboards all looks fine. When I edit a card that has card_mod styling and look at the yaml code, the card_mod styling has disappearing / is deleted from the code.

Downgraded to 3.4.3, but the problem is still there. All was working before the upgrade to 3.4.4.

Solution is to delete card_mod completely and then re-install version 3.4.3.

evanwyatt · 2025-01-07T08:30:16Z

I've deleted my previous comment thinking it was only a chromium problem, clearing everything shows the problem on chromium as well

Mariusthvdb · 2025-01-07T10:40:18Z

well, without any yaml, no-one is going to be able to help you out

storebatfar · 2025-01-07T10:46:50Z

well, without any yaml, no-one is going to be able to help you out

I'm not really looking for help, as I can just keep running version 3.4.3.
However, I think it's important to share when something is not working in updated version.

As an example the following card_mod yaml disappears when I edit my dashboard.

card_mod: style: | ha-card { --title-font-size: 50px; }

The issue happens for all card_mod sections for my entire dashboard.

scoutcow · 2025-01-07T11:06:14Z

I had the same. Both when opening in Chrome, but also in the Android app. (I cleared cache, deleted site data).
While still in version 3.4.4 (with styling disappeared) I installed it as a frontend module by adding it to my configuration.yaml:

frontend:
extra_module_url:
- /hacsfiles/lovelace-card-mod/card-mod.js

That also didn't change anything, so I rolled back to 3.4.3, which fixed the problem.
After that I upgraded to 3.4.4 again and it al kept working somehow, so now all is working fine for me in version 3.4.4

voc0der · 2025-01-07T11:25:18Z

Beware of your cache in this instance. For me, I was using this theme: https://github.com/flejz/hass-cyberpunk-2077-theme which finally broke with this update since it does some cyberdeck styling with card-mod here.

I don't think that theme will be getting updated sadly, but my experience is that 3.4.4 doesn't work the same way, but the cache sometimes tricks you for a second. There is no way that my problem is the author of this repo's, lol, so I won't suggest that. But I will be using 3.4.3 till it dies, cuz that theme is sick :/

Kourai · 2025-01-07T12:05:03Z

Hello ! I have the same problem !

Yesterday : using 3.4.3 , my dashboard were fine, I upgraded to 3.4.4, and lost all my color customization made with card_mod. (tested on Firefox)

However, a simple rollback to 3.4.3 was enough for me to solve the problem!

dMopp · 2025-01-07T12:44:00Z

Downgraded to 3.4.3 and Button Colors are back, too.

tomlut · 2025-01-07T12:46:05Z

Yep v3.4.4 broke all my card-mod themes. Went back to v3.4.3 and all is well again.

(themes.yaml)

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

# '#800000' # maroon
# '#b200ff' # purple
# '#e45e65' # red
# '#f1aeb2'  # light red (pink)
# '#ff8000' # orange
# '#e0b400' # yellow
# '#0da035' # green
# '#86cf9a' # light green
# '#039be5' # blue
# '#1b3163' # dark blue
# '#041d42' # navy blue
# '#395274' # dark blue-grey
# '#39679e' # dark grey-blue
# '#5f81b0' # medium blue-grey
# '#88a1c4' # medium grey-blue
# '#5294E2' # soft blue-grey
# '#93abca' # light blue-grey
# 'rgba(220, 225, 235, 0.6)' # semi-transparent light blue-grey
# '#f0f5ff' # ultra-light blue-grey
# '#ffffff' # white
# '#f0f1f3' # light grey
# '#7f848e' # medium grey
# '#656e82' # dark grey
# '#353840' # darker grey
# '#1E1E1E' # super-dark grey

day:

  ### Main Interface Colors ###
  primary-color: '#93abca' # light blue-grey
  light-primary-color: '#5f81b0' # medium blue-grey
  primary-background-color: '#f0f5ff' # ultra-light blue-grey
  secondary-background-color: var(--primary-background-color)
  secondary-background-color-alpha: 'rgba(220, 225, 235, 0.6)' # semi-transparent light blue-grey
  divider-color: 'var(--primary-color)'
  lovelace-background: 'url("/local/background/day.jpg")' #'center / cover no-repeat url("/local/background/day.jpg") fixed'

  ### State colours ###
  state-default-color: '#395274' # dark blue-grey
  state-alarm_control_panel-armed_away-color: '#e45e65' # red
  state-alarm_control_panel-armed_night-color: '#039be5' # blue
  state-alarm_control_panel-armed_custom_bypass-color: '#e0b400' # yellow
  state-alarm_control_panel-arming-color: '#ff8000' # orange
  state-alarm_control_panel-disarmed-color: '#0da035' # green
  state-alarm_control_panel-disarming-color: '#ff8000' # orange
  state-alarm_control_panel-pending-color: '#ff8000' # orange
  state-alarm_control_panel-triggered-color: '#e45e65' # red
  state-alert-off-color: '#0da035' # green
  state-alert-on-color: '#e45e65' # red
  state-automation-color: '#e0b400' # yellow
  state-binary_sensor-on-color: '#e0b400' # yellow
  state-binary_sensor-off-color: '#395274' # dark blue-grey
  state-calendar-color: '#039be5' # blue
  state-camera-color: '#039be5' # blue
  state-climate-auto-color: '#ff8000' # orange
  state-climate-cool-color: '#039be5' # blue
  state-climate-dry-color: '#e0b400' # yellow
  state-climate-fan_only-color: '#0da035' # green
  state-climate-heat-color: '#e45e65' # red
  state-climate-heat-cool-color: '#b200ff' # purple
  state-climate-idle-color: '#395274' # dark blue-grey
  state-cover-color: '#b200ff' # purple
  state-device_tracker-active-color: '#039be5' # blue
  state-device_tracker-home-color: '#e0b400' # yellow
  state-device_tracker-inactive-color: '#395274' # dark blue-grey
  state-fan-on-color: '#e0b400' # yellow
  state-group-color: '#e0b400' # yellow
  state-humidifier-color: '#039be5' # blue
  state-input-boolean-color: '#e0b400' # yellow
  state-light-active-color: '#e0b400' # yellow
  state-lock-jammed-color: '#e45e65' # red
  state-lock-locked-color: '#395274' # dark blue-grey
  state-lock-pending-color: '#ff8000' # orange
  state-lock-unlocked-color: '#e0b400' # yellow
  state-media_player-active-color: '#e0b400' # yellow
  person-home-color: '#e0b400' # yellow
  state-person-not-home-color: '#395274' # dark blue-grey
  state-person-zone-color: '#039be5' # blue
  state-remote-color: '#e0b400' # yellow
  state-script-active-color: '#e0b400' # yellow
  state-script-inactive-color: '#395274' # dark blue-grey
  state-sensor-battery-high-color: '#0da035' # green
  state-sensor-battery-low-color: '#e45e65' # red
  state-sensor-battery-medium-color: '#ff8000' # orange
  state-sensor-battery-unknown-color: '#8A8A8A' # Off (Mid-Grey)
  state-siren-color: '#e45e65' # red
  state-sun-above_horizon-color: '#e0b400' # yellow
  state-sun-below_horizon-color: '#395274' # dark blue-grey
  state-switch-on-color: '#e0b400' # yellow
  state-switch-off-color: '#395274' # dark blue-grey
  state-timer-color: '#e0b400' # yellow
  state-update-active-color: '#e45e65' # red
  state-update-installing-color: '#ff8000' # orange
  state-vacuum-active-color: '#e0b400' # yellow

  ### Energy Graph ###
  energy-grid-consumption-color-0: '#e45e65'
  energy-grid-consumption-color-1: '#039bef'
  energy-grid-consumption-color-2: '#0da035'
# energy-grid-return-color-0
# energy-battery-in-color-0
# energy-battery-out-color-0
# energy-solar-color-0
# energy-gas-color-0
# energy-water-color-0


  ### Text ###
  primary-text-color: '#395274' # dark blue-grey
  secondary-text-color: '#5294E2' # soft blue-grey
  text-primary-color: '#ffffff' # white
  disabled-text-color: '#88a1c4' # medium grey-blue

  ### Sidebar Menu ###
  sidebar-icon-color: '#395274' # dark blue-grey
  sidebar-text-color: var(--sidebar-icon-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: '#e45e65' # red
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  sidebar-background-color: var(--primary-background-color)

  ### States and Badges ###
  state-icon-color: '#395274' # dark blue-grey
  state-icon-active-color: '#e0b400' # yellow
  state-icon-unavailable-color: var(--disabled-text-color)

  ### Sliders ###
  md-slider-active-track-color: var(--light-primary-color)
  md-slider-handle-color: '#e45e65' # red

### 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)' # transpatent
  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)' # transparent

  ### Labels ###
  label-badge-background-color: none
  label-badge-text-color: '#395274' # dark blue-grey
  label-badge-red: '#e45e65' # red

  ### Cards ###
  # ha-card-background: 'url("/local/background/card_bg_Day.png")'
  card-background-color: '#ffffff' # white
  paper-listbox-background-color: '#f0f1f3' # light grey
  mdc-theme-surface: var(--primary-background-color)
  ha-card-border-radius: 10px
  border-color: 'var(--primary-text-color)'
  clear-background-color: var(--card-background-color)
  ha-view-sections-column-gap: 8px
  ha-view-sections-row-gap: 8px

  ### Toggles ###
  paper-toggle-button-checked-button-color: '#e45e65' # red
  paper-toggle-button-checked-bar-color: '#e45e65' # red
  paper-toggle-button-unchecked-button-color: '#395274' # dark blue-grey
  paper-toggle-button-unchecked-bar-color: '#93abca' # light blue-grey
  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' # red
  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(--md-slider-handle-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%); 
    }

    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
#################################################################

# '#800000' # maroon
# '#b200ff' # purple
# '#e45e65' # red
# '#f1aeb2'  # light red (pink)
# '#ff8000' # orange
# '#e0b400' # yellow
# '#0da035' # green
# '#86cf9a' # light green
# '#039be5' # blue
# '#1b3163' # dark blue
# '#041d42' # navy blue
# '#395274' # dark blue-grey
# '#39679e' # dark grey-blue
# '#5f81b0' # medium blue-grey
# '#88a1c4' # medium grey-blue
# '#5294E2' # soft blue-grey
# '#93abca' # light blue-grey
# 'rgba(220, 225, 235, 0.6)' # semi-transparent light blue-grey
# '#f0f5ff' # ultra-light blue-grey
# '#ffffff' # white
# '#f0f1f3' # light grey
# '#7f848e' # medium grey
# '#656e82' # dark grey
# '#353840' # darker grey
# '#1E1E1E' # super-dark grey

night:

  # Main colors
  primary-color: '#39679e' # dark grey-blue
  accent-color: '#e45e65' # red
  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'

  ### State colours ###
  state-default-color: '#039be5' # blue 'var(--primary-text-color)'
  state-alarm_control_panel-armed_away-color: '#e45e65' # red
  state-alarm_control_panel-armed_night-color: '#039be5' # blue
  state-alarm_control_panel-armed_custom_bypass-color: '#e0b400' # yellow
  state-alarm_control_panel-arming-color: '#ff8000' # orange
  state-alarm_control_panel-disarmed-color: '#0da035' # green
  state-alarm_control_panel-disarming-color: '#ff8000' # orange
  state-alarm_control_panel-pending-color: '#ff8000' # orange
  state-alarm_control_panel-triggered-color: '#e45e65' # red
  state-alert-off-color: '#0da035' # green
  state-alert-on-color: '#e45e65' # red
  state-automation-color: '#e0b400' # yellow
  state-binary_sensor-on-color: '#e0b400' # yellow
  state-binary_sensor-off-color: '#039be5' #'var(--primary-text-color)'
  state-button-active-color: '#e0b400' # yellow
  state-button-inactive-color: '#ffffff' #'var(--primary-text-color)'
  state-calendar-color: '#039be5' # blue
  state-camera-color: '#039be5' # blue
  state-climate-auto-color: '#ff8000' # orange
  state-climate-cool-color: '#039be5' # blue
  state-climate-dry-color: '#e0b400' # yellow
  state-climate-fan_only-color: '#0da035' # green
  state-climate-heat-color: '#e45e65' # red
  state-climate-heat-cool-color: '#b200ff' # purple
  state-climate-idle-color: '#395274' # dark blue-grey
  state-cover-color: '#b200ff' # purple
  state-device_tracker-active-color: '#039be5' # blue
  state-device_tracker-home-color: '#e0b400' # yellow
  state-device_tracker-inactive-color: '#039be5' #'var(--primary-text-color)'
  state-fan-on-color: '#e0b400' # yellow
  state-fan-off-color: '#039be5' # blue
  state-group-color: '#e0b400' # yellow
  state-humidifier-color: '#039be5' # blue
  state-input-boolean-color: '#e0b400' # yellow
  state-light-active-color: '#e0b400' # yellow
  state-light-off-color: '#039be5' # blue
  state-lock-jammed-color: '#e45e65' # red
  state-lock-locked-color: '#039be5' #'var(--primary-text-color)'
  state-lock-pending-color: '#ff8000' # orange
  state-lock-unlocked-color: '#e0b400' # yellow
  state-media_player-active-color: '#e0b400' # yellow
  state-media_player-off-color: '#039be5' # blue
  person-home-color: '#e0b400' # yellow
  state-person-not-home-color: '#039be5' #'var(--primary-text-color)'
  state-person-zone-color: '#039be5' # blue
  state-remote-color: '#e0b400' # yellow
  state-script-active-color: '#e0b400' # yellow
  state-script-inactive-color: '#ffffff' #'var(--primary-text-color)'
  state-sensor-battery-high-color: '#0da035' # green
  state-sensor-battery-low-color: '#e45e65' # red
  state-sensor-battery-medium-color: '#ff8000' # orange
  state-sensor-battery-unknown-color: '#8A8A8A' # Off (Mid-Grey)
  state-siren-color: '#e45e65' # red
  state-sun-above_horizon-color: '#e0b400' # yellow
  state-sun-below_horizon-color: '#039be5' #'var(--primary-text-color)'
  state-switch-on-color: '#e0b400' # yellow
  state-switch-off-color: '#039be5' # 'var(--primary-text-color)'
  state-timer-color: '#e0b400' # yellow
  state-update-active-color: '#e45e65' # red
  state-update-installing-color: '#ff8000' # orange
  state-vacuum-active-color: '#e0b400' # yellow

  ### Energy Graph ###
  energy-grid-consumption-color-0: '#e45e65'
  energy-grid-consumption-color-1: '#039bef'
  energy-grid-consumption-color-2: '#0da035'
# energy-grid-return-color-0
# energy-battery-in-color-0
# energy-battery-out-color-0
  energy-solar-color-0: '#e0b400'
# energy-gas-color-0
# energy-water-color-0

  # Text colors
  primary-text-color: '#ffffff' # white
  text-primary-color: 'var(--primary-text-color)'
  secondary-text-color: '#5294E2' # soft blue-grey
  disabled-text-color: '#7f848e' # medium grey
  label-badge-border-color: '#0da035' # green

  # Background colors
  primary-background-color: '#1b3163' # dark blue
  secondary-background-color: '#656e82' # dark grey
  secondary-background-color-alpha: "rgba(101, 110, 130, 0.2)"
  divider-color: 'var(--primary-color)'
  sidebar-background-color: var(--primary-background-color)

  # Table rows
  table-row-background-color: '#353840' # darker grey
  table-row-alternative-background-color: '#353840' # darker grey

  # 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)'

  # Cards
  paper-card-header-color: 'var(--accent-color)'
  card-background-color: rgba(0, 0, 0, 0.6) # '#1E1E1E' # super-dark grey
  mdc-theme-surface: '#041d42' # navy blue, Pop-up background colour
  paper-item-icon-color: 'var(--primary-text-color)'
  paper-item-icon-active-color: '#e0b400' # yellow
  paper-item-icon_-_color: '#0da035' # green
  paper-item-selected_-_background-color: 'var(--secondary-text-color)'
  paper-tabs-selection-bar-color: '#0da035' # green
  ha-card-border-radius: 10px
  border-color: 'var(--secondary-text-color)'
  clear-background-color: var(--card-background-color)
  ha-view-sections-column-gap: 8px
  ha-view-sections-row-gap: 8px
  
  # Labels
  label-badge-red: 'var(--accent-color)'
  label-badge-text-color: 'var(--primary-text-color)'
  label-badge-background-color: none

  # 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
  md-slider-active-track-color: var(--light-primary-color)
  # md-slider-inactive-track-color: var(--light-primary-color)
  md-slider-handle-color: 'var(--accent-color)'

  # Google colors
  google-red-500: '#e45e65' # red
  google-green-500: '#0da035' # green

  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' # red
  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: '#ff8000' # orange, variables
  codemirror-string: '#e0b400' # yellow, string
  codemirror-keyword: '#e45e65' # red
  codemirror-number: '#039be5' # blue
  codemirror-comment: '#0da035' # green

## 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.6);
    }

    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;
    }```

Mariusthvdb · 2025-01-07T13:52:24Z

wow, crazy.
and 3.5.0 shows themes just perfectly... (including the changed classes)

are you all sure this isn't a cache thing, as compared to 3.4.3, 3.4.4 should only have the _renderEntity change that was needed to be compatible with HA 2025.1

v3.4.3...v3.4.4

tomlut · 2025-01-07T13:53:53Z

Yes. There was much cache clearing. No difference.

Edit: or no. I just updated again to get some screen shots. I can't make it fail now.

dMopp · 2025-01-07T13:59:27Z

      - type: custom:mushroom-chips-card
        chips:
          - type: template
            content: Erdgeschoss
            tap_action:
              action: navigate
              navigation_path: /dashboard-homescreen
            card_mod:
              style: |
                ha-card {
                  --chip-background:grey;
                }
            icon: ""
          - type: template
            content: Obergeschoss
            tap_action:
              action: navigate
              navigation_path: /dashboard-homescreen/Obergeschoss
            icon: ""
          - type: template
            tap_action:
              action: navigate
              navigation_path: /dashboard-homescreen/gerateverbrauch-und-kosten
            content: Geräte
          - type: template
            content: PV-Anlage
            tap_action:
              action: navigate
              navigation_path: /dashboard-homescreen/pv-anlage
          - type: template
            content: Heizung
            tap_action:
              action: navigate
              navigation_path: /dashboard-homescreen/heizung
          - type: template
            tap_action:
              action: navigate
              navigation_path: /dashboard-homescreen/staubsauger
            content: Staubsauger
          - type: template
            tap_action:
              action: navigate
              navigation_path: /dashboard-homescreen/garten
            content: Garten
          - type: template
            tap_action:
              action: navigate
              navigation_path: /dashboard-homescreen/wallbox-v2
            content: Wallbox

This is just one snipp from my yaml which will not work (in app or firefox) with 3.4.4

Mariusthvdb · 2025-01-07T14:21:37Z

Ive shortened the code for the example.

well shortened.....

please provide a single failing section, as it looks it the combination with mushroom? specifically mushroom, or, only as embedded card inside the button.

if you want help. please make it easier for us to do so. maybe even open a dedicated issue for these specifics alone, so others can find it based on the correct title in detail

storebatfar · 2025-01-07T14:26:29Z

Here is a very simple example of code from my dash, where the card-mod section disappears when I edit the code.

type: grid
columns: 3
cards:
  - type: custom:mushroom-title-card
    title: >
      {{ (states('sensor.strom_energi_data_service_daglig_gennemsnitspris') |
      float | round(2)) | string | replace('.', ',') }}
    subtitle: ""
    alignment: center
    card_mod:
      style: |
        ha-card {
          --title-font-size: 50px;
        }

Mariusthvdb · 2025-01-07T14:37:08Z

and with disappear, you mean the yaml in the UI editor? (please screenshot that)

or the effect it should have I the Frontend

storebatfar · 2025-01-07T14:49:07Z

The card_mod code disappears and therefor also disapprears in the Frontend.

Mariusthvdb · 2025-01-07T15:24:05Z

right.
cant help you there, as I dont use the UI editor. So not sure if this is card-mod 3.4.4 or mushroom in 2025.1
or cache...

maybe give it another clearance, reload resources, and restart, disable local cache in inspector just to be sure

nephrotranz · 2025-01-07T20:09:51Z

I only had a small problem - all border around my stacked in mushroom-cips-card were back after the update.
I also rolled back to 3.4.3 - everything fine again.

RogerSelwyn · 2025-01-07T22:46:30Z

3.4.3 seems to work fine, 3.4.4 on 2025.1.1 does not apply styling to my cards. I'll try to see if there are console errors when I can run it on a proper browser tomorrow.

storebatfar · 2025-01-08T06:55:34Z

Tried deleteing card_mod 3.4.3 completely, flushed cache and restarted the system. Then installed card_mod 3.4.4 and still having the ticket issue. When using the UI edit the card_mod code disappears. Then need to completely uninstall card_mod and re-install v. 3.4.3 for it to work normally.

Mariusthvdb · 2025-01-08T07:35:50Z

This is just one snipp from my yaml which will not work (in app or firefox) with 3.4.4

@dMopp please define 'will not work' ?

also, there is but 1 tiny card_mod in that config, so if that is the bit not working, just leave out the rest of the yaml, it makes helping you much easier for us

dMopp · 2025-01-08T07:48:12Z

This is just one snipp from my yaml which will not work (in app or firefox) with 3.4.4

@dMopp please define 'will not work' ?

also, there is but 1 tiny card_mod in that config, so if that is the bit not working, just leave out the rest of the yaml, it makes helping you much easier for us

Sorry, copied way to much:

chips:
          - type: template
            content: Erdgeschoss
            tap_action:
              action: navigate
              navigation_path: /dashboard-homescreen
            card_mod:
              style: |
                ha-card {
                  --chip-background:grey;
                }
            icon: ""

it’s not changing the background of that specific chip with 3.4.4

Mariusthvdb · 2025-01-08T08:22:00Z

yes, I see that too in 3.5.0, but are you sure this config worked before?
given the changes in card-mod 3.4.4 it could hardly be caused by that, so might be an issue with mushroom in HA 2025.1. Or the config of course ;-)
check the mushroom repo for issues and the community thread https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily-part-2/693055/1364

or see https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/7961

sysmoon14 · 2025-01-08T08:59:23Z

I'll add my issue here too. Basically the below is not working when I upgrade to 3.4.4

name: Living Room
icon: mdi:sofa
tap_action:
  action: navigate
  navigation_path: "#living-room"
entity: sensor.living_room_temperature
show_state: true
custom_fields:
  btn:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          entity: light.living_room_lights
          icon: mdi:lightbulb-group
          tap_action:
            action: toggle
          hold_action:
            action: more-info
          double_tap_action:
            action: none
          content_info: none
          card_mod:
            style: |
              ha-card {
                --chip-background: {{ 'rgb(233, 196, 106, 0.8)' if is_state('light.living_room_lights', 'on') else 'rgba(170, 170, 170, 0.3)'}};
                padding: 5px!important;
                border-radius: 100px!important;
              }
        - type: template
          entity: climate.living_room
          icon: mdi:thermometer
          tap_action:
            action: more-info
          hold_action:
            action: more-info
          double_tap_action:
            action: none
          content_info: none
          card_mod:
            style: |
              ha-card {
                --chip-background: {{ 'rgb(232, 92, 13, 0.8)' if is_state_attr('climate.living_room', 'hvac_action', 'heating') else 'rgba(170, 170, 170, 0.3)'}};
                padding: 5px!important;
                border-radius: 100px!important;
              }
styles:
  grid:
    - grid-template-areas: "\"n btn\" \"s btn\" \"l btn\""
    - grid-template-columns: 1fr min-content
    - grid-template-rows: min-content min-content 1fr;
  img_cell:
    - justify-content: start
    - position: absolute
    - width: 100px
    - height: 100px
    - left: 0
    - bottom: 0
    - margin: 0 0 -20px -20px
    - background: rgb(37, 113, 128)
    - border-radius: 200px
  icon:
    - width: 60px
    - color: white
    - opacity: "0.7"
  card:
    - padding: 22px 8px 22px 22px
  custom_fields:
    btn:
      - justify-content: end
      - align-self: start
  name:
    - justify-self: start
    - align-self: start
    - font-size: 14px
    - font-weight: 500
    - color: white
  state:
    - min-height: 80px
    - justify-self: start
    - align-self: start
    - font-size: 14px
    - opacity: "0.7"
              }

The above YAML looks like this with card-mod 3.4.3

and looks like this when I upgrade to 3.4.4

Mariusthvdb · 2025-01-08T09:17:29Z

I'll add my issue here too. Basically the below is not working when I upgrade to 3.4.4

but why....
it is the exact same issue as the previous poster has, a failing background on a mushroom-chip.
just a thumbs up on that would suffice.

check the links in #431 (comment)

sysmoon14 · 2025-01-08T09:26:45Z

but why would it be a mushroom issue when the only thing changed between my two screenshots is the version of card-mod being used?

Screenshot 1 is HA 2025.1.1, Mushroom 4.2.1, card-mod 3.4.3

Screenshot 2 is HA 2025.1.1, Mushroom 4.2.1, card-mod 3.4.4

RogerSelwyn · 2025-01-08T09:26:56Z

3.4.3 seems to work fine, 3.4.4 on 2025.1.1 does not apply styling to my cards. I'll try to see if there are console errors when I can run it on a proper browser tomorrow.

Some reason it said I had 3.5.0 installed (I don’t see a release for that so I guess it was withdrawn). Downgrading to 3.4.3 and back to 3.4.4 has it working fine.

sambeetm · 2025-01-08T17:24:14Z

3.4.4 screwed-up my margins. Staying in 3.4.3 for now.

FortranFour · 2025-01-08T22:31:03Z

3.4.4 has failed to apply styling for me with thermostat card, room-card, and android-tv-card, whereas 3.4.3 and before all worked fine. I did not notice problems with Mushroom cards.

claire-peacock · 2025-01-09T11:04:05Z

The following fails for me for custom:layout-card in 3.4.4, but works fine with 3.4.3.

card_mod:
      style: |
        .entities {
         margin-top: -25px !important;
         margin-bottom: -25px !important;
         }

        ha-card {
          --state-switch-on-color: #52b04a;
          --state-switch-off-color: #f04135;

         }

I have rolled back to 3.4.3 for now, unless there are any suggestions as to a fix for this.

fgamache1 · 2025-01-09T13:04:05Z

Same. But I redownloaded with the 3.4.3. Reboot, And reinstalled 3.4.4. And now work fine.. Just saying.

nephrotranz · 2025-01-09T13:11:27Z

Same. But I redownloaded with the 3.4.3. Reboot, And reinstalled 3.4.4. And now work fine.. Just saying.

Tried it twice yesterday as I already read somewhere that it could help, but didn't work for me unfortunately.

claire-peacock · 2025-01-09T13:26:30Z

That didn't work for either unfortunately, but welcome the suggestion. Thank you.

storebatfar · 2025-01-09T13:29:12Z

Same. But I redownloaded with the 3.4.3. Reboot, And reinstalled 3.4.4. And now work fine.. Just saying.

Also no luck here following your steps.

ildar170975 · 2025-01-10T04:22:15Z

The 1st post:

Looking at my dashboards all looks fine. When I edit a card that has card_mod styling and look at the yaml code, the card_mod styling has disappearing / is deleted from the code.

And what is a difference from #337 ?

Starting from some post, almost all posts are not related to the issue and are just about "card-mod does not affect ..."

storebatfar · 2025-01-10T11:38:00Z

The 1st post:

Looking at my dashboards all looks fine. When I edit a card that has card_mod styling and look at the yaml code, the card_mod styling has disappearing / is deleted from the code.

And what is a difference from #337 ?

Starting from some post, almost all posts are not related to the issue and are just about "card-mod does not affect ..."

Yes, I am experiencing that the code is disappearing when using the UI editor. This is the issue reported.
Using v. 3.4.3 all is good. Upgrading to 3.4.4 causes the issue.

ildar170975 · 2025-01-10T12:18:16Z

Yes, I am experiencing that the code is disappearing when using the UI editor. This is the issue reported.
Using v. 3.4.3 all is good. Upgrading to 3.4.4 causes the issue.

There is only ONE difference between 3.4.3 & 3.4.4 - and it cannot cause this behaviour.
Here is a screenshot from untouched 3.4.3:

      - type: tile
        entity: sun.sun
        card_mod:
          style: |
            ha-card { background: red; }

That is why I said that your issue is a duplicate of the present #337.
But if you want to have your own issue about the same glitch - no problem ))

Mariusthvdb mentioned this issue Jan 8, 2025

HA 2025.0 custom_fields not working anymore custom-cards/button-card#896

Closed

Card_mod styling disappearing after ugrade to 3.4.4 #431

Card_mod styling disappearing after ugrade to 3.4.4 #431

Comments

storebatfar commented Jan 7, 2025

evanwyatt commented Jan 7, 2025

Mariusthvdb commented Jan 7, 2025

storebatfar commented Jan 7, 2025 • edited Loading

scoutcow commented Jan 7, 2025 • edited Loading

voc0der commented Jan 7, 2025 • edited Loading

Kourai commented Jan 7, 2025

dMopp commented Jan 7, 2025

tomlut commented Jan 7, 2025

Mariusthvdb commented Jan 7, 2025

tomlut commented Jan 7, 2025 • edited Loading

dMopp commented Jan 7, 2025

Mariusthvdb commented Jan 7, 2025

storebatfar commented Jan 7, 2025 • edited Loading

Mariusthvdb commented Jan 7, 2025

storebatfar commented Jan 7, 2025 • edited Loading

Mariusthvdb commented Jan 7, 2025

nephrotranz commented Jan 7, 2025

RogerSelwyn commented Jan 7, 2025

storebatfar commented Jan 8, 2025

Mariusthvdb commented Jan 8, 2025 • edited Loading

dMopp commented Jan 8, 2025 • edited Loading

Mariusthvdb commented Jan 8, 2025 • edited Loading

sysmoon14 commented Jan 8, 2025 • edited Loading

Mariusthvdb commented Jan 8, 2025

sysmoon14 commented Jan 8, 2025

RogerSelwyn commented Jan 8, 2025

sambeetm commented Jan 8, 2025

FortranFour commented Jan 8, 2025

claire-peacock commented Jan 9, 2025

fgamache1 commented Jan 9, 2025

nephrotranz commented Jan 9, 2025

claire-peacock commented Jan 9, 2025

storebatfar commented Jan 9, 2025 • edited Loading

ildar170975 commented Jan 10, 2025

storebatfar commented Jan 10, 2025

ildar170975 commented Jan 10, 2025

storebatfar commented Jan 7, 2025 •

edited

Loading

scoutcow commented Jan 7, 2025 •

edited

Loading

voc0der commented Jan 7, 2025 •

edited

Loading

tomlut commented Jan 7, 2025 •

edited

Loading

storebatfar commented Jan 7, 2025 •

edited

Loading

storebatfar commented Jan 7, 2025 •

edited

Loading

Mariusthvdb commented Jan 8, 2025 •

edited

Loading

dMopp commented Jan 8, 2025 •

edited

Loading

Mariusthvdb commented Jan 8, 2025 •

edited

Loading

sysmoon14 commented Jan 8, 2025 •

edited

Loading

storebatfar commented Jan 9, 2025 •

edited

Loading