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

Hi:

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”) -> https://github.com/ionic-team/ionic/tree/c68292b78f69f2d7e1748371c34992af012d1db4/core/src/components/fab-button

Regarding styling shadow dom, you may be interested by tutorial like https://www.joshmorony.com/styling-a-shadow-dom-in-ionic-4/ or https://www.joshmorony.com/understanding-how-slots-are-used-in-ionic-4/

2 Likes

10X

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