Forums Ignite UI for Angular
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
Close
Nick Cook
45
Global Theme not working with overlay
posted

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.