Igniteui-angular: Add Bootstrap theme

[luiscla27]

Can you please provide an example of how to easily implement a different guideline for themes?

• Fluent
• Bootstrap

Currently i'm having big troubles trying to copy Fluent theme:
https://www.microsoft.com/design/fluent/#/

[desig9stein]

Hi @luiscla27
Since version 8.2.0, We have a visual implementation that mimics Microsoft fluent theme. You can switch between Material and Fluent by changing the igx-theme mixin in your SCSS file.

Here is an example:

// In your theme file Replace
@include igx-theme($default-palette);

// Depending on your use case choose between Light or Dark version of the theme

// Light version
@include igx-fluent-theme($fluent-excel-palette);
// OR
@include igx-fluent-theme($fluent-word-palette);

// Dark version
@include igx-fluent-dark-theme($fluent-excel-palette);
// OR
@include igx-fluent-dark-theme($fluent-word-palette);

In the end, you should get something like this:

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

In case you don't use SCSS you can use one of the pre-compiled CSS files.
igniteui-fluent-light-excel.css
igniteui-fluent-dark-excel.css
igniteui-fluent-light-word.css
igniteui-fluent-dark-word.css

We don't have Foundation and Bootstrap themes. However, you can create your own, by extending our component schemas and changing the default palette.

[luiscla27]

Thank you so much! i'll try it :)

[luiscla27]

I've reopened this because foundation and bootstrap themes are missing, also i think you should include at your WebPage a link to all available themes, specially because the theming documentation only talks about Material and _Custom_ themes.

[simeonoff]

We've decided to only support the following themes:

• Material
• Bootstrap
• Fluent