How to change color of "--f7-theme-color" of widget due to items state

Setup, Configuration and Use Widgets
1

Hello!
I have a widget based on component f7-card.
If I make --f7-theme-color gray, for example:

component: f7-card
config:
  class:
    - no-padding
  outline: true
  style:
    --f7-theme-color: gray
  title: =props.title
slots:
  default:

It changes color in widget from default to gray.
01

But if I use this:

component: f7-card
config:
  class:
    - no-padding
  outline: true
  style:
    --f7-theme-color: '=(items[props.itemPower].state === "ON") ? green : gray'
  title: =props.title
slots:
  default:

The color stays default. No green and no gray colors.
02

I want that when my widget is ON (by itemPower), the used color is default, else is gray. How can I do this?

2

you do not need ’ when you omit whitespaces around the colon :
But you have to use ’ for color codes

--f7-theme-color: =(items[props.itemPower].state === "ON") ? 'green':'gray'
1 Like
3

So simple error(. Thank`s a lot!