Ionic button color overridden #18184
Description
Bug Report
Ionic version:
[x] 4.x
Current behavior:
Running, when the icon is the color defined by the ion-toolbar's color variable. If I run this in Ionic Lab, the iOS version of the icon is the default primary color, while the Android version uses my overrides.
Expected behavior:
Not sure which might be right, just have the platforms do the same thing.
Steps to reproduce:
define two CSS Variables in variabled.scss
: root{}
--mycolor: rebeccapurple;
--mytextcolor: #fff;
...
Then set the CSS variables in the global.scss
ion-toolbar {
--background: var(--mycolor);
--color: var(--mytextcolor);
}
In my template, I have this:
<ion-buttons slot="secondary">
<ion-button fill="outline">
<ion-icon slot="start" name="star"></ion-icon>
Star
</ion-button>
</ion-buttons>
Related code:
run this code to update the variables
document.documentElement.style.setProperty(--mycolor, '#ccc');
document.documentElement.style.setProperty(--mytextcolor, '#000');
Other information:
Ionic info:
Ionic:
ionic (Ionic CLI) : 4.12.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.3.1
@angular-devkit/build-angular : 0.13.8
@angular-devkit/schematics : 7.3.8
@angular/cli : 7.3.8
@ionic/angular-toolkit : 1.5.1
System:
NodeJS : v10.14.2 (/usr/local/bin/node)
npm : 6.9.0
OS : macOS Mojave
Reactions are currently unavailable