Open
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
v8.x
Current Behavior
On Android specifically when focusing in on an input field while in dark mode, the label changes color to the wrong color pallete.
Expected Behavior
On Android when focusing on an input field it should display it's correct dark mode styling.
Steps to Reproduce
- Use either the chrome emulator for Android or the Android Studio Emulator
- Create an input field like below and focus in.
<ion-item>
<ion-input
label="click here"
labelPlacement="stacked"
placeholder="a date"
></ion-input>
</ion-item>
Code Reproduction URL
Ionic Info
Ionic:
Ionic CLI : 7.2.1
Ionic Framework : @ionic/angular 8.5.0
@angular-devkit/build-angular : 19.2.3
@angular-devkit/schematics : 19.2.3
@angular/cli : 19.2.6
@ionic/angular-toolkit : not installed
Capacitor:
Capacitor CLI : not installed
@capacitor/android : 7.2.0
@capacitor/core : 7.2.0
@capacitor/ios : 7.2.0
Utility:
cordova-res : not installed globally
native-run : not installed globally
System:
NodeJS : v20.17.0
npm : 10.8.2
OS : Windows 10
Additional Information
video_1280.mp4
I left a video of it, this only occurs on Android
Here is my global css
:root {
--sat: env(safe-area-inset-top);
--sar: env(safe-area-inset-right);
--sab: env(safe-area-inset-bottom);
--sal: env(safe-area-inset-left);
/** Ionic CSS Variables **/
--ion-color-primary: #2d3047;
--ion-color-primary-rgb: 45, 48, 71;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #282a3e;
--ion-color-primary-tint: #424559;
--ion-color-secondary: #00aba9;
--ion-color-secondary-rgb: 0, 171, 169;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255, 255, 255;
--ion-color-secondary-shade: #009695;
--ion-color-secondary-tint: #1ab3b2;
--ion-color-tertiary: #9c7ce4;
--ion-color-tertiary-rgb: 156, 124, 228;
--ion-color-tertiary-contrast: #000000;
--ion-color-tertiary-contrast-rgb: 0, 0, 0;
--ion-color-tertiary-shade: #896dc9;
--ion-color-tertiary-tint: #a689e7;
--ion-color-success: #5fd595;
--ion-color-success-rgb: 95, 213, 149;
--ion-color-success-contrast: #000000;
--ion-color-success-contrast-rgb: 0, 0, 0;
--ion-color-success-shade: #54bb83;
--ion-color-success-tint: #6fd9a0;
--ion-color-warning: #ff8264;
--ion-color-warning-rgb: 255, 130, 100;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0, 0, 0;
--ion-color-warning-shade: #e07258;
--ion-color-warning-tint: #ff8f74;
--ion-color-danger: #b42401;
--ion-color-danger-rgb: 180, 36, 1;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255, 255, 255;
--ion-color-danger-shade: #9e2001;
--ion-color-danger-tint: #bc3a1a;
--ion-color-medium: #92949c;
--ion-color-medium-rgb: 146, 148, 156;
--ion-color-medium-contrast: #000000;
--ion-color-medium-contrast-rgb: 0, 0, 0;
--ion-color-medium-shade: #808289;
--ion-color-medium-tint: #9d9fa6;
--ion-color-light: #f4f5f8;
--ion-color-light-rgb: 244, 245, 248;
--ion-color-light-contrast: #000000;
--ion-color-light-contrast-rgb: 0, 0, 0;
--ion-color-light-shade: #d7d8da;
--ion-color-light-tint: #f5f6f9;
--ion-background-color: var(--ion-color-light-tint);
--ion-background-color-rgb: 245, 246, 249;
--imms-yellow: #ffc409;
--imms-yellow-rgb: 255, 196, 9;
--imms-yellow-contrast: #000000;
--imms-yellow-contrast-rgb: 0, 0, 0;
--imms-yellow-shade: #e0ac08;
--imms-yellow-tint: #ffca22;
--imms-purpleish-blue: #698ef7;
--imms-purpleish-blue-rgb: 105, 142, 247;
--imms-purpleish-blue-contrast: #000000;
--imms-purpleish-blue-contrast-rgb: 0, 0, 0;
--imms-purpleish-blue-shade: #5c7dd9;
--imms-purpleish-blue-tint: #7899f8;
--imms-bright-blue: #00b4ed;
--imms-bright-blue-rgb: 0, 180, 237;
--imms-bright-blue-contrast: #000000;
--imms-bright-blue-contrast-rgb: 0, 0, 0;
--imms-bright-blue-shade: #009ed1;
--imms-bright-blue-tint: #1abcef;
--imms-dark-blue: #006ba4;
--imms-dark-blue-rgb: 0, 107, 164;
--imms-dark-blue-contrast: #ffffff;
--imms-dark-blue-contrast-rgb: 255, 255, 255;
--imms-dark-blue-shade: #005e90;
--imms-dark-blue-tint: #1a7aad;
--imms-light-green: #84e8da;
--imms-light-green-rgb: 132, 232, 218;
--imms-light-green-contrast: #000000;
--imms-light-green-contrast-rgb: 0, 0, 0;
--imms-light-green-shade: #74ccc0;
--imms-light-green-tint: #90eade;
--imms-light-orange: #f9bebb;
--imms-light-orange-rgb: 249, 190, 187;
--imms-light-orange-contrast: #000000;
--imms-light-orange-contrast-rgb: 0, 0, 0;
--imms-light-orange-shade: #dba7a5;
--imms-light-orange-tint: #fac5c2;
--imms-pink-primary: #cc5490;
--imms-pink-primary-rgb: 204, 84, 144;
--imms-pink-primary-contrast: #000000;
--imms-pink-primary-contrast-rgb: 0, 0, 0;
--imms-pink-primary-shade: #b93a73;
--imms-pink-primary-tint: #ffa1d5;
/*
Highlight colors correspond to the Angular Material colors in
apps/mms/src/assets/scss/_mms-material-variables.scss
$highlight-green: map-get($m2-green-palette, 200);
$highlight-blue: map-get($m2-blue-palette, A400);
$highlight-red: map-get($m2-pink-palette, A400);
$highlight-purple: map-get($m2-purple-palette, 200);
*/
--highlight-green: #afeaca;
--highlight-blue: #c5cdff;
--highlight-red: #ffa1d5;
--highlight-purple: #cebef2;
--highlight-button-group-margin: 8px;
// Need contrast colors only in light mode for the highlight buttons
--highlight-green-contrast: #2e7d32; // forest main
--highlight-blue-contrast: #3838ea; // blue main
--highlight-red-contrast: var(--imms-pink-primary);
--highlight-purple-contrast: #6e17a4; // plum main
}
body {
background-color: var(--ion-color-light);
}
@media (prefers-color-scheme: dark) {
/*
* Dark Colors
* -------------------------------------------
*/
:root {
--ion-color-primary: #2d3047;
--ion-color-primary-rgb: 45, 48, 71;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #282a3e;
--ion-color-primary-tint: #424559;
--ion-color-secondary: #00aba9;
--ion-color-secondary-rgb: 0, 171, 169;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255, 255, 255;
--ion-color-secondary-shade: #009695;
--ion-color-secondary-tint: #1ab3b2;
--ion-color-tertiary: #9c7ce4;
--ion-color-tertiary-rgb: 156, 124, 228;
--ion-color-tertiary-contrast: #000000;
--ion-color-tertiary-contrast-rgb: 0, 0, 0;
--ion-color-tertiary-shade: #896dc9;
--ion-color-tertiary-tint: #a689e7;
--ion-color-success: #5fd595;
--ion-color-success-rgb: 95, 213, 149;
--ion-color-success-contrast: #000000;
--ion-color-success-contrast-rgb: 0, 0, 0;
--ion-color-success-shade: #54bb83;
--ion-color-success-tint: #6fd9a0;
--ion-color-warning: #ff8264;
--ion-color-warning-rgb: 255, 130, 100;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0, 0, 0;
--ion-color-warning-shade: #e07258;
--ion-color-warning-tint: #ff8f74;
--ion-color-danger: #b42401;
--ion-color-danger-rgb: 180, 36, 1;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255, 255, 255;
--ion-color-danger-shade: #9e2001;
--ion-color-danger-tint: #bc3a1a;
--ion-color-dark: #f4f5f8;
--ion-color-dark-rgb: 244, 245, 248;
--ion-color-dark-contrast: #000000;
--ion-color-dark-contrast-rgb: 0, 0, 0;
--ion-color-dark-shade: #d7d8da;
--ion-color-dark-tint: #f5f6f9;
--ion-color-medium: #989aa2;
--ion-color-medium-rgb: 152, 154, 162;
--ion-color-medium-contrast: #000000;
--ion-color-medium-contrast-rgb: 0, 0, 0;
--ion-color-medium-shade: #86888f;
--ion-color-medium-tint: #a2a4ab;
--ion-color-light: #222428;
--ion-color-light-rgb: 34, 36, 40;
--ion-color-light-contrast: #ffffff;
--ion-color-light-contrast-rgb: 255, 255, 255;
--ion-color-light-shade: #1e2023;
--ion-color-light-tint: #383a3e;
--ion-background-color: var(--ion-color-light-tint);
--ion-background-color-rgb: 56, 58, 62;
--imms-purpleish-blue: #698ef7;
--imms-purpleish-blue-rgb: 105, 142, 247;
--imms-purpleish-blue-contrast: #000000;
--imms-purpleish-blue-contrast-rgb: 0, 0, 0;
--imms-purpleish-blue-shade: #5c7dd9;
--imms-purpleish-blue-tint: #7899f8;
--imms-bright-blue: #00b4ed;
--imms-bright-blue-rgb: 0, 180, 237;
--imms-bright-blue-contrast: #000000;
--imms-bright-blue-contrast-rgb: 0, 0, 0;
--imms-bright-blue-shade: #009ed1;
--imms-bright-blue-tint: #1abcef;
--imms-dark-blue: #006ba4;
--imms-dark-blue-rgb: 0, 107, 164;
--imms-dark-blue-contrast: #ffffff;
--imms-dark-blue-contrast-rgb: 255, 255, 255;
--imms-dark-blue-shade: #005e90;
--imms-dark-blue-tint: #1a7aad;
--imms-light-green: #84e8da;
--imms-light-green-rgb: 132, 232, 218;
--imms-light-green-contrast: #000000;
--imms-light-green-contrast-rgb: 0, 0, 0;
--imms-light-green-shade: #74ccc0;
--imms-light-green-tint: #90eade;
--imms-light-orange: #f9bebb;
--imms-light-orange-rgb: 249, 190, 187;
--imms-light-orange-contrast: #000000;
--imms-light-orange-contrast-rgb: 0, 0, 0;
--imms-light-orange-shade: #dba7a5;
--imms-light-orange-tint: #fac5c2;
--imms-pink-primary: #cc5490;
--imms-pink-primary-rgb: 204, 84, 144;
--imms-pink-primary-contrast: #000000;
--imms-pink-primary-contrast-rgb: 0, 0, 0;
--imms-pink-primary-shade: #b93a73;
--imms-pink-primary-tint: #ffa1d5;
--highlight-green: #2e7d32; // forest 500
--highlight-blue: #3232e7; // blue 600
--highlight-red: #b93a73; // pink 800;
--highlight-purple: #6e17a4; // plum 500
}
/*
* iOS Dark Theme
* -------------------------------------------
*/
:root.ios {
--ion-background-color: #000000;
--ion-background-color-rgb: 0, 0, 0;
--ion-text-color: #ffffff;
--ion-text-color-rgb: 255, 255, 255;
--ion-color-step-50: #0d0d0d;
--ion-color-step-100: #1a1a1a;
--ion-color-step-150: #262626;
--ion-color-step-200: #333333;
--ion-color-step-250: #404040;
--ion-color-step-300: #4d4d4d;
--ion-color-step-350: #595959;
--ion-color-step-400: #666666;
--ion-color-step-450: #737373;
--ion-color-step-500: #808080;
--ion-color-step-550: #8c8c8c;
--ion-color-step-600: #999999;
--ion-color-step-650: #a6a6a6;
--ion-color-step-700: #b3b3b3;
--ion-color-step-750: #bfbfbf;
--ion-color-step-800: #cccccc;
--ion-color-step-850: #d9d9d9;
--ion-color-step-900: #e6e6e6;
--ion-color-step-950: #f2f2f2;
--ion-item-background: #000000;
--ion-card-background: #1c1c1d;
ion-modal {
--ion-background-color: var(--ion-color-step-100);
--ion-toolbar-background: var(--ion-color-step-150);
--ion-toolbar-border-color: var(--ion-color-step-250);
}
}
/*
* Material Design Dark Theme
* -------------------------------------------
*/
:root.md {
--ion-background-color: #121212;
--ion-background-color-rgb: 18, 18, 18;
--ion-text-color: #ffffff;
--ion-text-color-rgb: 255, 255, 255;
--ion-border-color: #222222;
--ion-color-step-50: #1e1e1e;
--ion-color-step-100: #2a2a2a;
--ion-color-step-150: #363636;
--ion-color-step-200: #414141;
--ion-color-step-250: #4d4d4d;
--ion-color-step-300: #595959;
--ion-color-step-350: #656565;
--ion-color-step-400: #717171;
--ion-color-step-450: #7d7d7d;
--ion-color-step-500: #898989;
--ion-color-step-550: #949494;
--ion-color-step-600: #a0a0a0;
--ion-color-step-650: #acacac;
--ion-color-step-700: #b8b8b8;
--ion-color-step-750: #c4c4c4;
--ion-color-step-800: #d0d0d0;
--ion-color-step-850: #dbdbdb;
--ion-color-step-900: #e7e7e7;
--ion-color-step-950: #f3f3f3;
--ion-item-background: #1e1e1e;
--ion-toolbar-background: #1f1f1f;
--ion-tab-bar-background: #1f1f1f;
--ion-card-background: #1e1e1e;
}
}