Multiple themes (light/dark)

[Eralmidia]

Description

A question regarding themes:

In our application, users can choose between a light and dark theme. How do you go about doing this for igx? The themes documentations states "So we have themes for each component, and a global one, that styles the entire application and every component in it". Does this mean that we can only have a single global theme?

[simeonoff]

You can have component themes. Some components, like the checkbox or the input group have a property on their Sass theme function called $variant. The default variant is set to 'dark', but can also be set to 'light'.

For instance, to create a checkbox theme, that will lay against dark backgrounds, you can do:

// define your checkbox theme somewhere
$dark-cbx-theme: igx-checkbox-theme($variant: 'light', fill-color: #fff);

// If you want target support for post-IE11 browsers that have css variables support
// pass the theme you defined to the igx-css-vars mixin
:root { // make sure to scope the mixin as it spews out css variables
  @include igx-css-vars($dark-cbx-theme);
}

// OR

// If you want to support for IE11 you have to use the component styles
// mixin and pass the theme to that
@include igx-checkbox($dark-cbx-theme);

In both cases, be mindful of how View Encapsulation works in Angular.

Let me know if you have any questions.

To get what properties can be passed to different themes, you have to build the Sass documentation we bundle with this project. To build, clone this repo then run:

$ npm run build:sassdoc

The documentation will be generated in dist/docs/sass.

[Eralmidia]

Thanks for the reply. Unfortunately, I don't find this very intuitive. I have no luck with this what so ever. When adding

I'm getting

When trying npm run build:sassdoc, I'm getting

[simeonoff]

I made a little mistake when typing this out. It should've been:

// define your checkbox theme somewhere
$dark-cbx-theme: igx-checkbox-theme($variant: 'light', $fill-color: #fff);

As to your second question. You have to clone the repository. Do not try to build from the installed package, it won't work.

What part is confusing to you?

[Eralmidia]

Yeah, should have spoted that one myself, instead of blindly copy-pasting :p Still, it didn't do much good:

[simeonoff]

Forgot to ask, what version of ignite ui for angular are you using? The above snippet works only on v 6.0.

[Eralmidia]

Ah, ok, we haven't upgraded from 5.3 yet. If there are some changes and/or new features I'll try the upgrade to 6.0 first.

One other thing tho: lets say I add support for light and dark themes for the checkbox:

How exactly do you apply one or the other based on lets say user settings?

[simeonoff]

You can easily scope the themes to different parent selectors. Say something like:

.dark-theme {
    @include igx-checkbox($dark-cbx-theme);
}

.light-theme {
    @include igx-checkbox($light-cbx-theme);
}

Then you can conditionally switch the class on the parent component based on user settings.

Btw, you can still use light and dark themes in 5.3; The property you pass there is $light and you assign it to true, as opposed to 6.0 where we changed it to $variant for more flexibility.

[Eralmidia]

Perfect. I'll try this out. Thanks for the assistance.

[Eralmidia]

@simeonoff Sorry for reopening this issue, but I still can't get this to work. So I have set up the following simple test:

I would then expect that the colors would be applied to all components, as this is the global theme, but this doesn't seem to happen

Also, how are you suppose to apply background colors to the global theme?

[simeonoff]

@Eralmidia It's difficult to judge from the screenshots, but are you trying to implement this in a component? If so, you have to consider how View Encapsulation works in Angular. Depending on your use case, you have to either turn off the View Encapsulation in your component by adding:

encapsulation: ViewEncapsulation.None

to your component decorator configuration, or if you want to preserve View Encapsulation you have to nest your class selectors in :host ::ng-deep selector, for intance:

:host ::ng-deep {
   .light-theme { ... }
}

[Eralmidia]

@simeonoff Yes, I'm aware of the view encapsulation in Angular, and no, it's not for a specific component. What I'm after is to create several global themes (affecting all types of components). Our application consist of 3 main modules, where each has its own color (this is reflected in the primary/secondary colors). In addition to that, for each theme, you can choose a light (dark font on light background) or dark (light font on dark background) variant.

What I want is basically what is implemented for the material2 project:
https://medium.com/covalent-ui/angular-material-2-theme-tutorial-2f7e6c344006

As you can see, where ignite has the igx-theme function, material provides mat-light-theme and mat-dark-theme functins in order to define a light or dark theme

[simeonoff]

@Eralmidia I've prepared a sample for you, it uses igniteui-angular version 6.0.0 as this is our current version. Please note that our theming engine is centered around components and component themes, and less so around having just one global theme with a few predefined color palettes.
Our theming engine provides a lot more flexibility and favors composition over inheritance. That being said, the learning curve is bigger, and the approach to creating global themes is different to what angular material provide.

That being said, I understand we are lacking a lot in documentation right now, but we should have something a lot more comprehensive that covers more scenarios as soon as possible. Meanwhile, I will try to provide as much help and guidance I can.

Here's the sample I was talking about:
https://stackblitz.com/edit/angular-jdnstv

Let me know if you have any further questions.

[Eralmidia]

@simeonoff Thank's for the support. I do agree that this is mostly a matter of improving the documentation. The setup in the sample seems quite nice, and does what I would like to accomplish.

A couple of questions tho:

1. For the checkbox, you define its own theme ($cbx-theme). However, you do not do this for the buttons, still they are themed (orange for the dark theme)?
2. Also, is there a list of which functions should be used for the different components? I will have to apply themes for quite a few components, like nav drawer, grid, dialog and tabs.

[simeonoff]

1. The checkbox isn't aware of the background color its parent container has. So knowing the checkbox in the dark theme will lay against a dark background we have to create a custom theme for it and set the $variant property to light so that the checkbox is visible against the that background. Only a few components have this $variant property in their theme. Notice that I didn't modify the colors of the checkbox when I declared a new checkbox theme, but I had to pass it the palette I want that checkbox to use.

The button doesn't need a custom theme as its text is always gonna be visible and the colors it uses are assumed from the scoped igx-theme. Had I created a new button theme and included it in the theme .dark-theme scope, its palette would fall back to the $default-palette and not assume the colors of the scoped igx-theme.

2. By functions do you mean sass functions? The sassdoc should provide sufficient information as to what different sass functions do, albeit not how to use them in tandem.

[Eralmidia]

1. Ok, that makes sense. Thanks.
2. Yes, you've mentioned the sassdoc a couple of times. I'm afraid I'm a bit lost as of how to generate it. You mentioned clone a repository? Are you referring to a github repository? Our company doesn't really use github, so I'm not sure how to approach this. Or maybe I just misunderstood. The current theming guide doesn't seem to mention the sassdoc.

[simeonoff]

You don't have to be actively using GitHub to build the docs. You just download the .zip for your version from the https://github.com/IgniteUI/igniteui-angular/releases, then cd into the unzipped directory and do.

$ npm install && npm run build:docs

The docs will be generated in ./dist/docs/sass/;

[Eralmidia]

@simeonoff Thanks a lot for great support. I was successfully able to apply a dark theme for the navdrawer, so this seems to work fine now.

[Eralmidia]

I really like the power of this system. Granted the theme file will be alot bigger than for instance material2, but it gives a lot of freedom. Well done.

Just wanted to point out what might be a small error in the docs:

This is the third param for the tabs theme. Seems like the property name describes background, but the description talks about text color.

[simeonoff]

@Eralmidia Thanks, I will take care of it.