Css for background color of ion-content and ion-menu

Ionic Framework ionic-v3
1

Goal: make the background-color of a page a custom color instead of white for all pages,
and do not let the color of the background page impact the color of the side menu.

Using outlandish colors here for illustration:

ion-content {
    background-color: blue !important;
}
ion-menu ion-content {
    background: orange !important;
}

There is a SASS variable for $background-color, but that sets everything,
and as far as I can tell, there aren’t any variables for what I am trying to do here.
Any suggestions?

1 Like
2

You will want to use .scroll-content instead of ion-content to set the background colour.

4 Likes
3

Hmm, both approaches seem to achieve the same effect. Why would .scroll-content preferable?

(P.S. Thanks for the nice tutorials you are putting out. Ionic is great, and their documentation is good too, yet in some cases it would be nice if Ionic docs went more in depth. Seeing as you just put out a tutorial on the ionic grid, I wonder what you think of this issue: https://github.com/driftyco/ionic/issues/9753)

1 Like
4

I know it’s been some time but i’d love to hear an answer, any ideas? I want to theme using the best tools and not randomly accessing classes. Isn’t there a way to style the elements themselves and not classes? Also, where should i do this, in src/app/app.scss or src/theme/variables.scss

5

.scroll-content is more specific so you don’t have to use !important. Ionic’s css is already very specific. You have to be more specific to overwrite it. Elements are less specific than classes, thats why you have to use !important in the example of @mg1075_ionic.

You can get very specific with elements:

ion-app ng-component ion-content {
  color: #fff;
  background-color: #000;
}

But even then ionics default css is more specific and overwrites it, because it uses classes instead of elements:

.content-md {
    color: #000;
    background-color: #fff;
}
.content-ios {
    color: #000;
    background-color: #fff;
}
1 Like
6

This little piece of information is really important! Thank you so much for your answer, it’ll help me a lot.

Is there a good guide for theming Ionic? The theming section of the official Ionic Documentation lacks all of this pieces of information that should be more known.

Anyways, how should i be overwriting stuff if i don’t want to screw up stuff that Ionic uses for cross-platform styling? For example, what’s exactly changing when using

@import "ionic.theme.default";

or

@import "ionic.theme.dark";

and where can i find a list of this stuff properly explained?

7

I don’t know if there is a good guide for theming referred to ionic.
But I can describe my way of styling ionic, maybe it can help you.

First of all I try to keep styling as simple as possible. Thats why I avoid using style tags in templates (html), page/component specific scss files and component decorator styles.

I use variables.scss for adjusting or adding sass variables.
I use app.scss for most of the other theming.
I prefer css classes over id and element selectors in my app.scss.

When I want to adjust ionic components, ether I use chrome dev tools to look what classes to change or I go to ionics github repository and check the code files for that component. I prefer the latter because you can see, if sass variables are used. With chrome dev tools you cannot see this. It also improves your understanding of ionic if you scan its source code often.

Last but not least I use the ionic docs and especially the overwrite sass variables page for finding sass variables I want to change.

If you want to know more about themes or sass functions and mixins used in ionic, node_modules/ionic-angular/themes is the place to go. Here you find for example the content that is imported by @import "ionic.theme.default"; in the file ionic.theme.default.scss. I think that import statement also loads ionic.theme.default.OS.scss depending on your operating system.

1 Like
8

Thank you so much for that. Nice hindsight on how theming workflow should be properly done, if anyone has more suggestions feel free to share, I’m curious on how you guys theme and style your apps.