Change Colors

[staffanwiljergardh]

I wonder if there are some examples where I can see how to change backcolor, text etc ??
I am very pleased with this card !
Thanks !

Staffanw

[staffanwiljergardh]

Hi!

I am trying to change the background color of this card to red, but I can't seem to get it to work.

Here is the YAML code I am currently using:

cycle_interval: 5
show_when_clear: false
clear_message: ""
clear_theme: success
alerts:
  - entity: light.alfa
    operator: "="
    state: "off"
    message: ALFA Lampor av
    priority: 1
    theme: success
    icon: ✅
    snooze_action:
      action: call-service
    name: Ser bra ut !
    auto_dismiss_after: 300
    badge_label: GÖTT !!
type: custom:alert-ticker-card
cycle_animation: fold
test_mode: true

[djdevil]

Hi! 👋 Thanks for the kind words!

There are a few ways to customise colours depending on what you want to change:

1 — Per-alert accent color (border + badge)
Each alert has a color property (added in v1.3.2.5) that overrides the border and badge colour for that specific alert:

alerts:

• entity: sensor.front_door
  theme: door
  color: "#ff4500" # any CSS value: hex, rgb, var(--error-color) …
  message: "Front door open"

The same field is available as a colour picker in the visual editor under each alert's icon section.

2 — Card background

card_background: true # uses your HA theme's card background or card_background: "rgba(20,20,30,0.85)" # any custom CSS colour / gradient

3 — HA theme variables
The card inherits your active HA theme automatically. Switching themes in HA settings changes the card's palette without any YAML change.

4 — Custom CSS via card_mod
For full control over text colour, font size, etc., you can use card-mod:

type: custom:alert-ticker-card
alerts:

• entity: sensor.front_door
  message: "Front door open"
  card_mod:
  style: |
  :host {
  --primary-text-color: #ffffff;
  font-size: 14px;
  }

Hope that covers what you need — feel free to reopen if you have a more specific case!