Tutorial

Angular Material: Creating a Custom Theme

Published on April 3, 2017
Default avatar

By Alligator.io

Angular Material: Creating a Custom Theme

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

In our introduction to Angular Material 2, we showed how to use one of the pre-built themes, but it’s just as easy to create a custom theme. This will allow you to specify primary, accent and warning colors that will be used on Angular Material components.

Your custom theme will be a Sass file and in our case we’ll call it theme.scss and place it in our app’s /src folder.

Don’t worry if you don’t use Sass for your the rest of your app. If you’re using the Angular CLI, you can simply add your Sass file to the list of styles in the .angular-cli.json configuration file and the Angular CLI will take care of compiling the css file:

.angular-cli.json
"styles": [
  "styles.css",
  "theme.scss"
],

In the theme file, you’ll want to first import the main theming Sass file from Angular Material and include the base styles:

theme.scss
@import '~@angular/material/theming';
@include mat-core();


Next, you’ll declare variables for your primary, accent and warning colors using the mat-palette function.

mat-palette takes a color name as its first argument, and the remaining optional second, third and fourth arguments define a default value, a lighter value and a darker value. The color names and values themselves are taken from the official Material Design color guidelines:

theme.scss
$my-app-primary: mat-palette($mat-blue-grey);
$my-app-accent:  mat-palette($mat-pink, 500, 900, A100);
$my-app-warn:    mat-palette($mat-deep-orange);

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

We finalize by creating a $my-app-theme variable that combines our color definitions with the mat-light-theme function, and finally include the result of calling the angular-material-theme function with our $my-app-theme.

The warning color is optional and will default to red if none is provided.

Additional and Alternate Themes

You can also create alternate themes if you’re feeling so inclined by nesting a theme definition inside a class. You’ll then simply add the class name to a parent element in your templates for the alternate theme to take effect.

Here’s our full file, with an alternate theme:

theme.scss
@import '~@angular/material/theming';
@include mat-core();

$my-app-primary: mat-palette($mat-blue-grey);
$my-app-accent:  mat-palette($mat-pink, 500, 900, A100);
$my-app-warn:    mat-palette($mat-deep-orange);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);
.alternate-theme {
  $alternate-primary: mat-palette($mat-light-blue);
  $alternate-accent:  mat-palette($mat-yellow, 400);
  $alternate-theme: mat-light-theme($alternate-primary, $alternate-accent);


Here’s how our two themes look:

Angular Material themes

app.component.html
<mat-card>
  Main Theme:
  <button mat-raised-button color="primary">
    Primary
  </button>
  <button mat-raised-button color="accent">
    Accent
  </button>
  <button mat-raised-button color="warn">
    Warning
  </button>
</mat-card>

<mat-card class="alternate-theme">
  Alternate Theme:
  <button mat-raised-button color="primary">
    Primary
  </button>
  <button mat-raised-button color="accent">
    Accent
  </button>
  <button mat-raised-button color="warn">
    Warning
  </button>
</mat-card>

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Alligator.io

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel