Easy way to style the ionic-datetime header

Is there an easiest way to style the header background of the ion-datetime component?
In the documentation there is nothing related to that topic.
I have this code :


            <ion-modal trigger="openCalendar"
                       [backdropDismiss]="false">
              <ng-template>
                <ion-datetime id="birthdate"
                              (ionChange)="onBirthDateSelected($event)"
                              presentation="date"
                              [preferWheel]="true"
                              [locale]="'fr-FR'" #datetime>
                  <span slot="title">Service dédié aux majeurs</span>
                  <ion-buttons slot="buttons">
                    <ion-button color="primary" (click)="datetime.confirm(true)">Valider</ion-button>
                  </ion-buttons>
                </ion-datetime>
              </ng-template>
            </ion-modal>

By default it looks like this:
Default

What I would like is this (setting the background color to red or any color):
goal

I managed to do it but I would like a nicer solution. This is how I did it:


  @ViewChild('datetime', {read: ElementRef}) datetime!: ElementRef;

  ngAfterViewChecked() {
    if (this.datetime) {
      const shadowRoot = this.datetime.nativeElement.shadowRoot;
      const dateTimeHeaderDiv = shadowRoot.querySelector('.datetime-header');
      dateTimeHeaderDiv?.setAttribute('style', 'background-color: var(--ion-color-danger)');
    }
  }

It’s a bit tricky but it works. Do you have a nicer solution?
Thank you

At the moment, this part of the date time isn’t exposed for styling, so your current work around would work , though it does feel like a hack IMO.

I would open an issue asking if the core team could expose more internals for styling datetime.

Thank you,
Could you add the link of the issue here so I can follow its progression?