How to change primary, secondary... colors


#1

I created custom theme, but I don’t see how I can change colors of the buttons. Right now when I use code:

<mbsc-button type="submit" block color="secondary">Next</mbsc-button>

I get mbsc colors which does not fit my theme.

How can I force mbsc to use my preset colors in Ionic or how can I change them for mbsc?

Thanks


#2

Hi Nikola,

The primary, secondary… etc. colors are taken from the mobiscroll style sheets. As we provide ready-to-use css, and not scss, the color variables cannot be changed.
If you’d like to change the color of a button, you will need to use custom css, e.g.:

<mbsc-button class="my-secondary-btn">My Button</mbsc-button>

The styles can go either in global.scss :

.mbsc-form .my-secondary-btn.mbsc-btn {  
  background: red;
}

Or inside the component’s scss (notice the ::ng-deep selector, which is needed to overcome the view encapsulation):

::ng-deep .my-secondary-btn.mbsc-btn { 
  background: red;
}

Let me know if this helps!

Best,
Isti