Ion content color is a mess


An ion-content seems to have default color of white or transparent.
if I had a ion-card I don’t get the gray background the demo has.

When I try to change the ion-content color
.ion-page > ion-content{
background-color: #F3F3F3;

Modals start to have their background gray, which shows gray between input items.

How do I make screens with cards on them have gray behind the cards, but not gray behind the modals and input items.


In my theme’s I do the following:

.ios, .md, .wp {

  .blue-theme {


    .scroll-content {
      background-color: $lightgray;



For example:

You can set the current theme in your app.component.html:

<ion-nav main [root]="rootPage" #content swipeBackEnabled="false" [class]="theme"></ion-nav>

You can toggle the theme in your app.component.ts:


  public toggleTheme() {

    if (this.theme === 'blue-theme') {
      this.theme = 'orange-theme';
    } else {
      this.theme = 'blue-theme';