Change textcolor of badge

Is there any option to change the color of the text in badges? The white text is only readable in the dark colors and I prefer badges in green, orange…

You can use the --f7-badge-text-color

component: oh-list-card
config: {}
    - component: oh-list-item
        badge: Red
        badgeColor: lime
          --f7-badge-text-color: red

Nice! didn’t knew we can use all these options!
Now we can make the badges round :slight_smile:
--f7-badge-size: 100px

Hi Justin

Seems I’m missing something, the text/icons are just white - difficult to read as above

Any tips?

I’m not entirely sure what’s going on there, but I have two guesses:

  1. You are trying to add the style config to an on-location-card. The property, equipment, and location cards are specialized cards with lots of additional code under the hood. It’s entirely possible that they don’t support, or supersede the style config.

  2. You have an oh-list-item as the child of a card which is not the intended use. All of the oh-X-item components are meant to be individual entries in a list (e.g., an oh-list) not stand-alone components. By trying to add this list component to a non-list, it’s possible that there are some unintended rendering issues.