🔹 Card-mod - Super-charge your themes!

[Mariusthvdb (Marius)]

the new card-mod did fix the main issue probably, but the mods on the card-mod-sidebar-yaml: no longer work.

update

well, they do card-mod-sidebar-yaml no longer works · Issue #264 · thomasloven/lovelace-card-mod · GitHub

but things changed in HA see:

so, for the regular notification badge, we need to add a default ,248px like:

      a[data-panel='ui-familie'] paper-icon-item:after {
              content: "{{states('sensor.family_home')}}";
              left: calc(var(--app-drawer-width,248px) - 44px);
              position: absolute;
              min-width: 20px;
              box-sizing: border-box;
              border-radius: 50%;
              font-weight: 400;
              background-color: {{states('sensor.presence_color')}}; /*var(--accent-color);*/
              line-height: 20px;
              text-align: center;
              padding: 0px 6px;
              color: {{'saddlebrown' if states('sensor.presence_color') == 'gold' else 'ivory'}};
              /*var(--text-accent-color, var(--text-primary-color));*/
              font-size: 14px;
      }

and that brings back the notifications:

however, collapsing the menu changes css to a fixed 26px as you can see in the Inspector screenshot, and I’ve not found a way yet to mimic that in the mod. Or find a conditional on the menu being collapsed or not

[pergola.fabio]

Hi , something verry simple, i used before Kios Mode, to hide the top bar, but it doesnt work anymore on 2023.4, seems card mod can do it too . i use google dark theme mod, i did this …

Google Dark Theme:
  card-mod-theme: Google Dark Theme
  card-mod-root: |
    app-header {
      display: none;
    }  
  ha-card-border-color: rgba(0,0,0,0) ## transparent
  # Header:
  app-header-background-color: rgb(23, 23, 23)
  app-header-text-color: rgb(198, 203, 210)
  app-header-selection-bar-color: var(--primary-color)
  app-header-edit-background-color: rgb(136, 136, 136)
  # Main Interface Colors
....

But i still have the top bar? what am i missing? i added that card-mod-root to it above

[pepe59]

I had the header moved to the bottom, but after today’s HA 2023.4 update, the header moved back to the top.
Any idea how to fix this?

[Daniel_Reimer]

I had my fun with transparency for quite some time now. Until 2023.4.0b0 in this case.

First some material I use right now: GitHub - dreimer1986/yourname_card_mod: Home Assistant theme - A dark, electric blue theme that reminds the movie Your Name.

This is a modified yourname theme for use with CardMod and Vilhelm’s Animated Backgrounds (with some 2023.4.0 fixes I hacked together here WARNING: 2023.4.0b0 or newer break Animated Background · Issue #56 · Villhellm/lovelace-animated-background · GitHub)

1. I am open for any kind of suggestion of course. (But better over there on Github as I don’t wanna hijack this thread)
2. Look closely on the animated pics I added. You can see the sidebar is a mixture of darker transparent buttons and a less transparent rest. This is the goal I want back…

As CardMod seems to have broken down quite a bit, I decided to get some stuff fixed with a style JS: https://raw.githubusercontent.com/dreimer1986/yourname_card_mod/master/www/styles.js

Header and Lovelace background are fine again, but sidebar is still funny. I got a suggestion from BramKragten how to fix it and it indeed does SOMETHING, just not what I want. The fix in the script casues one layer to vanish as the whole sidebar gets lighter. But there is one layer I cannot find and it is NOT transparent. This can be seen fine when the site loads up after Cache wipe. Sidebar has some dark color and the rest is way lighter. Sadly I cannot make a pic @ home as my PC is too fast, I saw this at work… Thus the current result is:

Here for comparison the same without setProperty("–mdc-theme-surface", “transparent”)

It’s darker.

Now to the final part… HELP!!! What did I miss in all my mess? Why is this thing not transparent? What layer did CardMod make vanish here and now fails to do?

[anon12659957]

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

[Mariusthvdb (Marius)]

Card-mod - Add css styles to any lovelace card

I was able to fix that, using above suggestion for replacing “app-header” with “.header”, “app-toolbar” with “.toolbar”, and some more adjustments. Here is my full theme configuration, in case anyone want to compare.

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

[Daniel_Reimer]

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

[GoodyGizmos]

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

[mase]

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

[danm89]

Try this.

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

[GoodyGizmos]

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?

[Olivier1974 (Olivier Toussaint)]

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:

Trying to scroll (generating a refresh):

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

[pepe59]

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

[mase]

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

[Mar1us]

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)"

[mase]

@Mar1us

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

try this:

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

[pepe59]

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.

[Mar1us]

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

[mase]

yes just tested, doesn´t work.

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

[mase]

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)"