Here's a very descriptive guide on how to define your own theme (but you should definitely check out the link that @br.julien posted above.):
NOTE: If you're in a rush, just scroll down to the bottom of this answer to get the whole source code.
Prerequsites
- If you're using a CSS file, please change the filename extension to
.scss.
If you're using the Angular CLI, in your styles array, change styles.css to styles.scss:
"styles": [
"styles.scss" // <- Change to this
]
Get started
Import ~@angular/material/theming at the top of your styles.scss:
@import '~@angular/material/theming';
After that, add @include mat-core() in styles.scss, ideally after the import line:
@include mat-core();
Afterwards, define some variables for your app (primary, accent and optionally warn), then assign them to a function called mat-palette:
// I suggest that you should use another prefix, but `my-app` is fine as well
// Primary colour
$my-app-primary: mat-palette($mat-indigo);
// Accent colour
$my-app-accent: mat-palette($mat-pink, A200, A100, A400);
For all palettes, visit the source code (_palette.scss).
Also, see what the colour palettes look like on Material.io guidelines.
Next, define another variable for your app's theme and include the theme as a parameter of angular-material-theme (place this after the variables you defined above):
(Note: Choose any one of these options below:)
Light theme:
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent);
@include angular-material-theme($my-app-theme);
Dark theme:
$my-app-theme: mat-dark-theme($my-app-primary, $my-app-accent);
@include angular-material-theme($my-app-theme);
You're done!
Full source code
Here's some full source code for you to copy :)
styles.scss
@import '~@angular/material/theming';
@include mat-core();
$my-app-primary: mat-palette($mat-indigo);
$my-app-accent: mat-palette($mat-pink, A200, A100, A400);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent);
@include angular-material-theme($my-app-theme);
(Wow. All this work for just 8 lines of code.)
Anyways, if you want to learn more about Sass, check out the official documentation!