Using Material Components & Theming

CloudApps use Angular Material components for the user interface. All of the components available in the Material component library are available for use in your CloudApp. In addition, Alma provides information to your CloudApp about the institution’s selected theme. This allows you to make your app appear as more of a natural extension to Alma. Some material components will inherit the theme colors naturally, such as buttons using color selectors such as primary and secondary. Additional elements which are appropriate for theming include section headers.

In this tutorial, we’ll show how to use the theme information provided by Alma in our components.

First, follow the instructions in the “Adding additional routes” tutorial to add a new component and route called “theming”.

Using material components

You can use any of the Angular Material components in your CloudApp. Here we create a button of type mat-raised-button. Because we specify color="primary" the button will inherit the color from the Alma theme.

<button mat-raised-button color="primary">Primary</button>

Using custom styles with themes

To create custom styles that leverage colors from the theme, you’ll need to create a special SCSS file in your component directory. First, create a file named theming.component.theme.scss in the theming directory. In the file, we create a @mixin function which includes a class from our HTML. The style uses the mat-color function to get the primary color from the theme.

Then we add a reference to our function in the main.scss file.

The end result is a style that uses our theme color.