I seem to have a problem trying to incorporate global themes. I am going through the Ignite UI for Angular documentation to create a light & dark global theme. I am following this link:
I have applied the following theme code in app.component.scss because i want an app variable to switch between light & dark:
// Import the IgniteUI themes library first
$primary-color: #2ab759; // Some green shade I like
$secondary-color: #f96a88; // Watermelon pink
$secondary: $secondary-color );
// IMPORTANT: Make sure you always include igx-core first!
// Pass the color palette we generated to the igx-theme mixin
If i replace the above igx-theme with igx-dark-theme every thing works perfectly, all controls in the app (including controls in an overlay like the date picker) conform to the dark theme.
However if i want to put a condition on my app-root div for example to switch between light & dark:
Everything works for the app except anything that is displayed in an overlay (like the Date picker)
What am i doing wrong.
Thank you for posting in our community.
I have created and attached a sample trying to reproduce your issue. On my side, everything works as expected. When I select a theme from the drop-down menu, it is applied globally on all components, including the ones with an overlay.
Please test it on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me along with steps to reproduce.
Looking forward to hearing from you.
Tried with above the attached project zip, But there is no problem with global theme to work on any other igx element ,
the issue is with igx-overlay and igx-dialog and there is no such component in above eg which demo this works. and in order to make this element work I again need to include the default-palette for the theme part
It would be helpful if if one of the above component is also include in some demo eg like above
The igxOverlay is used when selecting a new date from the date picker in the RegisteredDate field.
I have modified the previous sample and added the igxDialog component trying to reproduce your issue. On my side, everything works as expected. The color scheme is applied to the component correctly.
Please test it on your side and let me know how it behaves.
Yes It do work,
Actually at my side the problem was the global theme was unable to override the classes for this overlay type of component.