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
Alfred Döblin
15
Cannot create custom button theme by using igx-css-vars
posted

Even after upgrading to IgniteUI for Angular 12.0.5 I've been unable to make a custom button theme work with the usual igx-css-vars approach, neither in Firefox or Chrome. The alternative, not recommended mixin-based (igx-button) solution for IE11 works ok, however.

You can check it by modifying the basic angular button example in the doc with the custom theme supplied at the styling section. I've done it in this code sandbox.

Parents
No Data
Reply
  • 600
    Offline posted

    Hello Alfred,

    Thank you for posting in our community.

    What I can suggest for achieving your requirement is to set $igx-legacy-support variable, which allows you to produce styles for ever-green and old browsers, to false:

    src/_variables.scss

    $legacy-support: false;

    Then, you should import your custom styles in src/styles.scss:

    :root {
  @include igx-palette-vars($palette);
  @include igx-css-vars($custom-button-theme);
}


    You can also style only a specific component as in the following example:

    $custom-button-theme: igx-button-theme(
    $foreground: #fdfdfd,
    $hover-foreground: #fdfdfd,
    $background: #345779,
    $hover-background: #2e4d6b,
    $focus-foreground: #fdfdfd,
    $focus-background: #2e4d6b,
    $disabled-foreground: #bbb
);

:host {
    @include igx-css-vars($custom-button-theme);
}


    I created a small sample illustrating my approach, which you can find here. Please test it on your side and let me know wether you find it helpful.

    Please let me know if you have any further questions and concerns.

    Regards,
    Viktor Kombov
    Entry Level Software Developer
    Infragistics, Inc.

Children
No Data