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?
Toolbar has --color property. Try something like that;
ion-toolbar{
--color: var(--ion-color-custom);
}
To my understanding you need to use <ion-toolbar color="{{ customcolor }}"> and customcolor needs to be an existing variable in your Typescript file
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).
<ion-toolbar color="primary">
If I use a color created in the same variables.css like this:
.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.
I’ll try that. Thanks you.
This way also does not work
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:
<ion-toolbar class="toolbar">
.toolbar {
--color: var(--ion-color-custom);
}
Otherwise it is me being really confused here 
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 :
Ionic documentation HERE 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
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.
Ok. This works:
To variables.scss (under :root)
--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:
.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">
Unfortunately, this way doesn’t work either. The color of the toolbar or button changes but the text color remains the same.
Just a slight correction:
variables.scss
/** 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.
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:
<ion-toolbar>
<ion-title color="animal">Settings</ion-title>
</ion-toolbar>
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.
Doesn’t work this way as well.Thanks.
<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)
Could you please tell me where and how you set ‘animal’ color variables? I tried a lot of different combinations and nothing works
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!)
I did that. On :root
: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 :
.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.