Dynamically change icon and font color depending on item state

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?


The MainUI and most of the widgets are based off of the f7 user interface library. That library defines many of the styles across the entire user interface. This includes much of the coloration between the light and dark modes. You can just piggyback on those settings.

In this case --f7-text-color is the css variable defined by the library that will always be the up-to-date text color and var(...) is the standard css method for accessing the value of a variable. So, instead of "black" in your expression, you would use "var(--f7-text-color)".

Thank you! I can indeed confirm that this works perfectly. Thanks for pointing out what there “var(…)” expressions signify, because I have little to no notions of CSS.