search

kinghat / tabbed-card

a custom card for home assistant that utilizes tabs to segregate individual cards.
MIT License
87 stars 10 forks source link

Icon color of inactive tab is hardcoded / can't be changed #41

Closed ASNNetworks closed 1 year ago

ASNNetworks commented 1 year ago

Hi, an issue I noticed: the style option only affects the text-color, but not the icon. Could you also provide a variable to alter the icon color, for instance like: --mdc-tab-icon-color-default: red

Currently the text changes color, but the icon is hardcoded (the unselected tab). When I use a dark mode theme, the icon becomes invisible due to the hardcoded color.

201525155-e13e8b3c-1b3c-45ae-95bc-a38c9acfc920

kinghat commented 1 year ago

can you please paste your config and a screenshot of the issue?

ASNNetworks commented 1 year ago

I use this config:

                  - type: custom:tabbed-card
                    styles:
                      --mdc-theme-primary: var(--light-accent-color)
                      --mdc-tab-text-label-color-default: var(--text-color)
                    tabs:

Which alters the text color of the selected text+icons, to var(--light-accent-color) (which is a yellow color I defined in my theme.yaml) but only the text of the unselected tabs changes with --mdc-tab-text-label-color-default to var(--text-color) (which is a white color during the night through my theme.yaml). As you can see, the icon of the unselected tab doesn't change to white. When using a black background like me, the icon is not visible, since only the text will be changed. In my example you see the unselected tab where the text is white (like I configured) but the icon is invisible, since it's hardcoded a certain color.

NVIDIA_Share_NfUvquVXnL

Using inspect element I can see the icon is hardcoded with: color: var(--mdc-tab-color-default, rgba(0, 0, 0, 0.54)) which makes it invisible since I use a black background during the night.

Solution: allow us to use a theme color to change the icon color, or match it with the variable --mdc-tab-text-label-color-default so it's automatically matched with the text color of the unselected tab.

kinghat commented 1 year ago

in the styling section of the readme, theres a link to the tabs api which shows you what can be explicitly configured. you need to also set: --mdc-tab-color-default to your white color. if this fixes your issue, please close this.

if you would like to still have separate color for icons from text, im not saying i wouldnt implement it, but its best to open a post under the ideas category of the discussion forum to keep track of it.

ASNNetworks commented 1 year ago

Thanks, strange how I missed that link to the tabs api. All works now :)