# Ionic 4: custom colors problem

**URL:** <https://forum.ionicframework.com/t/ionic-4-custom-colors-problem/162734>\
**Category:** Ionic Framework\
**Created:** [April 29, 2019, 6:24pm UTC](https://forum.ionicframework.com/t/ionic-4-custom-colors-problem/162734 "2019-04-29T18:24:51Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![rafaeldatalan](https://avatars.discourse-cdn.com/v4/letter/r/e9c0ed/32.png) [@rafaeldatalan](https://forum.ionicframework.com/u/rafaeldatalan)\
**Post date:** [April 29, 2019, 6:24pm UTC](https://forum.ionicframework.com/t/ionic-4-custom-colors-problem/162734/1 "2019-04-29T18:24:52Z")

</div>

When I was using Ionic 3, if I changed the color of ion-toolbar like this:  
`ion-toolbar color="customcolor"`, the text color of title would change to stay visible. Example: if the color of toolbar was dark, the color of text would be light.

This is gone in Ionic 4. I can’t make it work.  
Anyone has any ideia what is wrong?

---

<div class="post-metadata">

**Author:** ![LacOniC](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/laconic/32/130566_2.png) [@LacOniC](https://forum.ionicframework.com/u/LacOniC)\
**Post date:** [April 29, 2019, 8:42pm UTC](https://forum.ionicframework.com/t/ionic-4-custom-colors-problem/162734/2 "2019-04-29T20:42:34Z")

</div>

Toolbar has --color property. Try something like that;

```auto
ion-toolbar{
--color: var(--ion-color-custom);
}

```

---

<div class="post-metadata">

**Author:** ![jusliong](https://avatars.discourse-cdn.com/v4/letter/j/c67d28/32.png) [@jusliong](https://forum.ionicframework.com/u/jusliong)\
**Post date:** [April 30, 2019, 5:12am UTC](https://forum.ionicframework.com/t/ionic-4-custom-colors-problem/162734/3 "2019-04-30T05:12:52Z")

</div>

To my understanding you need to use `<ion-toolbar color="{{ customcolor }}">` and `customcolor` needs to be an existing variable in your Typescript file

---

<div class="post-metadata">

**Author:** ![rafaeldatalan](https://avatars.discourse-cdn.com/v4/letter/r/e9c0ed/32.png) [@rafaeldatalan](https://forum.ionicframework.com/u/rafaeldatalan)\
**Post date:** [April 30, 2019, 11:19am UTC](https://forum.ionicframework.com/t/ionic-4-custom-colors-problem/162734/4 "2019-04-30T11:19:44Z")

</div>

In fact, no. If I use a pre-existing color from variables.css (primary, secondary, warning), it works very well (the color is changed and the text color changes accordingly).

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

```

If I use a color created in the same variables.css like this:

```auto
.ion-color-animal {
  --ion-color-base: #ccf2ff;
  --ion-color-base-rgb: 204,242,255;
  --ion-color-base-contrast: #000000;
  --ion-color-base-contrast-rgb: 0,0,0;
  --ion-color-base-shade: #b4d5e0;
  --ion-color-base-tint: #d1f3ff;
}

```

And use in the color tag `<ion-toolbar color="animal">`, the color is changed but text color stays dark.

---

<div class="post-metadata">

**Author:** ![rafaeldatalan](https://avatars.discourse-cdn.com/v4/letter/r/e9c0ed/32.png) [@rafaeldatalan](https://forum.ionicframework.com/u/rafaeldatalan)\
**Post date:** [April 30, 2019, 11:20am UTC](https://forum.ionicframework.com/t/ionic-4-custom-colors-problem/162734/5 "2019-04-30T11:20:18Z")

</div>

I’ll try that. Thanks you.

---

<div class="post-metadata">

**Author:** ![rafaeldatalan](https://avatars.discourse-cdn.com/v4/letter/r/e9c0ed/32.png) [@rafaeldatalan](https://forum.ionicframework.com/u/rafaeldatalan)\
**Post date:** [April 30, 2019, 7:00pm UTC](https://forum.ionicframework.com/t/ionic-4-custom-colors-problem/162734/8 "2019-04-30T19:00:25Z")

</div>

This way also does not work

---

<div class="post-metadata">

**Author:** ![jusliong](https://avatars.discourse-cdn.com/v4/letter/j/c67d28/32.png) [@jusliong](https://forum.ionicframework.com/u/jusliong)\
**Post date:** [May 1, 2019, 1:28pm UTC](https://forum.ionicframework.com/t/ionic-4-custom-colors-problem/162734/9 "2019-05-01T13:28:04Z")

</div>

I think you confused the color attribute in  
`<ion-toolbar color="primary">` with the color property in CSS.

When you see the ‘Properties’ of color in Ionic UI documentation, it is referring to usages like  
`<ion-toolbar color="primary">` and it only takes in specific string values as specified in the documentation (primary, secondary, danger etc.)

The CSS custom properties in the documentation `--color` is meant to be used when for example you assign a class to the element like:

```auto
<ion-toolbar class="toolbar">

.toolbar {
    --color: var(--ion-color-custom);
}

```

Otherwise it is me being really confused here 🤔

---

<div class="post-metadata">

**Author:** ![nesbhm](https://avatars.discourse-cdn.com/v4/letter/n/df705f/32.png) [@nesbhm](https://forum.ionicframework.com/u/nesbhm)\
**Post date:** [May 2, 2019, 7:42am UTC](https://forum.ionicframework.com/t/ionic-4-custom-colors-problem/162734/10 "2019-05-02T07:42:37Z")

</div>

Hi, I also have troubles with custom colors in toolbar, but I think there is an issue.  
To be sure, try it first on chrome for example with **ionic serve** , you should see your custom color is applied. If it is, then check your Android version your testing on :

> <https://github.com/ionic-team/ionic/issues/17781>

---

<div class="post-metadata">

**Author:** ![rafaeldatalan](https://avatars.discourse-cdn.com/v4/letter/r/e9c0ed/32.png) [@rafaeldatalan](https://forum.ionicframework.com/u/rafaeldatalan)\
**Post date:** [May 2, 2019, 11:17am UTC](https://forum.ionicframework.com/t/ionic-4-custom-colors-problem/162734/11 "2019-05-02T11:17:53Z")

</div>

Ionic documentation [HERE](https://ionicframework.com/docs/theming/advanced#adding-colors) says custom colors can be used the same way as the default ones. Also, I already tried to use the custom color in a CSS class like you described and the same problem occurs. Anyway, thanks for trying to help me

---

<div class="post-metadata">

**Author:** ![rafaeldatalan](https://avatars.discourse-cdn.com/v4/letter/r/e9c0ed/32.png) [@rafaeldatalan](https://forum.ionicframework.com/u/rafaeldatalan)\
**Post date:** [May 2, 2019, 11:28am UTC](https://forum.ionicframework.com/t/ionic-4-custom-colors-problem/162734/12 "2019-05-02T11:28:04Z")

</div>

Hi, when using ionic serve on browser I also have the same issue: the custom color is applied but the color of ion-title does not change.  
My device has 8.1 version of Android (Oreo).  
Thanks.

---

<div class="post-metadata">

**Author:** ![LacOniC](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/laconic/32/130566_2.png) [@LacOniC](https://forum.ionicframework.com/u/LacOniC)\
**Post date:** [May 3, 2019, 5:45am UTC](https://forum.ionicframework.com/t/ionic-4-custom-colors-problem/162734/13 "2019-05-03T05:45:07Z")

</div>

Ok. This works:

To variables.scss (under :root)

```auto
  --ion-color-animal: #ccf2ff;
  --ion-color-animal-rgb: 204,242,255;
  --ion-color-animal-contrast: #000000;
  --ion-color-animal-contrast-rgb: 0, 0, 0;
  --ion-color-animal-shade: #b4d5e0;
  --ion-color-animal-tint: #d1f3ff;

```

To global.scss:

```auto
.ion-color-animal {
  --ion-color-base: var(--ion-color-animal) !important;
  --ion-color-base-rgb: var(--ion-color-animal-rgb) !important;
  --ion-color-contrast: var(--ion-color-animal-contrast) !important;
  --ion-color-contrast-rgb: var(--ion-color-animal-contrast-rgb) !important;
  --ion-color-shade: var(--ion-color-animal-shade) !important;
  --ion-color-tint: var(--ion-color-animal-tint) !important;
}

```

`<ion-toolbar color="animal">`

Source: [https://medium.com/@paulstelzer/ionic-4-how-to-add-more-colors-and-use-them-as-color-in-buttons-and-more-7175ab4ae4e7](https://medium.com/@paulstelzer/ionic-4-how-to-add-more-colors-and-use-them-as-color-in-buttons-and-more-7175ab4ae4e7)

---

<div class="post-metadata">

**Author:** ![rafaeldatalan](https://avatars.discourse-cdn.com/v4/letter/r/e9c0ed/32.png) [@rafaeldatalan](https://forum.ionicframework.com/u/rafaeldatalan)\
**Post date:** [May 3, 2019, 1:07pm UTC](https://forum.ionicframework.com/t/ionic-4-custom-colors-problem/162734/14 "2019-05-03T13:07:53Z")

</div>

Unfortunately, this way doesn’t work either. The color of the toolbar or button changes but the text color remains the same.

---

<div class="post-metadata">

**Author:** ![bilow](https://avatars.discourse-cdn.com/v4/letter/b/ea5d25/32.png) [@bilow](https://forum.ionicframework.com/u/bilow)\
**Post date:** [May 3, 2019, 1:59pm UTC](https://forum.ionicframework.com/t/ionic-4-custom-colors-problem/162734/15 "2019-05-03T13:59:48Z")

</div>

Just a slight correction:

**variables.scss**

```auto
/ **Ionic CSS Variables** /
:root {
  /* rest of the colors
  ... 
  */

  / **animal** /
  --ion-color-animal: #ccf2ff;
  --ion-color-animal-rgb: 204,242,255;
  --ion-color-animal-contrast: #000000;
  --ion-color-animal-contrast-rgb: 0,0,0;
  --ion-color-animal-shade: #b4d5e0;
  --ion-color-animal-tint: #d1f3ff;
}

/ **apply animal color** /
.ion-color-accentlight {
  --ion-color-base: var(--ion-color-animal) !important;
  --ion-color-base-rgb: var(--ion-color-animal-rgb) !important;
  --ion-color-contrast: var(--ion-color-animal-contrast) !important;
  --ion-color-contrast-rgb: var(--ion-color-animal-contrast-rgb) !important;
  --ion-color-shade: var(--ion-color-animal-shade) !important;
  --ion-color-tint: var(--ion-color-animal-tint) !important;
}

```

`<ion-toolbar color="animal">`

Tested, working and using it.

---

<div class="post-metadata">

**Author:** ![LacOniC](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/laconic/32/130566_2.png) [@LacOniC](https://forum.ionicframework.com/u/LacOniC)\
**Post date:** [May 3, 2019, 2:32pm UTC](https://forum.ionicframework.com/t/ionic-4-custom-colors-problem/162734/16 "2019-05-03T14:32:12Z")

</div>

It’s normal. We set Toolbar color. If you want to change another element, you must use color property of it. For example, Title in Toolbar:

```auto
<ion-toolbar>
    <ion-title color="animal">Settings</ion-title>
</ion-toolbar>

```

---

<div class="post-metadata">

**Author:** ![rafaeldatalan](https://avatars.discourse-cdn.com/v4/letter/r/e9c0ed/32.png) [@rafaeldatalan](https://forum.ionicframework.com/u/rafaeldatalan)\
**Post date:** [May 3, 2019, 2:38pm UTC](https://forum.ionicframework.com/t/ionic-4-custom-colors-problem/162734/17 "2019-05-03T14:38:24Z")

</div>

If you use a pre-existent color (success, warning, danger, primary) the text color will change.  
I tested putting my ‘animal’ color values on ‘success’ color variables and it works correctly. The problem is the custom color. In Ionic 3 works perfectly.

---

<div class="post-metadata">

**Author:** ![rafaeldatalan](https://avatars.discourse-cdn.com/v4/letter/r/e9c0ed/32.png) [@rafaeldatalan](https://forum.ionicframework.com/u/rafaeldatalan)\
**Post date:** [May 3, 2019, 2:38pm UTC](https://forum.ionicframework.com/t/ionic-4-custom-colors-problem/162734/18 "2019-05-03T14:38:58Z")

</div>

Doesn’t work this way as well.Thanks.

---

<div class="post-metadata">

**Author:** ![bilow](https://avatars.discourse-cdn.com/v4/letter/b/ea5d25/32.png) [@bilow](https://forum.ionicframework.com/u/bilow)\
**Post date:** [May 3, 2019, 2:39pm UTC](https://forum.ionicframework.com/t/ionic-4-custom-colors-problem/162734/19 "2019-05-03T14:39:14Z")

</div>

```auto
<ion-header>
  <ion-toolbar color='animal'>
    <ion-title>Some text</ion-title>
  </ion-toolbar>
</ion-header>

```

using color attribute only on the ion-toolbar does work for me too btw (text color of ion-title is updated)

---

<div class="post-metadata">

**Author:** ![rafaeldatalan](https://avatars.discourse-cdn.com/v4/letter/r/e9c0ed/32.png) [@rafaeldatalan](https://forum.ionicframework.com/u/rafaeldatalan)\
**Post date:** [May 3, 2019, 2:40pm UTC](https://forum.ionicframework.com/t/ionic-4-custom-colors-problem/162734/20 "2019-05-03T14:40:52Z")

</div>

Could you please tell me where and how you set ‘animal’ color variables? I tried a lot of different combinations and nothing works

---

<div class="post-metadata">

**Author:** ![bilow](https://avatars.discourse-cdn.com/v4/letter/b/ea5d25/32.png) [@bilow](https://forum.ionicframework.com/u/bilow)\
**Post date:** [May 3, 2019, 2:44pm UTC](https://forum.ionicframework.com/t/ionic-4-custom-colors-problem/162734/21 "2019-05-03T14:44:34Z")

</div>

Sorry I forgot to update the value of my own color to ‘animal’.  
See updated version and my other post for setting the color in the variables.scss (only!)

---

<div class="post-metadata">

**Author:** ![rafaeldatalan](https://avatars.discourse-cdn.com/v4/letter/r/e9c0ed/32.png) [@rafaeldatalan](https://forum.ionicframework.com/u/rafaeldatalan)\
**Post date:** [May 3, 2019, 2:48pm UTC](https://forum.ionicframework.com/t/ionic-4-custom-colors-problem/162734/22 "2019-05-03T14:48:11Z")

</div>

I did that. On :root

```auto
:root {
/ **animal** /
        --ion-color-animal: #ccf2ff;
        --ion-color-animal-rgb: 204,242,255;
        --ion-color-animal-contrast: #000000;
        --ion-color-animal-contrast-rgb: 0,0,0;
        --ion-color-animal-shade: #b4d5e0;
        --ion-color-animal-tint: #d1f3ff;
}

```

And still on variables.css, outside :root :

```auto
.ion-color-animal{
  --ion-color-base: var(--ion-color-animal) !important;
  --ion-color-base-rgb: var(--ion-color-animal-rgb) !important;
  --ion-color-contrast: var(--ion-color-animal-contrast) !important;
  --ion-color-contrast-rgb: var(--ion-color-animal-contrast-rgb) !important;
  --ion-color-shade: var(--ion-color-animal-shade) !important;
  --ion-color-tint: var(--ion-color-animal-tint) !important;
}

```

No success, unfortunately.

[Next page](https://forum.ionicframework.com/t/ionic-4-custom-colors-problem/162734.md?page=2)