Skip to content

Instantly share code, notes, and snippets.

@tomastrajan
Last active February 1, 2021 02:41
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save tomastrajan/0007da8cd177143efc9659bf5ac99354 to your computer and use it in GitHub Desktop.
Angular Material Theming - multiple themes
@import '~@angular/material/theming';
// always include only once per project
@include mat-core();
// import our custom themes
@import 'my-theme.scss';
@import 'my-light-theme.scss';
@import 'my-dark-theme.scss';
.my-theme {
@include angular-material-theme($my-theme);
}
// additional css classes
// you can hardcode one of them on the <body> tag
// or switch dynamically during runtime with [class]
.my-light-theme {
@include angular-material-theme($my-light-theme);
}
.my-dark-theme {
@include angular-material-theme($my-dark-theme);
}
@paulayo93
Copy link

Hi Tomas, thanks for sharing this theming tutorial.

Please, I need help with using the theme, after declaring it in the "my-dark-theme" class.
How would I make it reflect on my pages declaring the angular-material-theme in the my-dark-theme class?

Thanks

@tomastrajan
Copy link
Author

@paulayo93
Copy link

Okay, I will go through it. Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment