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

Ionic Framework
1

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
2

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/

3 Likes
3

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

1 Like
4

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);