card-mod-theme does nothing in 3.2.2 with HA 2023.4.0

[ghost]

I recently updated my HA to the latest version, which is 2023.4.0, and Custom Header had to go because of the update.

To mimic my previous setup as closely as possible, I'm attempting to migrate card-mod-theme.

However, despite installing card-mod 3.2.2 in HACS and editing theme.yaml, card-mod-theme isn't making any changes to the header.

Here is how my theme.yaml looks like

#
# iOS Dark Mode Theme
#
ios-dark-mode:
  # Global
  card-mod-theme: ios-dark-mode
  background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-light-green.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9f09"  # from Apple systemOrange dark mode
  light-primary-color: "#B6B6C1"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#2c2c2e"  # systemGray5 dark mode
  secondary-background-color: rgba(25, 25, 25, 0.9)
  divider-color: rgba(152, 152, 157, 0.3)  # from Apple systemGray dark mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#FFF"
  secondary-text-color: "#d3d3d3"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Header
  card-mod-root-yaml: |
    ha-app-layout$: |
        /* This corrects top padding for the view. */
        #contentContainer {
          padding-top: 48px !important;
        }

    paper-tabs$: |
        /* This hides tab scroll arrows, remove next 3 lines if you want them. */
        paper-icon-button {
          display: none;
        }
        /* This makes it so arrows are only displayed when needed. */
        .not-visible {
          display: none;
        }
    .: |
      ha-menu-button {
        display: none !important;
      }
      action-items {
        dispaly: none !important;
      }

      @media (orientation: portrait) {
        a.menu-link[target="_blank"], ha-button-menu, [main-title] {
          display: none;
        }
        paper-icon-button[icon="paper-tabs:chevron-right"] {
          display: none;
        }
        paper-icon-button[icon="paper-tabs:chevron-left"] {
          display: none;
        }
      }

And as you can see, the top header remains unchanged from default.

This is how I want my header to look. (This is the only screenshot I have of my previous dashboard)

Here is the old config of custom header:

custom_header:                               
  background: 'rgba(0, 0, 0, 0.5)'                                                
  compact_mode: true                                           
  stack_css: 'padding: 5px'                               
  elements_color: rgba(255, 255, 255, 1)                   
  active_tab_css: 'background: rgba(255, 255, 255, 0.2)'         
  tab_indicator_color: 'rgba(0, 0, 0, 0)'                                
  chevrons: false                                                                                  
  fit_tabs: true                                                                               
  menu_hide: true                                    
  options_hide: true                          
  tab_icons_and_text: false    
  tabs_css:                        
    0: '--mdc-icon-size: 40px'               
    1: 'font-size: 20pt'    
    2: 'font-size: 20pt'   
    3: 'font-size: 20pt'               
    4: 'font-size: 20pt'                
  tab_icons:      
    0: mdi:home   

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.

[earion68]

Having a similar issue here with 2023.4.1 and card-mod 3.2.2, none of the below config (in themes.yaml) is taken into account:

  card-mod-root: |
    app-header {
      background: rgba(0,0,0,0.2) !important;
    }
    app-toolbar {
      background: none !important;
    }

    hui-view {
      background: none !important;
    }
    ha-app-layout {
      background-position: center !important;
      background-size: cover !important;
      background-repeat: no-repeat !important;
      background-image: url("/local/pictures/background-3.jpg") !important;
      background-attachment: fixed !important;
    } 

[earion68]

Having a similar issue here with 2023.4.1 and card-mod 3.2.2, none of the below config (in themes.yaml) is taken into account:

  card-mod-root: |
    app-header {
      background: rgba(0,0,0,0.2) !important;
    }
    app-toolbar {
      background: none !important;
    }

    hui-view {
      background: none !important;
    }
    ha-app-layout {
      background-position: center !important;
      background-size: cover !important;
      background-repeat: no-repeat !important;
      background-image: url("/local/pictures/background-3.jpg") !important;
      background-attachment: fixed !important;
    } 

Answering my own comment in the hope it will help others.

HomeAssistant 2023.4 broke lots of front-end stuff. It looks like @thomasloven made a patch himself in f6f2641 in particular in themes.

Current config below works "almost" as before: the background image is now stretched on Android mobile app.

  card-mod-root: |
    app-header, div.header {
      background: rgba(0,0,0,0.2) !important;
    }
    app-toolbar, div.toolbar {
      background: none !important;
    }

    hui-view {
      background: none !important;
    }

    ha-app-layout, div#view {
      background-position: center !important;
      background-size: auto !important;
      background-repeat: repeat !important;
      background-image: url("/local/pictures/background-6.png") !important;
      background-attachment: fixed !important;
    } 

[dreimer1986]

That one for root I saw, too. Anyone a clue how to fix the sidebar theming?

https://github.com/dreimer1986/yourname_card_mod/blob/master/themes/yourname_cardmod.yaml

My beloved transparency is gone...

[domolys]

I'm using this, with 3.2.2 HA 2023.4.x to hide chevrons, this is working...

  card-mod-root-yaml: |
    ha-tabs$: |
        /* HIDE TAB CHEVRONS */
        paper-icon-button {
          display: none;
        }
        /* REMOVE UNUSED SPACE OF TAB CHEVRONS */
        .not-visible {
          display: none;
        }