Change textcolor of badge

Add-ons UIs
1

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…

2

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

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

image
image817×45 993 Bytes

3

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

4

Hi Justin

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

bed
bed928×392 24.6 KB

Any tips?

5

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.