🔹 Card-mod - Super-charge your themes!

Hey guys, can anyone help me with card background styling? I am trying to remove the background but as soon as the card updates the background comes back. Any ideas?
I am using auto-entities and card-mod is loaded as a module in config.

Here is my card :

card:
  show_header_toggle: false
  type: entities
  style: |
    ha-card {
       background: none ;
       --ha-card-box-shadow: none;
       
     } 
filter:
  exclude:
    - state: /standby|off|idle|closed|False|clear|unavailable|paused|locked|away/
    - entity_id: light.*strip
    - entity_id: binary_sensor.monitor*
    - entity_id: switch.power*
    - entity_id: switch.server*
    - entity_id: switch.*alarm
  include:
    - entity_id: group.lights*
      options:
        type: custom:fold-entity-row
        group_config:
          toggle: true
          type: custom:slider-entity-row
    - domain: light
      options:
        secondary_info: brightness
        toggle: true
        type: custom:slider-entity-row
    - domain: lock
    - domain: fan
    - domain: switch
    - domain: cover

type: custom:auto-entities
sort:
  method: none

I would suggest to use the other cord mod thread. This one is more related to theme modding.

Sowwwyy didn’t see there was another thread on this. Moved it, thanks for pointing it out

Hi Marius, @KTibow

Actually all the examples I posted were based on my attempts to implement the method shown in your custom header theme, but unfortunately they all failed to bring back my clock. Though your clear method did get rid of the dots. It may just be positioning as last time I had to use after rather than before, but I couldn’t find any combination that worked.

Do you have any other ideas?

sorry for the late response, I am struggling myself with these options, but maybe look here: homekit-infused/Default.yaml at a188b344fe16e468f1ca2df8b7dec48d8ce05e1c · jimz011/homekit-infused · GitHub Jim does it slightly different.

for me, I am tryin git get the selected background color, using:

        /* Set the background of the currently selected tab .*/
        paper-tab[aria-selected=true] {
          background-color: rgba(99,107,117,0.5);
        }

or

background-color: rgba(var(--primary),0.5);

ofc have the primary se in my main theme as primary: 99,107,117 so we can use it in a rgba(). However, this doesnt work (does nothing).

If I use a color name, it works fine, but then I can not use the opacity it needs. Also it overwrites the

        /* Set the color of the currently selected tab indicator. */
        ha-tabs {
          --paper-tabs-selection-bar-color: black !important;
        }

so we can no longer see that.

Any thoughts on optimizing that?

now that Ildar helped me out on adding a camera view as background of a card with

        ha-card {
          background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
          /*color: black;*/
          background-repeat: no-repeat;
          background-size: 100%;
        }

I was wondering if card-mod-theme could do the same for a View. according to Card mod Themes · thomasloven/lovelace-card-mod Wiki · GitHub we can set things for
card-mod-view, and maybe use the same? Ofc I did give it a try, but not sure of the syntax for that wasnt successful just yet.

Update

  card-mod-view: |
    hui-masonry-view {
      background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
    }

actually makes happen!

Dec-23-2021 14-55-25

as does:

  card-mod-view: |
    hui-masonry-view {
      background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
      background-repeat: no-repeat;
      background-size: 100%;
    }

but you’d need a better stream than the 1 I test right now, showing a bit pixelated…

have to figure out the view-name for the custom:layout views… because right now I can only get it to work for the masonry-view, and not for vertical-view or horizontal-view created by that custom component.

  card-mod-view: |
    hui-masonry-view {
      background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
    }

    hui-horizontal-view {
      background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
    }

    hui-vertical-view {
      background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
    }

update2
found that:

    horizontal-layout {
      background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
    }

    vertical-layout {
      background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
    }

make it happen on the other views, probably also for grid-view, but I dont use that,so cant say for sure Doesnt work for Grid layout

trying to find a way to set a camera view on a single view, I found out that:

        paper-tab[aria-label='Weer & Klimaat'] {
          color: {{states('sensor.temperature_color_name')}};
          background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
        }

sets it to the tab in the menu bar. Pretty useless, but nice to know :wink:

this works too:

    {% if state_attr('sensor.browsermod_safari','path') == '/ui-overview/weer_klimaat' %}
      hui-masonry-view {
        background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
      }
    {% endif %}

but isnt yet what I am looking for

I need a little help I made a theme and 1 thing I can’t figure out.

Switches

switch-checked-button-color: rgb(138, 180, 248)
switch-checked-track-color: rgb(138, 180, 248)
switch-unchecked-button-color: rgb(172, 176, 185)
switch-unchecked-track-color: rgb(154, 160, 166)

These are my chosen colors for the switches but when I look at my theme the colors are displayed darker than chosen color.

Now I found out that home assistant applies a transparency and this makes my switch color darker.
how do i change this i already tried a few things with the card mod from hacs but i can’t figure it out i hope someone can help me.!!

1 = darker color
2 = the real choosen color
3 = the opacity makes color darker
Naamloos-2|690x388

This is the 1st my post here, can anyone give me a magical kick into the card-mod-themes?
Made a 1st try with this.
I got a themes file:

Custom Theme:
  ...........

  modes:
    light:
      ....
      secondary-text-color: rgb(166,166,166)
      ...

    dark:
      ...
      secondary-text-color: rgb(99,99,99)
      ...
      card-mod-view: |
        #columns .column > * {
          margin: 32px 16px;
        }

I am expecting larger margins (that was an example from Thomas).
And I see nothing(((
Dark theme is applied, variables are used.
What am I doing wrong?

Just added this:

      card-mod-theme: "Custom Theme"

does not help.

Did you start smaler (without dark, liht, …)?

  card-mod-theme: noctis-grey

  card-mod-view-yaml: |
    hui-masonry-view:
      $: |
        #columns .column > * {
          margin: 32px 16px;
        }

is working here and might be a starting point.

just to be sure, begin with sluggifying your names:

custom-header:

  card-mod-theme: custom-header

and call that in you main theme.
Id start with a single mod, to see if anything is happening at all, as Arganto says above. Must admit several of the mods listed on the Githubs cookbook dont works for me either. Couldn’t get the

# https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes#classes
#  card-mod-row-yaml: |
#      ...
#      :host(.teal) {
#        background: teal;
#      }
#      :host(.purple) {
#        background: purple;
#      }

section to work as example for that.

Hop over to my Custom header theme · GitHub gist to see what I could get working.

It could be card-mod doesn’t support seperate dark theming. Try putting that into the main theme, and setting the margin as a normal HA variable.

Mmm, how to do it?)))
I put this code right after theme’s title & then inside “light” section - no effect.

Custom Theme:

  card-mod-view: |
    #columns .column > * {
      margin: 32px 16px;
    }
Custom Theme:

  modes:
    light:

      card-mod-view: |
        #columns .column > * {
          margin: 32px 16px;
        }

Can I set card-mod for the default theme? If yes - how then?

Tried this with noctis theme (which does not have separate light & dark modes):

noctis:  

  card-mod-theme: noctis
  card-mod-view-yaml: |
    hui-masonry-view:
      $: |
        #columns .column > * {
          margin: 32px 16px;
        }

No effect.
Surely after change I call the “reload_themes” service.

Also, I wonder what is a meaning of this:

since this code is already placed inside some theme with a name?

Pardon, what do you mean?
I got some custom theme with light & dark modes (it is based on originally so called Google Dark theme, I replaced some variables and added some user-defined variables), and also I installed Noctis theme via HACS (just out if curiosity).
Both themes have lots of variables; I am not sure that any theme has a special variable for margins between cards.

Marius, I do not understand, what is a meaning of “custom-header” in your example?

You should only need to put it once, outside of modes.

You can create a theme that doesn’t change anything but adds card-mod.

It sounds like there’s a problem with your code.

It tells card-mod what to do, and it lets you create separate themes with styles you can tack on to another one.

You can create a variable, even if it isn’t included in HA. Then you could reference it like margin: var(--margin-in-dark-mode) in card-mod if you set it up like margin-in-dark-mode: 20px in your theme.

Which code exacltly? Themes are working = custom light & dark, noctis.
At least if I change some variable in any theme then I see effects in views.

This example I took from card-mod repository (put it inside Noctis):

noctis:  

  card-mod-theme: noctis
  card-mod-view-yaml: |
    hui-masonry-view:
      $: |
        #columns .column > * {
          margin: 32px 16px;
        }

Suppose these “card-mod-view-yaml”-like sections (which defining styles, I think) are placed below that “card-mod-theme: noctis” line.
All this code is placed inside some theme (but outside modes) - I guess that this code already belongs to this particular theme, it is strange for me that we need to specify a name again.
Also, if some theme is called “theme123” - should that “name” line be "card-mod-theme: theme123" (i.e. same name)? And if the theme is called “Custom Theme”?
Update: seems that this line must be exactly the same as the theme’s name (i.e. "card-mod-theme: "Custom Theme"" )

Yes, I call them “user-defined variables”.
So, if I understood your post properly, I got this code:

noctis:  

  card-mod-theme: noctis
  card-mod-view-yaml: |
    hui-masonry-view:
      $: |
        #columns .column > * {
          margin: var(--user-margin-between-cards);
        }
  user-margin-between-cards: 32px 16px

OMG! I do not understand what happened - but I succeeded with this old code (as well as with using variable, see above):

noctis:  

  card-mod-theme: noctis
  card-mod-view-yaml: |
    hui-masonry-view:
      $: |
        #columns .column > * {
          margin: 64px 32px;
        }

and with my custom theme:

Custom Theme:

  card-mod-theme: "Custom Theme"
  card-mod-view-yaml: |
    hui-masonry-view:
      $: |
        #columns .column > * {
          margin: 32px 32px;
        }

My 1st small victory! (have no idea why it did not work earlier…)
Anyway, do not understand the meaning of that "card-mod-theme: "Custom Theme"" - since it repeats the name of the theme.

This mod is just awesome!
Opened new horizons)))

As I have answered above. :joy:

And regarding the why of card-mod-theme, I think it is the mapping to the theme, so that it is applied to the selected one.

Did you have already investigated the wiki pages? Next to the link to your non-theme examples. There it is described the same way.

No no no, it was not working first ))) I have no idea why!

Oh, that was a real starting point, thank you.
Actually, I was not going to dig into card-mod-themes right NOW - I planned to start learning it a bit later.
But I needed to set a fixed width to the right sidebar - so I started thinking about card-mod-themes.

Good tutorial, btw.

this is the name of the card-mod theme. you create the card-mod-theme, like I posted:

custom-header:

  card-mod-theme: custom-header

and then in your actual theme, say Dark red, use that card-mod-theme:

frontend:
  themes:
    Dark red:
      card-mod-theme: custom-header
      rest of your theme settings

you can see it as an !include really.

you can ofc name it anything, the name here is used because it pertains to my custom header settings. This works for my Christmas theme:

Christmas:

  card-mod-theme: christmas-theme

which is declared like:

christmas-theme:
  card-mod-theme: christmas-theme
  <<: *main
  card-mod-card: |
    ha-card {
      overflow: hidden;
    }

(<<: *main is a huge section I repeated from another card-mod-theme)

having an issue myself currently with the dark mode (specifically on Maps), only being applied on my iPhone, and not on any other device: Maps dont follow modes: dark: consistently · Issue #11027 · home-assistant/frontend · GitHub

How to set a fixed width for a conventional right sidebar:

  card-mod-view-yaml: |
    hui-sidebar-view:
      $: |
        .container div#sidebar {
          min-width: 400px;
          width: -webkit-fill-available;
        }
2 Likes

OMG, one more excited post:
just yesterday started learning this mod - now I think card-mod-themes is one of greatest fundamental features in HA frontend like decluttering-card.
Thank you, @thomasloven !

All I want to do is add a clock to the header. This was easy with CCH but for some reason I’m having trouble using Card-mod. I added this to the end of my theme (Github Dark Theme)

card-mod-theme: "Github Dark Theme"
  # Header
  card-mod-root-yaml: |
    mwc-icon-button[slot="trigger"] > ha-svg-icon {
      display: none;
    }

    mwc-icon-button[slot="trigger"]::after {
      font-size: 22px;
      height: 20px; 
      width: 100px;
      margin-left: 0px;
      margin-right: 0px;
      content: "{{ states('sensor.time') }}";
      position: absolute;
      top: 14px;
      right: 0px;
    }

I also added this to my sensor.yaml

- platform: time_date
  display_options:
    - "time"
    - "date"
    - "date_time"
    - "date_time_utc"
    - "date_time_iso"
    - "time_date"
    - "time_utc"
    - "beat"

The instructions of how to add this to a theme seem a little confusing to me so any help would be appreciated.