Suite modules theming

The suite framework modules are composed by multiples layers, where each one provide some functionality to top layer.

Talking about theming, the "functionality" that each component provide to superior layer it's a @mixin function.

Those mixin share and populate the angular material theme created in the application to all the layers.

As you can see in the picture the @mixin is included by the superior layers and each one export a new mix, this strategy is used in each level of the module until arriving at a core @mixin that is included by the application.

Don't be afraid about this architecture, most of this theming files are created when you run the module schematic (the green boxes in the picture are created by the suite schematic).

Create a component with custom theme

Component theme files

To theme a component you have to define a mixin that can receive a \$theme as parameter and then you this parameter you can get colors, material components colors (like the color of the cards), etc.

@mixin my-component-name-theme($theme) {
    // your theming configuration.
}

Important

If your component is going to support custom themes we recommend to create a theme file where you can define your component mixin.

[component-name].theme.scss

Module libraries themes

If your components support the lib have to define a styles folder in the src folder of your library. The name of your theme must be the next:

[module-name].theme.scss

Ui modules and Feature modules

The [module-name-ui].theme.scss have to ve included in a mixin in your [module-name-feature].theme.scss and exposed with a mixin.

Register your modules mixins

Once you have all the mixins created its important to include them somewhere, the correct place is the theming/suite-core.theme.scss file in the root folder of modules.

/// Include module theme mixins.
/// Use isDark for checking color theme
/// 
/// @param {$theme} The theme.
@mixin suite-core-theme($primary, $accent, $danger) {
    $theme: mat-light-theme($primary, $accent, $danger);
    $isDark: map-get($theme, is-dark);

    @if $isDark {
        color: $dark-primary-text;
        @include shell-dark-theme($theme);
        @include theming-dark-theme($theme);
    } @else {
        color: $light-primary-text;
        @include shell-light-theme($theme);
        @include theming-light-theme($theme);
    }

    @include angular-material-theme($theme);

    // Your new module theme goes here.
}