[feature request] Icon and Text color

[KameDomotics]

Would it be possible to implement the ability to customize the color of the icon (even static) and the color of the text? Thanks

[VAFS001]

Yes please, as this just looks ugly:

[PulsarFX]

@VAFS001 With card-mod installed, you can do something like this:

style: |-
        ha-icon {
         color: black;
        }

This is a full example to build a big bar card with black icons:

type: custom:bar-card
entities:
  - entity: sun.sun
    attribute: elevation
    min: 0
    max: 90
positions:
  icon: inside
  name: inside
  indicator: 'off'
style: |-
  bar-card-card {
    min-height: 140px;
    font-size: 5rem;
    line-height: 5.5rem;
  }
  bar-card-background {
    height: 100% !important;
  }
  bar-card-name {
    font-size: 3rem;
    line-height: 3.5rem;
  }
  ha-icon {
   --mdc-icon-size: 3rem;
   line-height: 3.5rem;
   color: black;
  }

[mlarchet]

No one is answering the part about the text color. Right now I use the bar-card in a picture-element object, and the picture has a white background. Can't figure how to apply any custom style cause the element object already has a style property (for positionning).

[PulsarFX]

No one is answering the part about the text color. Right now I use the bar-card in a picture-element object, and the picture has a white background. Can't figure how to apply any custom style cause the element object already has a style property (for positionning).

Here is an example with text color:

  bar-card-name {
    font-size: 3rem;
    line-height: 3.5rem;
    color: orange;
  }
  ha-icon {
   --mdc-icon-size: 3rem;
   line-height: 3.5rem;
   color: red;
  }

(replace in the example code from above) if it doesn't work, try with color: orange !important;