šŸ”¹ Card-mod - Super-charge your themes!

Does Compact-Header still work on HA 2023.4.0?

This following code in my theme.yaml doesnā€™t do jackshit

ios-dark-mode:
  # Global
  card-mod-theme: ios-dark-mode
  card-mod-root-yaml: |
    .: |
      ha-menu-button {
        display: 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;
        }
      }

thanks for noticing that, I hadnā€™t, because my existing theme mods on those app-header and app-toolbar still work. which is remarkable?

      /* Set the toolbar background. */
      app-header, app-toolbar {
        background: {{'radial-gradient(var(--primary-color),var(--card-background-color))'
                       if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
                        else 'var(--primary-color)'}};
        color: var(--text-primary-color);
      }

ive check and moved to:

      /* Set the toolbar background. */
      .header, .toolbar {
        background: {{'radial-gradient(var(--primary-color),var(--card-background-color))'
                       if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
                        else 'var(--primary-color)'}};
        color: var(--text-primary-color);
      }

and yes, that works also :wink:
huh?

need to check if the main settings also have changed:

  app-header-background-color:
  app-header-text-color:
  app-header-edit-background-color:

for that matterā€¦ no, they havent: frontend/src/resources/styles.ts at 81ebdf1448ab25689736ad59e5c9012e971280d1 Ā· home-assistant/frontend Ā· GitHub

but, also see this:

app-header and app-toolbar are still very much alive

If someone stumbles upon these for 2023.4.0 let me know:

  card-mod-sidebar: |
    :host {
      background: var(--ha-card-background) !important;
    }
    div.menu {
      background: transparent !important;
    }
    paper-icon-item[role=option], paper-icon-item[aria-role=option] {
      background: var(--ha-card-background) !important;
    }
    .iron-selected paper-icon-item {
      background: var(--ha-card-background) !important;
    }

How do I change the color of the entire header?

Iā€™ve tried a handful of variations on this:

  card-mod-root-yaml: |
      .: |
        app-header {
          color: black !important;
        }

anyone knows how to move the back-arrow of a subview up?

.mdc-icon-button {
  padding-bottom: 10px;
}

doesnĀ“t work for me

moving the title up worked with

.main-title {
  padding-bottom: 10px;
}

Try this.

  card-mod-root-yaml: |
      .: |
        .header {
          color: black;
        }

Thanks, but I couldnā€™t get that to work.

I did find the HA built-in variable app-header-background-color: that seems to do what I need except that I currently have that variable set to different colors for light and dark mode. For most of my devices, I want to keep the header background color intact for light and dark modes, but I need to turn it black based on a specific @media query selector on a specific device regardless of light/dark mode. I think the right way to do this is to place the media query in both light/dark mode sections, but cannot seem to figure out the right syntax for media queries in those sections.

  modes:
    light:
      @media (orientation: landscape) and (min-width: 950px) {
          .header {
            --app-header-background-color: black;
          }

So, hereā€™s a new question:
Whatā€™s the right way to wrap a built-in HA variable with a media query in the modes section of a theme?

Since 2023.4, my theme using card-mod is broken, but only in the companion app (iOS).
The culprit part is this:

card-mod-view-yaml: |
    hui-masonry-view $: |
      .badges {
        margin-top: auto !important;
      }
    .: |
      hui-masonry-view {
        display: flex;
        flex-direction: column-reverse;
        justify-content: start;
      }

It is to put the badges at the bottom of the pages.
It is working perfectly fine in a browser but in the companion app, the pages are opening at the bottom and it is not possible to scroll up.

At startup:

image

Trying to scroll (generating a refresh):

image

When I put the default theme (not using card-mod), everything is working as expected.

I have this code where the top bar has been moved down.
The color was black.
After the HA 2023.4 update the bar is back up and gray and I have no idea how to get it back down, black.
Everything else works fine.
Do you have any idea?

    card-mod-theme: hapanel
    # Header
    card-mod-root-yaml: |
      ha-app-layout$: |
        #contentContainer {
          padding-top: 0px !important;
          padding-bottom: 48px !important;
        }
      ha-tabs$: |
        #tabsContainer {
          display: flex;
          justify-content: center;
        }
      .: |
        ha-tabs {
          height: var(--header-height);
          --paper-tabs-selection-bar-color: #D2691E !important;
          color: #696969 !important;
        }
        paper-tab[aria-selected=true] > ha-icon, paper-tab[aria-selected=true] {
          color: #FF8C00 !important;
        }
        /* Let's change the background. */
        app-header, app-toolbar {
          background: black !important;
          color: #A9A9A9 !important;
        }
        app-header {
          top: calc(100vh - 48px) !important;
          bottom: 0 !important;
          transform: unset !important;
        }
        /* This adds the time */
        ha-button-menu::before {
          font-size: 18px;
          height: 20px; 
          width: 100px;
          margin-left: 150px;
          margin-right: 150px;
          content: "{{ states('sensor.aktualni_den') }}";
          position: absolute;
          top: 16px;
          right: 48px;
        }

try changing app-header to .header and app-toolbar to .toolbar, donĀ“t forget to reload your themes after changing it.

card-mod-theme: hapanel
    # Header
    card-mod-root-yaml: |
      ha-app-layout$: |
        #contentContainer {
          padding-top: 0px !important;
          padding-bottom: 48px !important;
        }
      ha-tabs$: |
        #tabsContainer {
          display: flex;
          justify-content: center;
        }
      .: |
        ha-tabs {
          height: var(--header-height);
          --paper-tabs-selection-bar-color: #D2691E !important;
          color: #696969 !important;
        }
        paper-tab[aria-selected=true] > ha-icon, paper-tab[aria-selected=true] {
          color: #FF8C00 !important;
        }
        /* Let's change the background. */
        .header, .toolbar {
          background: black !important;
          color: #A9A9A9 !important;
        }
        .header {
          top: calc(100vh - 48px) !important;
          bottom: 0 !important;
          transform: unset !important;
        }
        /* This adds the time */
        ha-button-menu::before {
          font-size: 18px;
          height: 20px; 
          width: 100px;
          margin-left: 150px;
          margin-right: 150px;
          content: "{{ states('sensor.aktualni_den') }}";
          position: absolute;
          top: 16px;
          right: 48px;
        }

Hi,

since 2023.4 my very simple theme to remove the top header is not working anymore. Anyone how to fix?

Theme
#Mushrooms Shadow Theme for Mobile Interface
Mushroom Shadow Mobile:
  card-mod-theme: Mushroom Shadow Mobile
  card-mod-root: |
    app-toolbar {
      display: none;
    }
  # Home Assistant override
  ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
  ha-card-border-width: 0
  modes:
    light:
      primary-text-color: "#212121"
      primary-background-color: "#EFEFEF"
      # header
      app-header-text-color: "var(--primary-text-color)"
      app-header-background-color: "var(--primary-background-color)"
    dark:
      primary-text-color: "#DDDDDD"
      primary-background-color: "#121212"
      # header
      app-header-text-color: "var(--primary-text-color)"
      app-header-background-color: "var(--primary-background-color)"

try this:

  card-mod-root: |
    .toolbar {
      display: none;
    }

That worked, the top bar is down and all, but thereā€™s one more problem.
After moving the bar down, it remains gray, empty at the top, taking up space on the tablet.
Thank you for your kind help.

that didnĀ“t worked - still icons from the header are there

yes just tested, doesnĀ“t work.

you might want to try this: GitHub - NemesisRE/kiosk-mode: šŸ™ˆ Hides the Home Assistant header and/or sidebar

you need to edit some settings then. you might want to take a look at the theme that i use and start from thereā€¦

Theme
---
Navbar_New:
  card-mod-theme: "Navbar_New"
  header-height: "60px"
  card-mod-view-yaml: |
    "*:first-child$": |
      #columns .column > * {
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
      }
  # Move navbar
  card-mod-root-yaml: |
    ha-tabs$: |
      #tabsContent {
        width: 97%;
      }
      paper-icon-button {
        display: none;
      }
    .: |
      @media (orientation: portrait) {
        a.menu-link[target="_blank"], ha-button-menu, ha-menu-button, [main-title] {
          display: none !important;
        }
      div#view{
        transform: initial;
        padding: 0 !important;
        position: fixed !important;
        margin: 0 !important;
        width: 100%;
        height: 100% !important;
      }
      .header {
        top: auto !important;
        bottom: 0px !important;
        box-shadow: var(--footer-shadow);
        height: var(--header-height) !important;
      }
      .toolbar {
        height: var(--header-height) !important;
        padding: 10px 0px !important;
        background: var( --ha-card-background, var(--card-background-color) );
      }
      #view {
        margin-top: calc(-1 * var(--header-height)) !important;
        padding-bottom: var(--header-height) !important;
      }
      ha-tabs {
        --paper-tabs-selection-bar-color: var(--header-tab-indicator-color) !important;
        --mdc-icon-size: 26px;
        display: flex;
        justify-content: space-between;
        padding: 10px;
        margin-top: 15px;
        height: var(--header-height) !important;
      }
      paper-tab[aria-selected=true] {
        color: var(--header-active-tab-color);
        background-color: var(--header-active-tab-bg-color);
      }
      paper-tab {
        color: rgb(var(--mush-rgb-disabled));
        --paper-tab-ink: var(--card-background-color);
        border-radius: 25px;
        height: 30px;
        padding: 0 20px;
      }
      .main-title {
        padding-bottom: 10px;
      }
      .mdc-icon-button {
        padding-bottom: 10px;
      }
  # Header / Footer
  header-active-tab-color: "rgb(var(--paper-tab-selected))"
  header-active-tab-bg-color: "var(--card-background-color)"
  header-all-tabs-color: "rgb(var(--mush-rgb-disabled))"
  header-tab-indicator-color: "var(--card-background-color)"
  app-header-text-color: "var(--primary-text-color)"
  app-header-background-color: "var(--primary-background-color)"
  paper-tabs-selection-bar-color: "var(--card-background-color)"
  footer-shadow: "var(--card-background-color)"

see 2 posts up your post.
use background: instead of color:

Thanks, Iā€™ll look into it.

Hello everyone,

I search how can I use this code in my theme.yaml :

  card-mod-more-info-yaml: &card-mod-more-info-yaml |
    $: |
      @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
        .mdc-dialog__surface {
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          background-color: rgba(var(--rgb-mdc-theme-surface), .5) !important;
        }
      }
      .mdc-dialog__surface {
        box-shadow: 0 0px 16px 4px rgba(var(--dialog-box-shadow), .15), 0 16px 64px 32px rgba(var(--dialog-box-shadow), .5) !important;
      }

Result :

with the browser_mod.popup

I donā€™t no if itā€™s clear but if you have any question donā€™t hesitate

Thank you in advance for you help :slight_smile:

Only if there is no other solution