Ion-list background color

Hey everyone,

I have a problem regarding the ion-list. I use a ion-list for my ion-side-menu and I want to make the list dark, same as the bar-header. Can anyone tell me how I can do this?



You can use CSS to customize the properties of all ionic elements, including ion-list.

Thanks for your reply, I’m searching in the CSS file right now but I can’t seem to find it :confused:

You can define your own CSS rules in your own CSS file. Don’t overwrite rules in ionic.css or ionic.min.css! Your app will start breaking when you upgrade to a new version of Ionic.

If you’re unsure as to how to define CSS classes, I would respectfully suggest you read up on that and using tools like Firebug or Chrome inspector first before attempting to use Ionic.

@Gizmou I actually did this too, here’s an example of the css I used.

.dark {
  background-color: #3f4041 !important;
  color: #ffffff;
.dark .scroll-content {
  background-color: #3f4041 !important;
.dark .item {
  background-color: #3f4041;
  border: none;
  border-top: 1px solid #464646;
  border-bottom: 2px solid #333333;
  padding: 20px;
  max-height: none;
.dark .item:first-child {
  border-top: 1px solid black;
.dark .item:last-child {
  border-bottom: 1px solid #333333;
.dark .item.current {
  background-color: #262727 !important;
  border-top: 1px solid #464646 !important;
  border-bottom: 2px solid #333333 !important;
.dark .item.current p, .dark .item.current h3 {
  opacity: .7;
.dark h2,
.dark h3,
.dark p {
  color: #F0F1F1;

.dark-head {
  text-decoration: none;
1 Like

Here is an option similar to what I use, but it takes care of some additional needs of mine as well:

.item-complex .item-content, .item{
    background-color: #FFFF

I am personally controlling the color of the background behind the list / items. I set the above css selector to background-color:rgba(0,0,0,0); to make it transparent (there are obviously other ways to do this). Then add a class to the ion-view and give that the particular background that I want.

If you are testing on iOS, you should really look into the Safari web inspect options. Let me know if you need help with this.


thank you for all of your replies! I got it working. And @gylippus : elegant way of doing this! :slight_smile:

I have one more question about the ion-list @gylippus and @mhartington maybe you know a solution for this too :slight_smile:
I have a pretty big space between the list elements, is it possible to make this smaller? And is it possible to set another color to the frames of these list elements?

@Gizmou It really depends on how you are using list/item vs. ion-list/ion-item, but for the height of item elements, I use this for my specific needs:

.item {
    min-height: 56px;
.item-complex .item-content {
     padding: 10px 20px 10px 15px;

Again, that is very specific to my implementation but shows you where to look. By frames do you mean the borders for each list item?

.item {
    border:1px solid #XXXXXX;

Hey @gylippus thank you very much your code helped me a lot!

I’m having a strange problem in Safari where the background color of the side menu is white. The Safari inspector, however, shows whatever color I specified. The background color shows up fine in Chrome.


hi sir…
could you explain, where you get .item-complex, .item-content, .item?
thank you :smiley:

Waooh it works like charm. @gylippus :smile:

@gylippus This changes the background color of all ion-list/ion-items I use. Is there a way to have multiple lists with different background-colors?

I solved it just add your class in front of “.yourclass .item.complex .item-content” it also works with “.yourclass .item .item-content”

hello @Gizmou , your answer looks good and promising , can you display your <ion-list> code.
how do you implement a class in <ion-list>

Is it simple like this <ion-list class="dark">


Nice solution, it works for me, saved my time. Thanks a lot.