Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Global Theme not working with overlay


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

@import '~igniteui-angular/lib/core/styles/themes/index';

$primary-color: #2ab759; // Some green shade I like

$secondary-color: #f96a88; // Watermelon pink

$my-color-palette: igx-palette(

$primary: $primary-color,

$secondary: $secondary-color );

// IMPORTANT: Make sure you always include igx-core first!

@include igx-core();

// Pass the color palette we generated to the igx-theme mixin

@include igx-theme($my-color-palette);

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:

<div [class.dark-theme]="isDarkTheme">
and then apply the following code from the same example Infragistics documentation:
.light-theme {
@include igx-light-theme($my-color-palette);

.dark-theme {
background: #333;
color: #fff;

@include igx-dark-theme($my-color-palette);

Everything works for the app except anything that is displayed in an overlay (like the Date picker)

What am i doing wrong.