Lovelace entity not available warnings legibility issue on dark themes (white text on bright yellow bg)

[SeanPM5]

Home Assistant release with the issue:

0.87.1

Browser and Operating System:

macOS 10.13.6 (17G5019) + Chrome Version 72.0.3626.109 (Official Build) (64-bit)

Description of problem:

For the entity not available alerts, it uses a bright yellow box with the themes "primary-text-color" (i think). This is a big problem for darker themes, since the primary-text-color on those is almost always pure white or something close to it. Bright yellow + pure white text is literally impossible to read.

Have reproduced with this issue with 19 different community themes as demonstrated in this brief screen recording: https://gfycat.com/BlindForkedGermanshorthairedpointer

here is one that you can test it on, used in these screenshots: midnight theme

Additional information:

After doing more testing, when card is type: entities it displays the text as I would expect, but other card types do not function the same way.

In this photo the "light" card type and "glance" card type are unreadable while the entities card type can be read fine. it's possible that more cards would have this issue but these are the two I noticed in my setup. Config below.

      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: light
                entity: light.kitchen_cabinets_stove
                icon: mdi:stove
                name: Kitchen Stove Lightstrip
              - type: light
                entity: light.kitchen_cabinets_sink
                icon: mdi:water-pump
                name: Kitchen Sink Lightstrip

      - type: vertical-stack
        cards:
          - type: glance
            columns: 4
            title: Transmission
            show_name: true
            entities:

              - entity: switch.transmission
                name: Speed Limit
                icon: mdi:traffic-light
                tap_action:
                  action: toggle

Lastly I think it might be a neat idea to allow these alert colors to be theme-able in the future.

frontend:
  themes:  
    example_theme:
      # Missing Entity Alerts
      missing-entity-background-color: '#000000'
      missing-entity-text-color: '#FFFFFF'

[iantrich]

Cool. Easy fix. I'm thinking we should go with the standard error card for this:

@balloob do you think we should go with the error card for this:

or should we create a warning card like we have for rows?