How to Display Errors and Warnings on Your Home Assistant Dashboard

ATTENTION: For a limited time until mid-January 2025, you and I will receive not just €50 but €100 at Tibber as a bonus! Just scroll to the end of this article to find out whether a dynamic electricity tariff might be for you.
― Joachim

To load the video, please click the image. Please note that by doing so, data will be transmitted to YouTube.

Forgot to water the plants again? The trash can is overflowing, the EV is empty? And the fridge door keeps getting left open? All while you have that data somewhere in your smart home? I’ll show you in three steps how to easily integrate a display like this into your Home Assistant dashboard so you never miss a warning again:

Prerequisites

For this tip you need to install the card-mod extension from the Home Assistant Community Store (HACS). Just open HACS in the sidebar, search for card-mod in the list of extensions, and click Download twice. Then reload the Home Assistant interface by clicking Reload — and the extension is ready to use.

Customizing the CSS Style

With this extension you can change the appearance of your dashboard elements. For example, to display a red warning card with white text instead of a neutral card, add the following YAML snippet to your card:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


card_mod:
  style: |
    ha-card {
      background-color: rgba(255,10,10,1);
      --primary-color: white;
      --paper-item-icon-color: white;
      --primary-text-color: white;
      --switch-checked-track-color: white;
      --switch-checked-button-color: white;
    }    

The CSS variables used here (recognizable by the -- prefix) allow you to customize Home Assistant-specific elements such as icons or switch colors without needing in-depth CSS knowledge.

Enabling Conditional Display

Of course the cards should only appear when an actual error or warning is present. Use an entity-filter and define a condition. In this example, the fridge temperature should only be shown when it exceeds 8°C.

1
2
3
4
5
6


type: entity-filter
entities:
  - entity: sensor.kuhlschrank
    conditions:
      - condition: numeric_state
        above: 8

The complete definition looks like this, combining entities with conditions and our card-mod style:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


type: entity-filter
show_empty: false
entities:
  - entity: sensor.kuhlschrank
    conditions:
      - condition: numeric_state
        above: 8
conditions:
  - condition: state
    state: null
card:
  type: entities
  card_mod:
    style: |
      ha-card {
        background-color: rgba(255,10,10,1);
        --primary-color: white;
        --paper-item-icon-color: white;
        --primary-text-color: white;
        --switch-checked-track-color: white;
        --switch-checked-button-color: white;
      }      

More Complex Example

You can of course group multiple entities together when they should be displayed in the same color, while still defining independent display conditions for each — like in this example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


type: entity-filter
entities:
  - entity: sensor.basilikum
    conditions:
      - condition: numeric_state
        below: 50
  - entity: input_boolean.mull_rausstellen
    conditions:
      - condition: state
        state: "on"
conditions:
  - condition: state
    state: null
card:
  type: entities
  card_mod:
    style: |
      ha-card {
        background-color: rgba(3,169,244,1);
        --primary-color: white;
        --paper-item-icon-color: white;
        --primary-text-color: white;
        --switch-checked-track-color: white;
        --switch-checked-button-color: white;
      }        

Color Hierarchy and Combined Conditions

A clear dashboard lives by a strong hierarchy that highlights important information while maintaining readability. I recommend structuring warnings and errors in your Home Assistant dashboard by color:

Red for critical errors (e.g. fridge temperature too high).
Orange for warnings (e.g. low battery level).
Blue for informational notices (e.g. take out the trash).

With this hierarchy you can assess the urgency of a situation at a glance.

Example: Three Groups with Different Warning Levels

Here is an example of a dashboard combining errors, warnings, and notices:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49


type: vertical-stack
cards:
  - type: entity-filter
    show_empty: false
    entities:
      - entity: sensor.kuehlschrank
        conditions:
          - condition: numeric_state
            above: 8
    card:
      type: entities
      card_mod:
        style: |
          ha-card {
            background-color: rgba(255,10,10,1); /* Red */
            --primary-color: white;
          }          

  - type: entity-filter
    show_empty: false
    entities:
      - entity: sensor.batterie_sensor
        conditions:
          - condition: numeric_state
            below: 20
    card:
      type: entities
      card_mod:
        style: |
          ha-card {
            background-color: rgba(255,165,0,1); /* Orange */
            --primary-color: white;
          }          

  - type: entity-filter
    show_empty: false
    entities:
      - entity: input_boolean.muell_rausstellen
        conditions:
          - condition: state
            state: "on"
    card:
      type: entities
      card_mod:
        style: |
          ha-card {
            background-color: rgba(3,169,244,1); /* Blue */
            --primary-color: white;
          }          

Hopefully you’ll never miss anything again!

What’s Next

Are you already capturing all the sensor data and information relevant to you in your smart home? What about wind speed? In my article Integrating Wind Meters with ESPHome into Home Assistant I show you how easy it is.

→ In a follow-up video I show four advanced methods for integrating warnings into your dashboard even more elegantly — completely without card-mod: 4 Smart Dashboard Tricks – So You Never Miss Anything Again

Do you already have a dynamic electricity tariff? Tibber is one of the first providers to offer such a tariff in Germany. I’ve been a customer since October 2022, and it’s been a thoroughly positive experience. Tibber offers a clearly structured, modern app where you always have full oversight of your electricity tariff and costs. Pricing is very transparent: Tibber only charges what electricity actually costs on the exchange at any given moment (plus standard grid fees, etc.), plus a service fee of just €3.99 per month.

If Tibber sounds like an option for you, I’d be glad if you sign up via my referral link. That gets both you and me €100 for the Tibber Store, where you can buy various IoT hardware for your smart home. If you’re already a Tibber customer and haven’t used a referral link, you can still do so within 14 days — use code vkccaupl.

Have questions or still unsure? Don’t hesitate to reach out. I’m happy to help you figure out whether Tibber is the right choice for you. And if it turns out it isn’t — you can cancel Tibber month by month at any time!

Thank you for your support! It makes it possible for me to keep creating videos for you.

― Joachim