button-card Fix deprecated typography Home Assistant v2025.5

https://github.com/custom-cards/button-card/blob/2562b84360114ab6b4e9305c91503d47b2693957/src/styles.ts#L7

https://rc.home-assistant.io/blog/2025/04/29/release-20255/#backward-incompatible-changes

May 06 '25 07:05 pedolsky

Please advise how to update existing setup.

May 09 '25 06:05 numminorih-git

Open button-card.js and adjust --state-inactive-color

  :host {
    position: relative;
    display: block;
    --state-inactive-color: var(--state-icon-color);
  }

May 09 '25 06:05 pedolsky

Unfortunately it didn't help, icons remained "white" in the "off" state, and not the colors of the main theme (cache cleared, reboot didn't help)

May 09 '25 07:05 numminorih-git

Inactive timer and inactive light, according to state-icon-color: red defined in my theme:

May 09 '25 07:05 pedolsky

Open button-card.js and adjust --state-inactive-color

  :host {
    position: relative;
    display: block;
    --state-inactive-color: var(--state-icon-color);
  }

I made this change and I still see the white icons, do I have to do something else? is there a caching issue of some sort?

@pedolsky why isn't your suggested fix not taking effect?

May 09 '25 15:05 jjfs127

I have defined the color in my theme:

Inactive timer and inactive light, according to state-icon-color: red defined in my theme

I can't imagine that the old paper- will cause any problems, it's just a color declaration.

May 09 '25 15:05 pedolsky

same here all my buttoncards for swich entities in state "off" are white since 2025.5 I've tried fixing button-card.js as suggested, but without success. if i add ... state: value: “off” color: var( --state-icon-color) ... the previous color is back. this will be a tedious job for all my switch buttons to fix so i hope there is something else i can do.

br jon

May 10 '25 07:05 centeljon

hi, I've same problem. The fix not working

May 10 '25 08:05 19Francesco81

I can't reproduce that behaviour. Are you using a custom theme or the default Home Assistant theme? And have you all cleared the browser cache properly?

May 10 '25 08:05 pedolsky

I use the default theme and I cleared the cache. I changed the .js in www/ and restarted home assistant

May 10 '25 09:05 19Francesco81

I use default theme too. i cleared the browser cache, checked with firefox, chrome, edge, opera here's simple dash code with one button. without the state properties - button shows up in white.

views:
  - title: TestDash
    cards:
      - type: custom:button-card
        entity: switch.shellykitchenled
        color_type: label-card
        aspect_ratio: 8/1
        state:
          - value: 'off'
            color: var( --state-icon-color)

May 10 '25 12:05 centeljon

Here on IOS. Switch off is blue, switch on is yellow (default theme). AND manual installation way. Have you installed the card via Hacs? Then it could be that you have to alter the styles.ts, too.

May 10 '25 13:05 pedolsky

Here on IOS. Switch off is blue, switch on is yellow (default theme). AND manual installation way. Have you installed the card via Hacs? Then it could be that you have to alter the styles.ts, too.

where is styles.ts stored? i don't see it in www/community/button-card

May 10 '25 15:05 jjfs127

It's just a guess, I don't use Hacs.

May 10 '25 16:05 pedolsky

Here on IOS. Switch off is blue, switch on is yellow (default theme). AND manual installation way. Have you installed the card via Hacs? Then it could be that you have to alter the styles.ts, too.

where is styles.ts stored? i don't see it in www/community/button-card

Up... wherr is stiles.ts. I use Hacs

May 10 '25 16:05 19Francesco81

Editing button-card.js has no effect. Referencing /local/community/button-card/button-card.js I see the modification, but has no effect. Browser cache deleted, device restarted, nothing.

May 11 '25 01:05 lmagyar

If you also have a button-card.js.gz file in that folder then you need to delete it and recreate.

May 15 '25 08:05 gedger

Workaround fixed my hacs install. I had to edit 3 versions of the file, 2 in the regular file system and one inside the gz archive file. Following a restart and clearing cache it's all working again.

May 15 '25 18:05 xpenno255

If you also have a button-card.js.gz file in that folder then you need to delete it and recreate.

I did that, no effect.

I had to edit 3 versions of the file, 2 in the regular file system and one inside the gz archive file.

I can find only 1 button-card.js in the file system:

homeassistant:/config# find / -name button-card.js
/config/www/community/button-card/button-card.js

May 15 '25 21:05 lmagyar

I only had the same one file on my system. No need to restart but you must to clear the cache in your browser or in the companion App (debug menu).

May 15 '25 21:05 gedger

I only had the same one file on my system. No need to restart but you must to clear the cache in your browser or in the companion App (debug menu).

I've even tried different browsers, eg. my FF is nuked after each exit, exactly for testing situations like this, but no change. I've downloaded even the resource url /hacsfiles/button-card/button-card.js?hacstag=..., I saw the modification, but no change.

I gave up.

May 15 '25 21:05 lmagyar

Open button-card.js and adjust --state-inactive-color
  :host {
    position: relative;
    display: block;
    --state-inactive-color: var(--state-icon-color);
  }
I made this change and I still see the white icons, do I have to do something else? is there a caching issue of some sort?

@pedolsky why isn't your suggested fix not taking effect?

I only had the same one file on my system. No need to restart but you must to clear the cache in your browser or in the companion App (debug menu).

These two things helped and worked for me. Thank you ❤️

May 18 '25 06:05 jennilicious

Can you please tell me which “two things” you fixed? I’ll very confused. I think one is to add state-inactive-color in button-card.js file, correct? What is the 2nd thing you need to fix or change?

Thank you

Open button-card.js and adjust --state-inactive-color
  :host {
    position: relative;
    display: block;
    --state-inactive-color: var(--state-icon-color);
  }
I made this change and I still see the white icons, do I have to do something else? is there a caching issue of some sort? @pedolsky why isn't your suggested fix not taking effect?
I only had the same one file on my system. No need to restart but you must to clear the cache in your browser or in the companion App (debug menu).

These two things helped and worked for me. Thank you ❤️

Jun 01 '25 23:06 rog889

same here all my buttoncards for swich entities in state "off" are white since 2025.5 I've tried fixing button-card.js as suggested, but without success. if i add ... state: value: “off” color: var( --state-icon-color) ... the previous color is back. this will be a tedious job for all my switch buttons to fix so i hope there is something else i can do.

br jon

Can you please show me the example where you put this "off" value and 3-lines statement in button-card.js file?

Do I put it in "host" here below?

:host { position: relative; display: block; --state-inactive-color: var(--state-icon-color); }

Jun 02 '25 00:06 rog889

The instructions are all there but to summarise.

Find the folder with the button-card.js file in it. Edit the button-card.js and make the correction. If there is a button-card.js.gz file then delete it. If you are using the companion App then go to the settings/companion app/debugging menu and reset the front end cache. If you are using a browser then find the menu to reset the cache or empty the caches, on safari this is Develop/Empty Caches

If this doesn't work then have you applied any styles within the yaml file or used card_mod? Can't help any further.

Jun 02 '25 08:06 gedger

The instructions are all there but to summarise.

Worked perfectly for me after updating from 2025.4.4 to 2025.5.3. Thanks!

Jun 02 '25 12:06 jacotec

It works!!! Thank you for the detailed summary!!! You are so awesome!! 👏🏻

Thanks again!

The instructions are all there but to summarise.

Find the folder with the button-card.js file in it. Edit the button-card.js and make the correction. If there is a button-card.js.gz file then delete it. If you are using the companion App then go to the settings/companion app/debugging menu and reset the front end cache. If you are using a browser then find the menu to reset the cache or empty the caches, on safari this is Develop/Empty Caches

If this doesn't work then have you applied any styles within the yaml file or used card_mod? Can't help any further.

Jun 02 '25 19:06 rog889

Is there anything holding up the PR to fix this properly?

Jun 02 '25 22:06 jeremysherriff

Unfortunately this highly useful integration is no longer maintained, check the front page. That’s why there are so many issues.

I’ve been hoping that someone with the necessary skills would take it on but it looks like it’s time to consider an alternative.

Jun 03 '25 09:06 gedger

That's true, but since the last version is from February 2024, I have hope that RomRider will still do something to the code from time to time.

Jun 03 '25 10:06 pedolsky