OH3 list item badge color

Setup, Configuration and Use Beginners
1

Is anybody here who could point me to the right direction to find out how to use HEX color for badges in list items?
I can only use text color names like “red”, but would like to use HEX eg: “#80c93c”.
I’m also interested in using rgb() or hsb() like ways to set color for bagdes.

2

The f7 components that are the foundation for most of the OH widgets only accept the restricted list of color names in their color properties. The only way to use more advanced color settings is to use css. Sometimes it’s easy enough to just use the style property of the component, but in many cases you’ll have to resort to modifying the f7 css variables:

3

Thanks JustinG for the hint, now it works great with the following customization:

    - component: oh-list-item
      config:
        title: Office
        badge: " "
        style:
          --f7-badge-bg-color: "#c5b53b"

Actually it results in a color circle which is perfect for now! :sunglasses: