How to change color of a floating action button in native app?

1
Hello,   I would like to change the color of my Floating Action Button in a my native app. At the moment, I can only change the preseted style of the button 'Success, Secondary, ect, ...'. I tried to change the backgroundColor with some js, but it didn't work.   Does anyone have a solution for this?   Thanks for any help.
asked
3 answers
1

Hello, 

 

You can use the following JScript in your main.js file:

// Floating Action Button Styles
export const myFloatingActionButton = {
    button: {
        borderColor: "red",
        backgroundColor: "red"
    }
};

 

And apply this custom Style in your Floating button widget (scroll right to see the whole image)

image.png

 

 

The result is like below (I have the darkmode enabled):

image.png

answered
0

Hi, 

Go to the Custom-variables.scss

image.png

 

You will find this:

Go to line 21 en f.e. change the color to #26e586, it will turn green now

image.png

 

Al the brand-primary colors are set to the new color, including the button. If you want to change more specific, go to the advanced part of this sheet, line 226. Here you can find more specific things on buttons. Just try and play with it! Good luck.

 

If you like my answer, please feel free to accept ;-)

 

 

 

 

answered
0

I tested it. I run the app, View App on your device, and it worked. 

Afbeelding van WhatsApp op 2024-02-08 om 10.28.04_9b496583.jpg

answered