Hi,

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:

www.infragistics.com/.../global-theme.html

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.

Thanks.