F7 icons

Add-ons UIs
1

Hello is there a way to give the icon color of the f7 chip one of the non default colors

 - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              style:
                height: 30px
                position: relative
            slots:
              default:
                - component: f7-col
                  slots:
                    default:
                      - component: f7-chip
                        config:
                          iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
                          iconF7: alarm
                          iconSize: 20
                          style:
                            --f7-chip-bg-color: rgba(255, 255, 255, 0)
                            font-size: 16px
                            margin-bottom: 10px
                          text: =items[props.item_update].displayState

I want to move away from the blue color in the dark theme but i cant set a custom color

2

There is no way to use a non-default color by setting anything using the iconColor property.

The icon on the chip is inside a div element with a class of chip-media. With this information you can add a stylesheet property to the chip and then use css to set any color you want.

- component: f7-chip
  config:
    stylesheet: >
      .chip-media {
        background: css color definition here;
      }
    rest of config....
1 Like
3

thanks a lot thats exactly what i need, just made a css variable for the stylesheet color (found that solution in an other post of you)

 default:
          - component: f7-row
            config:
              style:
                height: 30px
                position: relative
            slots:
              default:
                - component: f7-col
                  slots:
                    default:
                      - component: f7-chip
                        config:
                          style:
                            --custom-icon-color: "=themeOptions.dark === 'dark' ? 'blue' : '#ff6b22'"
                            --f7-chip-bg-color: rgba(255, 255, 255, 0)
                            font-size: 16px
                          stylesheet: |
                            .chip-media {color: var(--custom-icon-color);}
                          iconF7: alarm
                          iconSize: 20
                          text: =items[props.item_update].displayState