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.

Parents
  • 1080
    Offline posted

    Hello,

    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.

    7635.Sample.zip

Reply Children