I used color generator ,just like it is mentionned in the documentation, to update the default ionic theme. But when I tested my App, It did not work. I am always getting the old default value (#3880ff as a primary color).
However, it worked when testing it on a browser with ionic serve.
For example, I am trying to change the toolbar color :
This is what I get on chrome :
And this what I get on Android emulator/device :
What did I missed ? Thank you !
Make sure the Android build has the actual compiled SCSS used to generate the APK, it appears your styles for the Android app are not updated to changes you did.
Regards.
Hi, thank you for replying.I did rechecked but it is updated.
In fact, I deleted the Android plateform and did rebuild after changing the variables.scss
If you could post your file \yourApp\src\theme\variables.scss
because maybe there is the error
Hi, thank you for replying. I don’t think so because I have only changed the value of the primary color via ionic color generator, but here is my variables.scss :
// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/
/** Ionic CSS Variables **/
:root {
/** primary **/
--ion-color-primary: #0288D1;
--ion-color-primary-rgb: 2,136,209;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #0278b8;
--ion-color-primary-tint: #1b94d6;
/** secondary **/
--ion-color-secondary: #0cd1e8;
--ion-color-secondary-rgb: 12, 209, 232;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255, 255, 255;
--ion-color-secondary-shade: #0bb8cc;
--ion-color-secondary-tint: #24d6ea;
/** tertiary **/
--ion-color-tertiary: #7044ff;
--ion-color-tertiary-rgb: 112, 68, 255;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
--ion-color-tertiary-shade: #633ce0;
--ion-color-tertiary-tint: #7e57ff;
/** success **/
--ion-color-success: #10dc60;
--ion-color-success-rgb: 16, 220, 96;
--ion-color-success-contrast: #ffffff;
--ion-color-success-contrast-rgb: 255, 255, 255;
--ion-color-success-shade: #0ec254;
--ion-color-success-tint: #28e070;
/** warning **/
--ion-color-warning: #ffce00;
--ion-color-warning-rgb: 255, 206, 0;
--ion-color-warning-contrast: #ffffff;
--ion-color-warning-contrast-rgb: 255, 255, 255;
--ion-color-warning-shade: #e0b500;
--ion-color-warning-tint: #ffd31a;
/** danger **/
--ion-color-danger: #f04141;
--ion-color-danger-rgb: 245, 61, 61;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255, 255, 255;
--ion-color-danger-shade: #d33939;
--ion-color-danger-tint: #f25454;
/** dark **/
--ion-color-dark: #222428;
--ion-color-dark-rgb: 34, 34, 34;
--ion-color-dark-contrast: #ffffff;
--ion-color-dark-contrast-rgb: 255, 255, 255;
--ion-color-dark-shade: #1e2023;
--ion-color-dark-tint: #383a3e;
/** medium **/
--ion-color-medium: #989aa2;
--ion-color-medium-rgb: 152, 154, 162;
--ion-color-medium-contrast: #ffffff;
--ion-color-medium-contrast-rgb: 255, 255, 255;
--ion-color-medium-shade: #86888f;
--ion-color-medium-tint: #a2a4ab;
/** light **/
--ion-color-light: #f4f5f8;
--ion-color-light-rgb: 244, 244, 244;
--ion-color-light-contrast: #000000;
--ion-color-light-contrast-rgb: 0, 0, 0;
--ion-color-light-shade: #d7d8da;
--ion-color-light-tint: #f5f6f9;
}
I think it is an issue because I have found this few days ago :
But I could not find a working solution for it.
try with the following and if in internet explorer it shows the correct colors in the device or emulator it will also:
:root {
/** primary **/
–ion-color-primary: #03A9F4;
–ion-color-primary-rgb: 2,136,209;
–ion-color-primary-contrast: #ffffff;
–ion-color-primary-contrast-rgb: 255,255,255;
–ion-color-primary-shade: #0278b8;
–ion-color-primary-tint: #1b94d6;
/** secondary **/
–ion-color-secondary: #0cd1e8;
–ion-color-secondary-rgb: 12, 209, 232;
–ion-color-secondary-contrast: #ffffff;
–ion-color-secondary-contrast-rgb: 255, 255, 255;
–ion-color-secondary-shade: #0bb8cc;
–ion-color-secondary-tint: #24d6ea;
/** tertiary **/
–ion-color-tertiary: #7044ff;
–ion-color-tertiary-rgb: 112, 68, 255;
–ion-color-tertiary-contrast: #ffffff;
–ion-color-tertiary-contrast-rgb: 255, 255, 255;
–ion-color-tertiary-shade: #633ce0;
–ion-color-tertiary-tint: #7e57ff;
/** success **/
–ion-color-success: #10dc60;
–ion-color-success-rgb: 16, 220, 96;
–ion-color-success-contrast: #ffffff;
–ion-color-success-contrast-rgb: 255, 255, 255;
–ion-color-success-shade: #0ec254;
–ion-color-success-tint: #28e070;
/** warning **/
–ion-color-warning: #ffce00;
–ion-color-warning-rgb: 255, 206, 0;
–ion-color-warning-contrast: #ffffff;
–ion-color-warning-contrast-rgb: 255, 255, 255;
–ion-color-warning-shade: #e0b500;
–ion-color-warning-tint: #ffd31a;
/** danger **/
–ion-color-danger: #f04141;
–ion-color-danger-rgb: 245, 61, 61;
–ion-color-danger-contrast: #ffffff;
–ion-color-danger-contrast-rgb: 255, 255, 255;
–ion-color-danger-shade: #d33939;
–ion-color-danger-tint: #f25454;
/** dark **/
–ion-color-dark: #222428;
–ion-color-dark-rgb: 34, 34, 34;
–ion-color-dark-contrast: #ffffff;
–ion-color-dark-contrast-rgb: 255, 255, 255;
–ion-color-dark-shade: #1e2023;
–ion-color-dark-tint: #383a3e;
/** medium **/
–ion-color-medium: #989aa2;
–ion-color-medium-rgb: 152, 154, 162;
–ion-color-medium-contrast: #ffffff;
–ion-color-medium-contrast-rgb: 255, 255, 255;
–ion-color-medium-shade: #86888f;
–ion-color-medium-tint: #a2a4ab;
/** light **/
–ion-color-light: #f4f5f8;
–ion-color-light-rgb: 244, 244, 244;
–ion-color-light-contrast: #000000;
–ion-color-light-contrast-rgb: 0, 0, 0;
–ion-color-light-shade: #d7d8da;
–ion-color-light-tint: #f5f6f9;
}
.ion-color-primary {
–ion-color-base:#03A9F4;
–ion-color-base-rgb: 2,136,209;
–ion-color-contrast: #ffffff;
–ion-color-contrast-rgb: 255,255,255;
–ion-color-shade:#0278b8;
–ion-color-tint: #1b94d6;
}
Hi, thanks again for replying.
I have changed primary to red to easily detect the changes, here is what I got when I tried it on internet explorer. It worked even without the .ion-color-primary class :
But for an android emulator V 5.0.1, I have the same problem, with or without the .ion-color-primary class :
As you can see, it takes the red color as a primary one because it is applied in the link but not for the toolbar.