I don’t know whether this will impact your question about the background color or not, but I’m seeing several Ionic elements outside of what I would consider their comfort zones:
-
<ion-item>s are generally inside<ion-list>s. -
<ion-card>s are for organizing collections of information for display in a summary mode - they aren’t arbitrary catch-all elements suitable for laying out a login form - I don’t see the purpose of the
<ion-grid>here (well, frankly, anywhere, but that’s a separate discussion). If all you’re trying to do is center the form in the viewport, that can be done just using flexbox.
So, if we get rid of the card, either get rid of the items or wrap them within an <ion-list>, and lay the form out with ordinary CSS instead of a one-element “grid”, do we still have the issue with the background colors, or does it magically go away?