How to change ion-fab-button background color? (ionic 4 beta)


I want to change the background color of ion-fab-button.

How to do it with scss? I want to change to color white or the hex #eee000.

I am in the ionic 4 beta version and the shadow don won’t let me access the scss:

ion-fab-button button .button-inner { background-color: #eee000 !important; }

How to do it?

10x in adsvance

1 Like

Use --background

Source: doc (see chapter “CSS Custom Properties”) ->

Regarding styling shadow dom, you may be interested by tutorial like or



That gave me the idea how to proper way to changing that.
I used:
–ion-color-base: white !important.

on other fab buttons --background worked but for some reason on the one I’m targeting diddn’t

1 Like

if anyone needs:

if you’ve applied color=“any” in your html → --background-activated will not work.

remove it from html and use this instead
–background: var(–ion-color-any);