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
30
Themes not working as *I* expected. Default Theme not applied
posted

Good Morning,

It was my expectation that with a few lines of code I could include one of the Infragitics themes as explained here. (www.infragistics.com/.../examples.html)

I am working from the "Default Theme" section. I created a new angular project using the Infragistics angular-cli. I added a button to the HTML (and supporting module imports) like this.

<button igxButton="raised">Sign In</button>

This is what I get:


Now I follow the directions on the tutorial and add the following:

// import first the IgniteUI themes library
@import "~igniteui-angular/lib/core/styles/themes/index";

// Don't forget to include the igx-core first
@include igx-core();

// the default color palette is passed to the global theme
@include igx-theme($default-palette);

I still get the "hot pink" button seen above. However the tutorial claims and shows it to be grey. So I open the tutorial sample in StackBlitz and I become very confused.

They have manually added to the scss additional styling to get the grey effect????

.addProdBtn.igx-button--raised{
margin-bottom: 5px;
background-color: lightgrey;
color: black;
&:hover {
background-color: rgba(0, 0, 0, 0.26)
}
}

If I take away the above scss then the sample is back to hot pink just like mine???

So I am confused. I thought the idea of the default theme was to make it easy for you to get a consistent look and feel without having to do a bunch of styling???

[1]: i.stack.imgur.com/EXdVm.png

Parents
No Data
Reply
  • 16310
    Offline posted

    Hi John,

    It seems like the topic is messed up and does not properly represent what the sample does, and vice versa ! We are going to take care of this as soon as possible and provide you a link to the updated sample.

    Actually, the pink is the color from the default-theme. We have few more included themes, which are dark and fluent. You can include the dark theme as easy as:

    @import '~igniteui-angular/lib/core/styles/themes/index';
    @include igx-core();
    @include igx-theme($dark-palette)

Children