Picture elements 'label with state text' color?

Configuration
1

Can anybody tell me the style configuration I need to change the text color for a ‘label with state text’ in lovelace?

I’ve got started with doing a floorplan thing on one of my views, and the background for the floorplan is white. On the other views I use themes so I only want to affect the text color of these labels, but on two of my themes the text color comes back as white.

In the same themes the basic icon color was white, which I was able to override with:

style:
  '--paper-item-icon-color': blue
  '--paper-item-icon-active-color': '#F9C536'

But I can’t work out how to override the color for the text in the labels if anyone can give me a clue please?

I’ve tried:

style:
  '--primary-text-color': black
  '--text-primary-color': black
  '--paper-grey-50': black
  '--label-badge-text-color': black

But it’s still white on white, which is kinda hard to read :smile:

Thanks in advance.

2

I use this in one of my cards:

style:
  background-image: url("/local/lovelace/images/weather-background-[[ sun.sun.state ]].png")
  background-size: 100% 400px
  --primary-text-color: var(--primary-text-color)
  --secondary-text-color: var(--secondary-text-color)
  --paper-item-icon-color: var(--primary-text-color) #small variation icons

and used the color name (green, red) before instead of the var(). maybe its just the quotes?

3

The quotes are added automatically by the ui editor thingy every time I click save, but maybe the clue is that you’ve used ‘secondary’ as one of your options.

I’ll give that a punt when I get back to my laptop :slight_smile:

4

a yes, I use yaml mode… sorry.

interested what your result will be. I specifically use these color settings to enable automatic theme-following in customizing. My example was from a weather card that uses 2 different backgrounds depending on sun.sun.state which are a lighter and a darker variant.
Fonts have to stick out.
44

54

2 Likes
5

I’ll let you know. :+1:

My new car got delivered after I posted this thread so lovelace will have to wait a bit :laughing:

2 Likes
6

OK - secondary text didn’t affect it either :slightly_frowning_face: - anybody else any other ideas?? :confused:

7

hmmm, too bad. Balloobs remark theming isn’t and won’t be supported today in another issue concerning themes and Custom-ui dent make me very happy, but sofar my badges are themed with these themes:

green_badge:
  label-badge-red: green
  label-badge-background-color: white
  label-badge-color: grey
  label-badge-text-color: green

they still show as I hoped they would:

23

8

I am using the following and it works: (simple put color: white) … see below

  • type: picture-elements
    image: /local/living_with_people.jpg
    title: Living room
    elements:
    - type: state-badge
    entity: binary_sensor.patio_slide_door
    style:
    top: 85%
    left: 10%
    –ha-label-badge-font-size: 1em
    opacity: 1.0
    color: green
4 Likes
9

Ace, I’ll have a look at that when I get a sec - thanks for the input :slight_smile:

10

This worked for me. Nice and simple.
color: black

Thanks! @fgonza2

11

Indeed, that was the answer, obviously forgot to mark the thread solved :smile: