How to customize color and theme of ionic popup

How to customize color and theme of ionic popup  

Some time we need to customize Ionic popup as per our theme.  for customization of popup first we need to understand popup sections.

You can see following image , we have five sections

•    Popup container - Its main container of popup.
•    Popup
•    Popup Head -  Its top part of popup
•    Popup Body -  Body part used to show detailed message.
•    Popup  Button 

For customization of Ionic Popup , we need to override ionic popup CSS classes , these class is implemented in "ionic.css" and we need to override it.

After override classes, if it not showing then use "!important" with CSS property.
.popup-container

.popup
.popup-head
.popup-title
.popup-body
.popup-buttons .button
.popup-buttons .button.activated

plnkr- http://plnkr.co/edit/OCT8t3kSXeATdZcQCVlq?p=preview

Customize Ionic  Popup container  - Here we changing  color of popup container

?

1 2 3	.popup-container {     background-color: palegoldenrod; }

.popup-container {
    background-color: palegoldenrod;
}

Output  - 



Customize Ionic  Popup window- Here we giving border to popup box.

?

1 2 3	.popup {     border: 5px solid red; }

.popup {
    border: 5px solid red;
}

Output-

Customize Ionic  Popup Head Section - Here we giving color to head section.

?

1 2 3	.popup-head {     background-color: #009689; }

.popup-head {
    background-color: #009689;
}

Output - 

Customize Ionic  Popup Head title Section - You can see "Ionic title" in image , now we changing head title.

?

1 2 3	.popup-title {     color: white; }

.popup-title {
    color: white;
}

Output -

Customize Ionic  Popup body color and body text - In popup-body class we can change body section.

See following image where "This is popup body" text showing.

?

1 2 3 4	.popup-body {     background-color: brown;     color: #e6b400; }

.popup-body {
    background-color: brown;
    color: #e6b400;
}

Output -

Customize Ionic  Popup button color and button text - At bottom we have one button , now we changing color and text  size of that button.

See green button and its "OK" text on following image.

?

1 2 3 4	.popup-buttons .button {     background-color: #4cd964;     font-size: 20px; }

.popup-buttons .button {
    background-color: #4cd964;
    font-size: 20px;
}

Output-

Customize Ionic  Popup button on mouse press stage - If you want change color of button when you press mouse over button , then use following class.

See black button on following image.

?

1 2 3	.popup-buttons .button.activated {     background-color: #111111; }

.popup-buttons .button.activated {
    background-color: #111111;
}

Output- 

 

 

Keywords -  ionic popup ,  ionic popup color customization, ionic popup customization