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.
Hi,
I use OH4 and simply want to change the text (value) color depending on item state.
If the front door is locked, text color should get green, else it should be red (or so).
No problem with background but text color is impossible for me.
This is the code i try things:
component: oh-label-card
config:
action: options
actionItem: tuerAntrieb_Lock_Target_Level
iconUseState: false
item: tuerAntrieb_Lock_State
background: '=(items.tuerAntrieb_Lock_State.state == "LOCKED") ? "green" : "orange"'
title: HaustĂĽr
//backgroundcolor: '=(items.tuerAntrieb_Lock_State.state == "LOCKED") ? "green" : "red"'
//color: blue
style:
//--f7-text-color: '=items.tuerAntrieb_Lock_State.state == "LOCKED" ? "green" : "yellow"'
--f7-text-color: red
//--widget-textColor: red
//color: blue
stylesheet: |
.item-content {
padding: 0;
color: var(--f7-text-color);
//color: blue
}
slots: null
Thank you very much!
Edi
If you are using an f7 card then setting the variable in the card style object of the card’s config would work. The style object, however isn’t evaluated in the oh-label-card so your css variable is not being set. You just need a container (e.g., a div component) around the card where you set the variable and then you’ll see the desired effect:
component: div
config:
style:
--f7-text-color: red
slots:
default:
- component: oh-label-card
config:
action: options
actionItem: tuerAntrieb_Lock_Target_Level
iconUseState: false
item: tuerAntrieb_Lock_State
background: '=(items.tuerAntrieb_Lock_State.state == "LOCKED") ? "green" : "orange"'
title: HaustĂĽr
stylesheet: |
.item-content {
padding: 0;
color: var(--f7-text-color);
}
Thx a lot, but if I use your code instead mine, I just see a white “-”.
How can I get this f7-cards?
1st Component is always oh-label-card and even if i write there f7-card it changes back… does the same with your “div”
I just copied your configuration for the card, ff you see only - then there is something wrong with your tuerAntrieb_Lock_State item. When I paste that code into my system (and change the item) it works.
All the f7 component are available. Going through the help docs may clear up some of your confusion:
Something is wrong the the rest of the widget configuration then (or possibly you are using a very old version of OH).
Thx!
I tried to copy your code into my existing oh-label-card, but I had to create a own widget with your code and then add this widget to the main ui. Works as I wanted.
Thanks a lot!
Nevertheless I find it annoying that its not simply possible to set such behavior in “normal” oh4 settings.
Should be a base function.
THX again an BR
1 Like