Switching dark & light themes with imports from NPM

Question

All the "theme switching" examples for light & dark mode expect the full theme css files to be included in the index.html so they can be disabled / enabled.

Is there a suggested way to do theme switching when including only component-relevant styles as suggested here in the docs?
https://ej2.syncfusion.com/react/documentation/schedule/getting-started#adding-css-reference

Deepika Arumugasamy · Accepted Answer

Hi Thomas Pentenrieder,

Thank you for reaching out!

In the Material 3 theme, both light and dark modes are included in a single CSS file, eliminating the need to import separate CSS files for each theme. This allows for an efficient way to switch between themes using only the component-relevant styles.

To enable the dark mode in the application, appending the e-dark-mode class to the body section of the application will automatically apply the dark theme. This method provides seamless theme switching without requiring additional CSS imports or full theme files.

Please refer the below documentation and let us know if you need further assistance.

Link: https://ej2.syncfusion.com/react/documentation/appearance/css-variables#switching-light-and-dark-mode-with-css-variables

We have attached the sample for your reference.

Regards,

Deepika

Attachment: reactthemeswitchsample_4c02c510.zip