CODEWITHSUNDEEP
cssangulartypescriptionic-frameworkcolors
JEricaM
JEricaM

Reputation: 824

Change color of ion-datetime value

How is it possible to change ion-datetime value color? Documentation https://ionicframework.com/docs/api/datetime#css-custom-properties show only css variable for the placeholder color.

But how the value color can be changed?

--color: has no effect.

Upvotes: 2

Views: 5598

Answers (2)

Sampath
Sampath

Reputation: 65870

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

Upvotes: 1

Sébastien
Sébastien

Reputation: 12139

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;
}

Upvotes: 2

Related Questions