Change Label Card Text Color

Is it possible to change the color of the text in a Label Card using the Main UI in openHAB 3.0? I can change the background color but the text color seems attached to the theme (black in light mode, white in dark mode).

Did you solve this?

This is a snippet from a widget in OH3

- component: Label
                              config:
                              
                                actionPropsParameterGroup: header
                                text: '=(props.subheadline) ? props.subheadline : "Subheadline"'
                                style:
                                  white-space: nowrap
                                  text-overflow: ellipsis
                                  overflow: hidden
                                  color: rgba(255,255,255,.7)
                                  letter-spacing: .75px
                                  font-size: min(max(5px, 2.5vw), 18px)
1 Like

Hey there,

I’m trying to do the same thing.
I have an oh-label-card and I want a dark background but I can’t seem to figure out how to change to label color to something bright.

Couldn’t find a doc on it so I tried to guess the syntax and add something like textColor, labelColor, invertText (like in Home Page)… Nothing worked.

Is this a solution? I didn’t understand how to implement it inside a label card (as opposed to a custom widget).

Thank you very much…

There’s a themeDark parameter in f7-card that you can use on every “oh-*” card too. If set to true it will use the dark mode colors (background & text) for the card even in light mode.

Hi Yannick, thank you for the answer.

I have the following code:

- component: oh-label-card
                      config:
                        title: Time Of Day
                        item: TOD_TimeOfDay
                        icon: oh:tod
                        background: '=(items.TOD_TimeOfDay.state=="MORNING") ? "gold" :
                          (items.TOD_TimeOfDay.state=="DAY") ? "lightyellow" :
                          (items.TOD_TimeOfDay.state=="EVENING") ? "MediumBlue"
                          : (items.TOD_TimeOfDay.state=="NIGHT") ?
                          "MidnightBlue" : "black"'
                        iconUseState: true

My idea was to use the conditional expression from the background parameter also on your suggestion as so:

themeDark: '=(items.TOD_TimeOfDay.state=="MORNING") ? "false" :
                          (items.TOD_TimeOfDay.state=="DAY") ? "false" :
                          (items.TOD_TimeOfDay.state=="EVENING") ? "true"
                          : (items.TOD_TimeOfDay.state=="NIGHT") ?
                          "true" : "true"'

It didn’t change anything.
I can confirm that the background expression works as I expected.

So I tried just themeDark: true and it also didn’t work.
I tried to change theme settings at the “Help & About” section of MainUI.
I also tried to add this parameter to other cards with more simple configs.
Either way I couldn’t make the card change to dark theme.

Is there anything wrong with my syntax?

Thank you very much!

try false instead of "false"

Ok I figured out what I did wrong.

First, the parameter needs to be set in the config slot of the oh-grid-col component and not of the oh-label-card itself.
And second-

That is correct! thanks.

To illustrate see below the code for a label card that changes from dark to light according to some other dimmer item.

So, the wrong way (which I tried at first):

              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-label-card
                      config:
                        title: Testing Theme Change
                        label: Test
                        icon: oh:lightbulb
                        background: '=(items.TestDimmer.state < "50") ? "white" : "black"'
                        themeDark: '=(items.TestDimmer.state < "50") ? "false" : "true"'

And the right way:

              - component: oh-grid-col
                config:
                  themeDark: '=(items.TestDimmer.state < "50") ? false : true'
                slots:
                  default:
                    - component: oh-label-card
                      config:
                        title: Testing Theme Change
                        label: Test
                        icon: oh:lightbulb
                        background: '=(items.TestDimmer.state < "50") ? "white" : "black"'

I guess it’s still not a way to set any color to the label but it’s solves my problem and I hope OP’s as well. (@gatekeeper6838 )
Thanks everyone!!

Old topic, but I just had the same issue and managed to solve it (setting the label color of an embedded oh-label-card):

uid: LabelCardNoPaddingMultiColor
tags: []
props:
  parameters:
    - description: Font size of the label
      label: Font size
      name: fontSize
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
    - context: item
      description: An item for the color changes
      label: Color Item
      name: colorItem
      required: false
      type: TEXT
    - description: Threshold 1
      label: Threshold 1
      name: threshold1
      required: false
      type: INTEGER
    - description: Threshold 2
      label: Threshold 2
      name: threshold2
      required: false
      type: TEXT
    - description: Text Color 1
      context: color
      label: Text Color 1
      name: textColor1
      required: false
      type: TEXT
    - description: Text Color 2
      context: color
      label: Text Color 2
      name: textColor2
      required: false
      type: TEXT
    - description: Text Color 3
      context: color
      label: Text Color 3
      name: textColor3
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Mar 6, 2022, 3:01:13 PM
component: f7-card
config:
  outline: false
  noBorder: true
  padding: false
  noShadow: true
  style:
    --f7-safe-area-right: 0
    --f7-safe-area-left: 0
    color: '=(items[props.colorItem].state < Number(props.threshold1)) ? props.textColor1 : (items[props.colorItem].state < Number(props.threshold2)) ? props.textColor2 : props.textColor3'
slots:
  content:
    - component: oh-label-card
      config:
        noShadow: true
        item: =props.item
        fontSize: =props.fontSize
        style:
        stylesheet: >
          .item-content {
            padding: 0;
            line-height: 1;
          }

Pity that you can’t use props in the stylesheet section of the definition.

You can achieve the effect by using the style property to set a css variable from the props, and then use that variable in the stylesheet. Something like this:

- component: oh-label-card
  config:
    noShadow: true
    item: =props.item
    fontSize: =props.fontSize
    style:
      --widget-line-height: =props.lineHeight || 1
    stylesheet: >
      .item-content {
         padding: 0;
         line-height: var(--widget-line-height);
      }
2 Likes

Cool trick! Thanks for the hint.