Change color of ion-datetime value

Viewed 2247
2 Answers

When no CSS variable is defined on the Ionic element, you can simply use normal CSS declarations:

ion-datetime {
    color: #f90;
}

This could be done in a single component's CSS file or globally to target all ion-datetime across the entire applicaiton.

Update

To target the placeholder without affecting values:

ion-datetime {
  --placeholder-color: #0f9;
}

&:not(.datetime-placeholder) {
  color: #f00;
}

I have achieved it like so on Ionic 5+/Angular:

global.scss

ion-picker>.picker-wrapper {
    background-color: var(--dark-theme-color) !important;
}

.picker-opt {
    color: #7994A2 !important;
}

.picker-opt.picker-opt-selected {
    color: var(--ion-color-light) !important;
}

ion-datetime {
    color: var(--ion-color-light) !important;
}

enter image description here

Related