# Ion-list background color

**URL:** <https://forum.ionicframework.com/t/ion-list-background-color/2774>\
**Category:** ionic-v1\
**Created:** [April 8, 2014, 6:56pm UTC](https://forum.ionicframework.com/t/ion-list-background-color/2774 "2014-04-08T18:56:00Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gizmou](https://avatars.discourse-cdn.com/v4/letter/g/8c91f0/32.png) [@Gizmou](https://forum.ionicframework.com/u/Gizmou)\
**Post date:** [April 8, 2014, 6:56pm UTC](https://forum.ionicframework.com/t/ion-list-background-color/2774/1 "2014-04-08T18:56:01Z")

</div>

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?

cheers

-Gizmou

---

<div class="post-metadata">

**Author:** ![coen\_warmer](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/coen_warmer/32/64036_2.png) [@coen\_warmer](https://forum.ionicframework.com/u/coen_warmer)\
**Post date:** [April 8, 2014, 6:58pm UTC](https://forum.ionicframework.com/t/ion-list-background-color/2774/2 "2014-04-08T18:58:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Gizmou](https://avatars.discourse-cdn.com/v4/letter/g/8c91f0/32.png) [@Gizmou](https://forum.ionicframework.com/u/Gizmou)\
**Post date:** [April 8, 2014, 7:01pm UTC](https://forum.ionicframework.com/t/ion-list-background-color/2774/3 "2014-04-08T19:01:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![coen\_warmer](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/coen_warmer/32/64036_2.png) [@coen\_warmer](https://forum.ionicframework.com/u/coen_warmer)\
**Post date:** [April 8, 2014, 7:10pm UTC](https://forum.ionicframework.com/t/ion-list-background-color/2774/4 "2014-04-08T19:10:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [April 8, 2014, 7:10pm UTC](https://forum.ionicframework.com/t/ion-list-background-color/2774/5 "2014-04-08T19:10:30Z")

</div>

@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;
}

```

---

<div class="post-metadata">

**Author:** ![gylippus](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gylippus/32/7781_2.png) [@gylippus](https://forum.ionicframework.com/u/gylippus)\
**Post date:** [April 8, 2014, 7:17pm UTC](https://forum.ionicframework.com/t/ion-list-background-color/2774/6 "2014-04-08T19:17:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Gizmou](https://avatars.discourse-cdn.com/v4/letter/g/8c91f0/32.png) [@Gizmou](https://forum.ionicframework.com/u/Gizmou)\
**Post date:** [April 8, 2014, 11:12pm UTC](https://forum.ionicframework.com/t/ion-list-background-color/2774/7 "2014-04-08T23:12:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Gizmou](https://avatars.discourse-cdn.com/v4/letter/g/8c91f0/32.png) [@Gizmou](https://forum.ionicframework.com/u/Gizmou)\
**Post date:** [April 9, 2014, 12:49am UTC](https://forum.ionicframework.com/t/ion-list-background-color/2774/8 "2014-04-09T00:49:05Z")

</div>

I have one more question about the ion-list @gylippus and @mhartington maybe you know a solution for this too 🙂  
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?

---

<div class="post-metadata">

**Author:** ![gylippus](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gylippus/32/7781_2.png) [@gylippus](https://forum.ionicframework.com/u/gylippus)\
**Post date:** [April 9, 2014, 12:14pm UTC](https://forum.ionicframework.com/t/ion-list-background-color/2774/9 "2014-04-09T12:14:52Z")

</div>

@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;
}
```

---

<div class="post-metadata">

**Author:** ![Gizmou](https://avatars.discourse-cdn.com/v4/letter/g/8c91f0/32.png) [@Gizmou](https://forum.ionicframework.com/u/Gizmou)\
**Post date:** [April 9, 2014, 7:01pm UTC](https://forum.ionicframework.com/t/ion-list-background-color/2774/10 "2014-04-09T19:01:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![djensen47](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/djensen47/32/65072_2.png) [@djensen47](https://forum.ionicframework.com/u/djensen47)\
**Post date:** [July 1, 2014, 12:30am UTC](https://forum.ionicframework.com/t/ion-list-background-color/2774/11 "2014-07-01T00:30:57Z")

</div>

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.

Thoughts?

---

<div class="post-metadata">

**Author:** ![razmi](https://avatars.discourse-cdn.com/v4/letter/r/e0b2c6/32.png) [@razmi](https://forum.ionicframework.com/u/razmi)\
**Post date:** [January 23, 2015, 3:17am UTC](https://forum.ionicframework.com/t/ion-list-background-color/2774/12 "2015-01-23T03:17:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![lemetis](https://avatars.discourse-cdn.com/v4/letter/l/cab0a1/32.png) [@lemetis](https://forum.ionicframework.com/u/lemetis)\
**Post date:** [August 4, 2015, 5:59pm UTC](https://forum.ionicframework.com/t/ion-list-background-color/2774/13 "2015-08-04T17:59:33Z")

</div>

Waooh it works like charm. @gylippus 😄

---

<div class="post-metadata">

**Author:** ![Julia\_Z](https://avatars.discourse-cdn.com/v4/letter/j/ecccb3/32.png) [@Julia\_Z](https://forum.ionicframework.com/u/Julia_Z)\
**Post date:** [April 22, 2016, 7:58am UTC](https://forum.ionicframework.com/t/ion-list-background-color/2774/14 "2016-04-22T07:58:31Z")

</div>

@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?

---

<div class="post-metadata">

**Author:** ![Julia\_Z](https://avatars.discourse-cdn.com/v4/letter/j/ecccb3/32.png) [@Julia\_Z](https://forum.ionicframework.com/u/Julia_Z)\
**Post date:** [April 25, 2016, 8:20am UTC](https://forum.ionicframework.com/t/ion-list-background-color/2774/15 "2016-04-25T08:20:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![thaker](https://avatars.discourse-cdn.com/v4/letter/t/b487fb/32.png) [@thaker](https://forum.ionicframework.com/u/thaker)\
**Post date:** [May 23, 2016, 8:36am UTC](https://forum.ionicframework.com/t/ion-list-background-color/2774/16 "2016-05-23T08:36:48Z")

</div>

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">`

Thanks

---

<div class="post-metadata">

**Author:** ![gppraveena](https://avatars.discourse-cdn.com/v4/letter/g/b38774/32.png) [@gppraveena](https://forum.ionicframework.com/u/gppraveena)\
**Post date:** [April 28, 2017, 4:55pm UTC](https://forum.ionicframework.com/t/ion-list-background-color/2774/17 "2017-04-28T16:55:19Z")

</div>

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