bug: ion-datetime color customization issues

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

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

In our project we are providing a light and dark theme. The ion-datetime is using the CSS var --ion-color-step-300 to define the font color for the day of week part in the area of the calendar and for the background color in the time picker area. This leads to the problem that the time for the dark theme is no longer displayed legibly. Furthermore we ran into a contrast problem where we are not able to meet some accessibility requirements.

ion-datetime with our light theme applied:

ion-datetime with our dark theme applied:

Expected Behavior

It would help if the ion-datetime component supports some additional CSS vars which could be set by the consumer. There should be one CSS var to set the color of the “day of the week” part and another to set the background for the time picker separately.

I thought that with this issue I would first ask if there is another option for my use case and if at all I can create a PR to fix the “problem” we have.

Steps to Reproduce

If I change the CSS variable accordingly, the font color for the area in the calendar also changes. Which is not always the best way to do it.

ion-datetime with our dark theme applied and a different color definition for ion-color-step-300:

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.19.0 (/Users/sandra/.nvm/versions/node/v16.13.0/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 6.1.13 @angular-devkit/build-angular : 13.2.3 @angular-devkit/schematics : 13.2.3 @angular/cli : 13.2.3 @ionic/angular-toolkit : 6.1.0

Utility:

cordova-res : not installed globally native-run : 1.5.0

System:

NodeJS : v16.13.0 (/Users/sandra/.nvm/versions/node/v16.13.0/bin/node) npm : 8.1.0 OS : macOS Monterey

Additional Information

No response

[sandrafreihofer]

@liamdebeasi After debugging and checking how the ion-datetime component is implemented, I found out that the original problem is rather that we don’t have definitions for stepped colors in our theme. I think by setting these additional colors we can solve our use case.

Please excuse the creation of this issue, I initially thought that the problem was on Ionic’s side. Let’s close it.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.