# Ionic v4 ion-toolbar color not working

**URL:** <https://forum.ionicframework.com/t/ionic-v4-ion-toolbar-color-not-working/137587>\
**Category:** Ionic Framework\
**Created:** [August 7, 2018, 7:48am UTC](https://forum.ionicframework.com/t/ionic-v4-ion-toolbar-color-not-working/137587 "2018-08-07T07:48:05Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ronsterchan](https://avatars.discourse-cdn.com/v4/letter/r/a8b319/32.png) [@ronsterchan](https://forum.ionicframework.com/u/ronsterchan)\
**Post date:** [August 7, 2018, 7:48am UTC](https://forum.ionicframework.com/t/ionic-v4-ion-toolbar-color-not-working/137587/1 "2018-08-07T07:48:05Z")

</div>

The color attribute appears to have no effect, is that still the correct way of doing it?

```auto
     <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Header</ion-title>
        </ion-toolbar>
      </ion-header>

```

Here is the jsfiddle [https://jsfiddle.net/tah7z6g9/4/](https://jsfiddle.net/tah7z6g9/4/)

According to the docs, the color attribute should still be valid

> **[Ionic Docs - ion-toolbar](https://beta.ionicframework.com/docs/api/toolbar/)**
>
> Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

---

<div class="post-metadata">

**Author:** ![kocei](https://avatars.discourse-cdn.com/v4/letter/k/47e85d/32.png) [@kocei](https://forum.ionicframework.com/u/kocei)\
**Post date:** [August 7, 2018, 8:40am UTC](https://forum.ionicframework.com/t/ionic-v4-ion-toolbar-color-not-working/137587/2 "2018-08-07T08:40:03Z")

</div>

```auto
  .toolbar-title {
    color: #FFFFFF
  }

  .toolbar-background {
    background-color: #017EC0;
  }

```

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [August 7, 2018, 9:20am UTC](https://forum.ionicframework.com/t/ionic-v4-ion-toolbar-color-not-working/137587/3 "2018-08-07T09:20:52Z")

</div>

Ionic v4?

Have a try modifying the variable `--background` like [Ion-toolbar background-image Ionic 4](https://forum.ionicframework.com/t/ion-toolbar-background-image-ionic-4/135891/2?u=reedrichards)

---

<div class="post-metadata">

**Author:** ![pwespi](https://avatars.discourse-cdn.com/v4/letter/p/b3f665/32.png) [@pwespi](https://forum.ionicframework.com/u/pwespi)\
**Post date:** [August 7, 2018, 9:43am UTC](https://forum.ionicframework.com/t/ionic-v4-ion-toolbar-color-not-working/137587/4 "2018-08-07T09:43:12Z")

</div>

`<ion-toolbar color="primary">` should still work in v4. Maybe you’re missing the global CSS.  
See [https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md#including-the-css-files](https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md#including-the-css-files)

---

<div class="post-metadata">

**Author:** ![ronsterchan](https://avatars.discourse-cdn.com/v4/letter/r/a8b319/32.png) [@ronsterchan](https://forum.ionicframework.com/u/ronsterchan)\
**Post date:** [August 7, 2018, 9:49am UTC](https://forum.ionicframework.com/t/ionic-v4-ion-toolbar-color-not-working/137587/5 "2018-08-07T09:49:03Z")

</div>

@pwespi Yes that worked. Thanks!

---

<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:** [July 19, 2021, 9:25pm UTC](https://forum.ionicframework.com/t/ionic-v4-ion-toolbar-color-not-working/137587/6 "2021-07-19T21:25:59Z")

</div>

Closed on July 19, 2021, 9:25pm UTC