Customize header colors for a &ionicPopup

Question

I’m looking for a way to change the colors of the header $ionicPopup but I couldn’t find any material on the Internet. The only way I found was if I create my entire template in a separate file or insert a huge code into the parameter template.

Is there any way to change the header color directly via the $ionicPopup? If there is anyone can show me an example please?

Answer 1

I ended up finding the solution. The $ionicPopup allows me to use a set of specific classes from a parameter called cssClass. To solve my problem, I opened the browser DOM and identified the classes that are set to mount the popup, then created custom relationships in my css file that altered the default elements of the popup, thus:

.-positive .popup, 
.-popup-header-positive .popup .popup-head, 
.-popup-buttons-positive .popup .popup-buttons{
    border-color: #0c63ee;
    background-color: #387ef5;
    color: #fff;
}
.-popup-header-positive .popup .popup-title{
    color: #fff;
}

Answer 2

You can use the build of Ionic via SASS, for this you must activate the build mode of Ionic with the command:

$ ionic setup sass

this way becomes active the Ionic Sass and you can customize in real time the css of your application editing the file:

./scss/ionic.app.scss

which is found in the root folder of the app. This way editing the file it already automatically compiles the css files from the www folder.

Follow example link: https://www.youtube.com/watch?v=_frPHsE2PZk