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!!
1 Like
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.