Editor’s note: The post was origially published in April 2017 and has been updated in March 2023 to reflect the changes in Angular framework and material v15.0.0

Angular applications often need custom look and feel. For incorporating a custom theme in Angular, we will be using Angular Material

Let’s start with a simple Angular application using Angular CLI

Below are the commands to create a sample application.

# Install Angular CLI
npm install -g @angular/cli

# Create an app and add Angular Material support. Include animations and gesture, if needed
ng new angular-app

# As of Angular 15, the CLI allows you to add the routing and set default stylesheet as SCSS
# Would you like to add Angular routing? Yes
# Which stylesheet format would you like to use? SCSS

# Add Angular Material dependency
cd angular-app
ng add @angular/material

# Choose a prebuilt theme name, or "custom" for a custom theme: Custom
# Set up global Angular Material typography styles? Yes
# Include the Angular animations module? Include and enable animations

As of Angular material v15.0.0, there is no mention of HammerJS. Angular CLI will execute the npm install. Below is the custom theme you can use in styles.scss

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
// Plus imports for other components in your app.

// 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 for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$angular-app-primary: mat.define-palette(mat.$indigo-palette);
$angular-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

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

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$angular-app-theme: mat.define-light-theme((
  color: (
    primary: $angular-app-primary,
    accent: $angular-app-accent,
    warn: $angular-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 mat.all-component-themes($angular-app-theme);

/* You can add global styles to this file, and also import other style files */

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

Define a theme using the documentation. You can add the custom colour themes as well, refer documentation.