Change color of ion-datetime selector

I want to change the color of the date selection indicator of a ion-datetime element. My code to manipulate the ion-datetime object is as follows:

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

  --background: #2f0e4e;
  --background-rgb: rgb(122, 25, 32);
  --ion-color-base: #831843;
  --ion-color-base-rgb: 131, 24, 67;
  --ion-color-contrast: #310a4b;
  --ion-color-contrast-rgb: 255, 255, 255;
  --ion-color-shade: #73153b;
  --ion-color-tint: #8f2f56;

  &:not(.datetime-placeholder) {
    color: white;

The current date and the selected date are still colored in the primary color:


What am i doing wrong?

1 Like

If you’re using it from your template (with the < ion-datetime >tag) have you tried adding the attribute color and setting it white? Worked fine for me :wink:
Capture d’écran 2022-08-31 153345
Capture d’écran 2022-08-31 153438