Application theming

This document aims to provide information about how to setup and include the suite theme module to your application.

As you probably know, we are using the theme engine of angular material to standardize the look and feel in all the applications, this library provides mixins to set the color pallet to the material components.

In order to simplify the theme configuration, the suite framework provides two mixins:

• suite-core-dark-theme
• suite-core-light-theme

Both mixins setup the theme for suite components and angular material components.

Material pallet

Material design provide a pallet with recommended colors that you can combine to setup your custom themes.

To define your theme you have to set the next variables:

• Primary color: Color most widely used across all screens and components.

• Accent color: Colors used for the floating action button and interactive elements

• Warn color: colors used to convey error state

You can access to all the material colors using variables the colors variables:

$mat-red, $mat-pink, $mat-purple, $mat-deep-purple, $mat-indigo, $mat-blue,
$mat-light-blue, $mat-cyan, $mat-teal, $mat-green, $mat-light-green,
$mat-lime, $mat-yellow, $mat-amber, $mat-orange, $mat-deep-orange,
$mat-brown, $mat-grey, $mat-blue-grey, $mat-black, $mat-white

For instance here you can see the \$mat-orange pallet:

You can use a Interactive color pallet to mock your custom themes.

Themes mode

The suite framework provide two mixins:

• light-shell-theme : Setup all the components with a default light mode.

• dark-shell-theme: Setup all the components with a default dark mode.

IMPORTANT: You have to include those mixins inside a class ALWAYS.

Application theme

First of all you need a theme.scss file in your app. The file must be part of the styles array in the angular.json file.

The theme file is going to import all the mixins that you required, for instance

// Import suite core theming.
@import '~@itsynch/suite/theming';

.app-theme {
    $primary: mat-palette($mat-purple);
    $accent: mat-palette($mat-orange, A400, A100, A700);
    $danger: mat-palette($mat-red);

    @include suite-core-dark-theme($primary, $accent, $danger);
}

As you can se above "app-theme" is a class with custom themes colors. Then to apply the theme it should be registered, to do it the suite framework has a ApplicationThemeService were you can set this theme and add many others.

    constructor(private themeService: ApplicationThemeService) {

        // Register all the available themes.
        this.themeService.setAvailableThemes([
            {
                cssClass: 'light',
                name: 'Light',
            },
            {
                cssClass: 'dark',
                name: 'Dark',
            }
        ]);

        // Set the default theme.
        this.themeService.setApplicationTheme('app-theme');
    }