Material Home Assistant

Appearance

🎨 Card Mod ​

NOTE

✨ Available on 💎 Pro & Ultimate Version Only

🌟 Overview ​

card-mod is a powerful feature that allows you to customize the appearance of any card in Material UI. 🔥

✨ Available on all cards ​

You can use card-mod on all Material UI cards to apply custom CSS styles. This gives you maximum flexibility to create a unique and tailored interface for your needs.

🚀 How to use it ​

To use card-mod, add the card_mod section to your card's configuration. Within this section, you can define the CSS styles you want to apply.

Basic example: changing the background color ​

This example changes the background color of a card to a nice blue.

yaml
type: "custom:material-button-card"
entity: "light.living_room"
card_mod:
  style: |
    .card {
      background-color: #44739e;
    }

Advanced example: using Home Assistant templates ​

card-mod supports Home Assistant's Jinja2 templates, which means you can create dynamic styles that change based on the state of an entity. 🤯

Important: Javascript templates ([[[...]]]) are not supported.

In this example, the background color of the card will change based on the state of an input_boolean. If the switch is on, the background will be green, otherwise it will be red.

yaml
type: "custom:material-button-card"
entity: "light.living_room"
card_mod:
  style: |
    .card {
      background-color: {% if is_state('input_boolean.my_switch', 'on') %} lightgreen {% else %} #ff6347 {% endif %};
    }

Example with CSS animations ​

You can also add CSS animations to make your cards even more appealing. 🤩

yaml
type: "custom:material-button-card"
entity: "light.living_room"
card_mod:
  style: |
    .card {
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.05);
      }
      100% {
        transform: scale(1);
      }
    }

Experiment with card-mod and unleash your creativity! 🧑‍🎨