Material theme

From Cyclos4 Wiki
Jump to: navigation, search

The ticket confirmation page ([cyclos-root]/pay) is an application written using Angular Material 2. It uses a style sheet for the Material theme, plus customizations for the application itself. In Cyclos, on the Themes page it is possible to create a new theme for the ticket confirmation page, and it will have 2 main sections, each reflecting one of these styles. The custom style can be set in the last field, and will be appended to the final style.

However, the hardest part in the customization is generating a theme for Angular Material 2. It uses SASS to generate the themes based on a set of color palettes. Basically, the material theme uses 4 color definitions:

  • The primary color palette;
  • The accent color palette;
  • The warning color palette;
  • The background (either light or dark).

The Material design specification defines a set of color palettes that can be used. One of these should be used for the primary, accent and warning palettes.

Generating a theme for Angular Material 2 requires a set of commands. In order to run them, Node.js version 6 or later needs to be installed. Then, Angular CLI needs to be installed globally. For this, run the following command with administrative rights (ie, sudo on Linux):

npm install -g @angular/cli

Afterwards, the following series of commands need to be executed in as a regular user:

ng new --skip-install --skip-git --skip-tests --style scss material-theme
cd material-theme
npm install --save @angular/material
npm install --save node-sass

As result, the material-theme folder is created. Then, open the file src/styles.scss in a text editor, and customize the following content:

// Import the basic material theme
@import 'node_modules/@angular/material/theming';

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes. See
// The built-in palletes are: $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 and $mat-blue-grey.
$app-primary: mat-palette($mat-blue);
$app-accent:  mat-palette($mat-light-blue, A200, A100, A400);

// The warn palette is optional (defaults to red).
$app-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($app-theme);

The palette choices are present in the following SASS 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 and $mat-blue-grey.

It is also possible to generate a dark theme by replacing mat-light-theme with mat-dark-theme.

Finally, generate the CSS with the following command:

node_modules/.bin/node-sass src/styles.scss dist/styles.css --output-style compressed

The file dist/styles.css will be generated. It is the content of this file that should be copied and pasted in the 'Material theme' section in the Cyclos theme.

For more information on Angular Material 2 theming, please, refer to the theming guide.