# Setting the toolbar background colour, the correct way?

**URL:** <https://forum.ionicframework.com/t/setting-the-toolbar-background-colour-the-correct-way/114030>\
**Category:** ionic-v3\
**Created:** [December 1, 2017, 8:46am UTC](https://forum.ionicframework.com/t/setting-the-toolbar-background-colour-the-correct-way/114030 "2017-12-01T08:46:03Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![DetectiveConan](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/detectiveconan/32/115487_2.png) [@DetectiveConan](https://forum.ionicframework.com/u/DetectiveConan)\
**Post date:** [December 1, 2017, 8:46am UTC](https://forum.ionicframework.com/t/setting-the-toolbar-background-colour-the-correct-way/114030/1 "2017-12-01T08:46:03Z")

</div>

Ionic 3. Set the tool bar background colour using $toolbar-background. But the menu button (ion-buttons) is displayed in its original colour. I could set the menu button colour separately, but what is the correct way to set the toolbar background colour once and for all?

![3LJ2k](https://global.discourse-cdn.com/ionicframework/original/3X/d/e/de148db8c52ab5d8e082ba9270afab285bbb9473.jpg)

---

<div class="post-metadata">

**Author:** ![wthijmen](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/wthijmen/32/113686_2.png) [@wthijmen](https://forum.ionicframework.com/u/wthijmen)\
**Post date:** [December 1, 2017, 8:47am UTC](https://forum.ionicframework.com/t/setting-the-toolbar-background-colour-the-correct-way/114030/2 "2017-12-01T08:47:25Z")

</div>

If you want to set a toolbar background for all pages.  
Simply change the CSS inside your **app.scss**. Probably you need a ugly `!important` to make this work.

---

<div class="post-metadata">

**Author:** ![mich356c](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mich356c/32/105794_2.png) [@mich356c](https://forum.ionicframework.com/u/mich356c)\
**Post date:** [December 1, 2017, 8:56am UTC](https://forum.ionicframework.com/t/setting-the-toolbar-background-colour-the-correct-way/114030/3 "2017-12-01T08:56:18Z")

</div>

I do this

```auto
<ion-toolbar color="primary">

```

**variables.scss**

```css
$colors: (
	primary: #0092cf,
	...
);

```

---

<div class="post-metadata">

**Author:** ![DetectiveConan](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/detectiveconan/32/115487_2.png) [@DetectiveConan](https://forum.ionicframework.com/u/DetectiveConan)\
**Post date:** [December 1, 2017, 9:56am UTC](https://forum.ionicframework.com/t/setting-the-toolbar-background-colour-the-correct-way/114030/4 "2017-12-01T09:56:29Z")

</div>

> [@mich356c](#):
>
> color=“primary”

It had the same effect. It changed the background colour but not that of the menu, resulting the same look as the screenshot of my OP.

---

<div class="post-metadata">

**Author:** ![DetectiveConan](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/detectiveconan/32/115487_2.png) [@DetectiveConan](https://forum.ionicframework.com/u/DetectiveConan)\
**Post date:** [December 1, 2017, 10:13am UTC](https://forum.ionicframework.com/t/setting-the-toolbar-background-colour-the-correct-way/114030/5 "2017-12-01T10:13:15Z")

</div>

> [@wthijmen](#):
>
> a toolbar background for all pages.

No, my point is not that. Setting $toolbar-background already changed the background colour of the Navbar for all tabs. The point is that the action menu’s background is not changed. I wanted to know a way to set the background colour for the whole Navbar, including the action menu.

---

<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, 10:01pm UTC](https://forum.ionicframework.com/t/setting-the-toolbar-background-colour-the-correct-way/114030/6 "2021-07-19T22:01:11Z")

</div>

Closed on July 19, 2021, 10:01pm UTC