Theming Guide
Set your default theme by assigning a new theme to activatedTheme in the constructor function of
ThemeService (Location: src/app/shared/services/theme.service.ts).
Four custom themes are included.
- matx-blue
- matx-navy
- matx-light-purple
- matx-dark-pink
- matx-dark-purple
These files are located in src/assets/styles/scss/themes
At the top bar there is a theme switcher. If you don’t want to use theme switcher, remove that from topbar.
Open _theme.scss (Location: src/assets/styles/scss/_themes.scss)
and keep only one theme file if you don't need multiple themes.
Creating a new theme
First create color palettes for
- primary
- accent and
- warn
Create palette here http://mcg.mbitson.com.
Copy sass code for angular 2+, create file like
src/assets/styles/scss/themes/_matx-blue.scss with the generated code.
And include that file in src/assets/styles/scss/_themes.scss
For more about Angular Material theming