🔹 Card-mod - Super-charge your themes!

That worked. Thanks!

I’ve never done this before, but I checked the code I got from you and Mariusthvdb and changed from…

        $: |
          ha-attributes {
            display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}};
          } /* hide attributes dropdown for light cards */


        $: |
          ha-attributes {
            display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}};
          } /* hide attributes dropdown for light cards */
          ha-select {
            display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}};
          } /* hide effect dropdown for light cards */
          hr {
            display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}};
          } /* hide ruler above effect dropdown for light cards */

…and it seems to work.

Still to discover if I messed up something else but it works for now :slight_smile:

Thanks for pointing me in the right direction!

Guys, how can i set custom styling for every ha-card elements in order to don’t add custom style to each one? i tried to add these lines to my-theme.yaml

  card-mod-card-yaml: |
      paper-icon-item {
        // my style 

but it doesn’t work

I did it like this:

orange light modified mobile:
  # Card mod theming
  card-mod-theme: orange light modified mobile
  card-mod-root: |
    app-header {
      display: none;
  card-mod-view: |
    #view {
        min-height: 100vh !important;

Can the sidebar be modified and is card-mod-sidebar-yaml valid? I notice that card-mod is injected under ha-sidebar$, but nothing is visible under its <style> element.

Not mentioned in the docs.

But at least card-mod-sidebar works…
And surprisingly it allows to go into shadowRoot:

  card-mod-sidebar: |
    :host {
      background: rgba(255, 0, 0, 0.3) !important;
    .iron-selected paper-icon-item {
      background: yellow;


1 Like

…So sad that we cannot edit styles for system pages.
Otherwise I would specify a style for the Dev tools → Template to add scrollbars:

Registered a FR here.

1 Like

I cannot see any card_mod in your example. I would suggest to ask in the button-card-thread.

Oh sorry, I delete my post… Thnak you !

Moving a right sidebar to the left

  card-mod-view-yaml: |
    hui-sidebar-view $: |
      .container {
        flex-direction: row-reverse;

i´d like to color the background of a vertical or horizontal stack. however i don´t manage to get it working.

got something like this:

  - type: horizontal-stack
      ha-card {
        background-color: white;

anyone knows how to get it colored?

card-mod thread → 1st post → link at the bottom → stack
This is not about themes.

1 Like

In your theme file.

  card-mod-view-yaml: |
    .: |
    hui-vertical-stack-card$: |
      #root {
        background-color: rgb(0, 0, 0);

for a test view, Id need the option to easily switch off card-mod-theme, so I tried to insert:

    {% if is_state('input_boolean.card_mod_theme','on')%} theme-mods {%- endif %}

into my theme declaration:


  card-mod-theme: theme-mods

and turn that into:


  card-mod-theme: |
     {% if is_state('input_boolean.card_mod_theme','on')%} theme-mods {%- endif %}

unfortunately this doesnt work.

I now resort to commenting the theme-mod reference in my actual themes, and reload themes.

cant this be done by means of a toggle?

please have look for me, thanks!

btw, experimenting wit this a bit more, Ive just seem to have discovered we dont need the actual line anymore? Opposed to what is stated here:https://github.com/thomasloven/lovelace-card-mod/blob/06140ff020e94a20f7eec9f51c18ad04aef0e8f1/README-themes.md#card-mod-theme


#  card-mod-theme: theme-mods

works just as well?

This works fine but leaves a space at the top of the page, is there anything i can do to crop this if the boolean is on?

   ### Card Mod Theme ###
  card-mod-theme: minimalist-mobile
  card-mod-root: |
    app-toolbar {
      display: {{'none' if is_state('input_boolean.hide_app_toolbar','on')}};
    } /* hide app toolbar */


Thanks. This also works but still shows a space above where the toolbar was until I refresh my dashboard.

Do not confirm.

Any change you can share your code, for me it not seems to work. Thx

Probably because the code is wrong from the beginning.

  card-mod-root-yaml: |
    .: |   ----------- this !!!!
      app-header {
        display: none;

At least these types of errors you may do:

  • wrong value is selected for a property (like “color: 12px”);
  • correct value for a property is not set - “!important” is needed;
  • wrong attribute is selected (like “colr: red”);
  • wrong element is selected;
  • wrong path is specified - so none element is selected;
  • smth else.

And use Code Inspector to check a possible reason.