.e-dark-mode doesn't work for the modals in DatePickerComponent, DateTimePickerComponent and DropDownList

To use Dark mode with Syncfusion components, you need to apply the respective theme stylesheet instead of using the "e-dark-mode" class. Please refer to the documentation linked below for more detailed information on how to implement themes:

• Theme in React Appearance component | Syncfusion

This documentation will guide you through the steps to apply various themes, including the Dark mode, to Syncfusion components effectively.

Thank you for the reply, but I have read the documentation and applying the dark theme won't do. 

I need the app (NextJS) to change appearance according to the user's device theme and applying "e-dark-mode" accordingly, is the easiest way to do that. If it's not to be used in such a manner, what is its purpose? And why do the rest of the components work fine with it?

Could you please share the following details to proceed further?

• A runnable sample that demonstrates the issue you are experiencing. This will help us understand how you are integrating and handling the components in your project.
• Detailed replication steps that we can follow to reproduce the issue.
• A video illustration of the issue.

This will help us better understand and address the problem.

Sorry for taking this long to respond.

I am following the same logic from https://ej2.syncfusion.com/react/documentation/appearance/css-variables#switching-light-and-dark-mode-with-css-variables

I am adding and removing the class e-dark-mode. It works for all the components except for the calendar and time popups related to the datetime and datetimepicker components. They won't change their appearance when e-dark-mode has been added as a class.

We have validated the reported query on our end, but unfortunately, we were unable to reproduce the reported issue as per your scenario. We have also shared a sample and video illustration for your reference. 

Sample: Xbnqqu (forked) - StackBlitz

In order to assist us in identifying the problem and provide a better solution, we kindly request that you provide additional details about the issue, as mentioned below:

• Please share a runnable sample that demonstrates the issue you are experiencing. You may also modify the above shared sample to reflect your specific scenario. This will help us understand how you are integrating and handling the component in your project.
• Issue replication steps.
• A video illustration of the issue.

Thank you for the reply. I see that you used the bootstrap theme. Could you please try with Material 3? That's the one I've been using.

The previously provided sample uses the Fluent 2 theme. Based on your last update, we have tried to replicate the reported scenario with the Material 3 theme. The dark mode is applied to the component and its popup as expected. Please find the sample and video demo for reference.

Sample: Xbnqqu (forked) - StackBlitz

As mentioned in our previous response, could you please share the following details to proceed further?

• A runnable sample that demonstrates the issue you are experiencing. You may also modify the above shared sample to reflect your specific scenario. This will help us understand how you are integrating and handling the component in your project.
• Detailed replication steps that we can follow to reproduce the issue.
• A video illustration of the issue.

Sorry for the late reply again. Once I updated to the latest version from your example, it works just fine.

Thank you

Hi George,

Please get back to us for assistance in the future.

Regards,

Shereen