Home Assistant dashboard: Styling

Here you find Home Assistant (lovelace) dashboard styling examples which you can easily add to your own dashboards.

---

Table of Contents

• Changing icon color
• Changing status color
• Changing background color

---

Changing icon color

You can change the color of an icon based on its value.

You need the extra HACS module lovelace-card-mod. Install it via this button

# Sourcecode by vdbrink.github.io
# Dashboard card code
type: entities
entities:
  - entity: sensor.knmi_weercode
    tap_action:
      action: url
      url_path: https://www.knmi.nl/nederland-nu/weer/waarschuwingen/overijssel
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
          {% if is_state('sensor.knmi_weercode', 'Code groen') %}
           #008000;
          {% elif is_state('sensor.knmi_weercode', 'Code rood') %}
           #ff4500;
          {% elif is_state('sensor.knmi_weercode', 'Code geel') %}
           #ffd700;
          {% elif is_state('sensor.knmi_weercode', 'Code oranje') %}
           #ffa500;
          {% else %}
           #44739e
          {% endif %}
         }
  

---

Changing status color

You can change the color of the sensor status based on its value.

Option 1: Use the extra HACS module lovelace-card-mod Install it via this button

# Sourcecode by vdbrink.github.io
# Dashboard card code
type: entities
entities:
  - entity: sensor.knmi_weercode
    tap_action:
      action: url
      url_path: https://www.knmi.nl/nederland-nu/weer/waarschuwingen/overijssel
    card_mod:
      style: |
        .text-content {
         color:
            {% if is_state('sensor.knmi_weercode', 'Code groen') %}
             #008000;
            {% elif is_state('sensor.knmi_weercode', 'Code rood') %}
             #ff4500;
            {% elif is_state('sensor.knmi_weercode', 'Code geel') %}
             #ffd700;
            {% elif is_state('sensor.knmi_weercode', 'Code oranje') %}
             #ffa500;
            {% else %}
             #44739e
            {% endif %}
        }
  

Option 2: Use the HACS module template-entity-row

Repo: https://github.com/thomasloven/lovelace-template-entity-row

Install it via this button

# Sourcecode by vdbrink.github.io
# Dashboard card code
type: entities
entities:
  - entity: sensor.temp1_temperature
    type: custom:template-entity-row
    state: |
      {{ states(config.entity)|round(0)}} °C
    style: |
      :host {
        --paper-item-icon-color:
         {% set level = states(config.entity)|round(0) %}
         {% if level >= 30 %} firebrick
         {% elif level >= 25 %} orange
         {% elif level < 10 %} blue
         {% else %} var(--primary-text-color)
         {% endif %} 
         ;
       }
       .state {
         color: 
         {% set level = states(config.entity)|round(0) %}
         {% if level >= 30 %} firebrick
         {% elif level >= 25 %} orange
         {% elif level < 10 %} blue
         {% else %} var(--primary-text-color)
         {% endif %} 
       }

---

Changing background color

You can change the color of the background based on its value.

You need the extra HACS module lovelace-card-mod. Install it via this button

# Sourcecode by vdbrink.github.io
# Dashboard card code
type: entities
entities:
  - entity: sensor.knmi_weercode
    tap_action:
      action: url
      url_path: https://www.knmi.nl/nederland-nu/weer/waarschuwingen/overijssel
    card_mod:
      style: |
        .text-content {
         color:
            {% if is_state('sensor.knmi_weercode', 'Code groen') %}
             #008000;
            {% elif is_state('sensor.knmi_weercode', 'Code rood') %}
             #ff4500;
            {% elif is_state('sensor.knmi_weercode', 'Code geel') %}
             #ffd700;
            {% elif is_state('sensor.knmi_weercode', 'Code oranje') %}
             #ffa500;
            {% else %}
             #44739e;
            {% endif %}
        }
  

---

^^ Top

<< See also my other Home Assistant tips and tricks

---

Top | Homepage | Best Buy Tips