Background color for badges

Configuration Frontend
1

Is it possible to change the background of the badges at the top of the dashboard? I’ve noticed they update much faster than the buttons I’ve been using and would like to finally migrate over to the badge method.

For comparison I have a screenshot showing the badges and the buttons in a horizontal stack. For reference I’m currently using the ‘state: on color: …’ logic of the button card.

badges
badges598×179 24 KB

2

An example that covers several mods

type: custom:mod-card
card:
  type: custom:hui-entity-badge
  entity: sensor.living_room_humidity
card_mod:
  style:
    hui-entity-badge$:
        ha-badge$: |
             .badge {
                --ha-card-background: grey;
                --ha-badge-icon-size: 28px; 
                --badge-color: lime;
                --ha-badge-font-size: 15px;
                --ha-card-border-color: white;
                --ha-card-border-width: 2px;
                }

image
image216×121 3.12 KB

3

I can work with this. Thank you!

4

Could someone help get this working please.

type: custom:mod-card
card:
  type: custom:hui-entity-badge
  entity: sensor.met_office_local_warning
card_mod:
  style:
    hui-entity-badge$:
      ha-badge$: |
        .badge {
          --ha-badge-icon-size: 32px;
          --ha-badge-font-size: 14px;
          --ha-card-border-width: 3px;
        }
        [[
          const sev = (entity.attributes.severity || 'None').toLowerCase();
          let bg = '#1f7a1f', border = '#145214', icon = '#21c15a', text = '#ffffff';

          if (sev === 'red') {
            bg = '#d7263d'; border = '#8b0014'; icon = '#ff4d4d'; text = '#ffffff';
          } else if (sev === 'amber') {
            bg = '#ffb347'; border = '#c96a00'; icon = '#ff8c00'; text = '#1a1a1a';
          } else if (sev === 'yellow') {
            bg = '#ffea70'; border = '#caa500'; icon = '#caa500'; text = '#222222';
          } // else stays green for "None" or missing

          return `
            .badge {
              --ha-card-background: ${bg};
              --ha-card-border-color: ${border};
              --badge-color: ${icon};
              --label-badge-text-color: ${text};
            }
          `;
        ]]
5

this is that the current state says of the sensor i made

senor.met_office_local_warning

description: Amber warning of rain affecting West Midlands: Herefordshire, Shropshire, Staffordshire, Warwickshire, West Midlands Conurbation, Worcestershire valid from 1200 Fri 14 Nov to 2359 Fri 14 Nov
link: UK weather warnings - Met Office
severity: Amber
type: Rain
area: West Midlands
start: 1200 Fri 14 Nov
end: 2359 Fri 14 Nov
friendly_name: Met Office Local Warning

and here is the code of the sensor

- sensor:
      # Existing: Met Office Local Warning
      - name: Met Office Local Warning
        state: >
          {{ state_attr('event.met_office_warnings_for_west_midlands', 'title') or 'No warnings' }}
        attributes:
          description: >
            {{ state_attr('event.met_office_warnings_for_west_midlands', 'description') or 'None' }}
          link: >
            {{ state_attr('event.met_office_warnings_for_west_midlands', 'link') or 'None' }}
          severity: >
            {% set title = state_attr('event.met_office_warnings_for_west_midlands', 'title') %}
            {% if title %}
              {% if 'Red' in title %} Red
              {% elif 'Amber' in title %} Amber
              {% elif 'Yellow' in title %} Yellow
              {% else %} None
              {% endif %}
            {% else %} None
            {% endif %}
          type: >
            {% set title = state_attr('event.met_office_warnings_for_west_midlands', 'title') %}
            {% if title %}
              {{ title.split('warning of')[-1].split('affecting')[0] | trim | capitalize }}
            {% else %} None
            {% endif %}
          area: >
            {% set title = state_attr('event.met_office_warnings_for_west_midlands', 'title') %}
            {% if title %}
              {{ title.split('affecting')[-1] | trim }}
            {% else %} None
            {% endif %}
          start: >
            {% set desc = state_attr('event.met_office_warnings_for_west_midlands', 'description') %}
            {% if desc and 'valid from' in desc %}
              {{ desc.split('valid from')[1].split('to')[0] | trim }}
            {% else %} None {% endif %}
          end: >
            {% set desc = state_attr('event.met_office_warnings_for_west_midlands', 'description') %}
            {% if desc and 'to' in desc %}
              {{ desc.split('to')[-1] | trim }}
            {% else %} None {% endif %}
6

The code contains something looking like a JS code, must be jinja.

1 Like