Hello all
I am still at a very basic stage of understanding yaml to create my own widgets, but I have been able to customize a few widgets based on inspiration I found in this community. I am encountering the following issue:
In search of a more intelligent way of using my KNX presence sensors, I have defined three basic items to identify three stages during the day (Day, Evening and Night). These items are updated dynamically via the rules engine.
Now, I want to display these stages in a Cell_Card that I have defined as follows:
uid: Cell_OperationMode_1
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- label: Background Color
name: bgcolor
required: false
type: TEXT
- label: Backgroundimage
name: bgimage
required: false
type: TEXT
- context: item
description: Dummy voor "Dag" modus
label: Dag
name: dag_status
required: false
type: TEXT
- context: item
description: Dummy voor "Avond" modus
label: Avond
name: avond_status
required: false
type: TEXT
- context: item
description: Dummy voor "Nacht" modus
label: Nacht
name: nacht_status
required: false
type: TEXT
- context: item
description: Dummy voor "Manueel" modus
label: Modus
name: operating_modus
required: false
type: TEXT
parameterGroups: []
timestamp: Jan 30, 2025, 4:50:44 PM
component: f7-card
config:
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
class:
- padding: 0px
height: 120px
margin-left: 5px
margin-right: 5px
noShadow: false
slots:
content:
- component: f7-block
config:
style:
display: flex
flex-direction: row
left: 16px
position: absolute
top: -5px
slots:
default:
- component: f7-icon
config:
f7: gear_alt
size: 18
style:
margin-right: 10px
- component: Label
config:
style:
font-size: 12px
margin-top: 0px
text: Modus
- component: f7-block
config:
style:
left: 16px
position: absolute
top: 60px
width: 100%
slots:
default:
- component: f7-row
config:
class:
- text-align-center
slots:
default:
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
style:
color: '=items[props.dag_status].state == "ON" ? "black" : "grey"'
font-weight: 400
margin-bottom: 8px
text: Dag
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
style:
color: '=items[props.avond_status].state == "ON" ? "black" : "grey"'
font-weight: 400
margin-bottom: 8px
text: Avond
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
style:
color: '=items[props.nacht_status].state == "ON" ? "black" : "grey"'
font-weight: 400
margin-bottom: 8px
text: Nacht
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
style:
font-weight: 400
margin-bottom: 8px
text: Manueel
- component: f7-row
config:
class:
- text-align-center
style:
margin-top: 0px
slots:
default:
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: f7-icon
config:
f7: sun_max
size: 30
style:
color: '=items[props.dag_status].state == "ON" ? "black" : "grey"'
margin-bottom: 8px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: f7-icon
config:
f7: sunset
size: 30
style:
color: '=items[props.avond_status].state == "ON" ? "black" : "grey"'
margin-bottom: 8px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: f7-icon
config:
f7: moon
size: 30
style:
color: '=items[props.nacht_status].state == "ON" ? "black" : "grey"'
margin-bottom: 8px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: oh-toggle
config:
item: =props.operating_modus
This works quite well, but because I have hardcoded the IF statement to display the icon and font in black, they are also black when the OH app switches to dark mode making it difficult to read. Is there any way to define the “black” in my code in a more dynamic way so that it is black in light theme, but white in dark theme, the same way all other text switches color depending on the theme?