Menu

The complete guide to Angular Material Themes – Tomas Trajan – Medium

November 10th, 2017

The complete guide to Angular Material Themes

☞ 

  #Angular

  • It enables us to implement beautiful themes with only a little effort on our side!Angular Material theming capabilities in practice (light, dark and default themes of our as of June 2017, the official theming documentation seems to be a bit lackluster and it takes a while to figure out how…
  • Using custom theme in our applicationUsing specific css class for single theme is not necessary per se but it will help us when adding additional themesAdding multiple custom themesTo use multiple themes we simply need to import additional themes and create respective css classes for each theme.Use multiple custom themesTheme class…
  • component.scss but we will also create new file where we will use style rules which have anything to do with color.While is not official naming convention, I found it very helpful because IDE will put original styles file and theme file next to each other based on default alphabetical ordering.The…
  • There are two available mat-dark-theme and available sub-values are…Background and foreground Angular Material variablesUsing custom component themesTo use our custom component theme we have to include it in main styles.scss file.It is a good practice to create separate custom-components-theme mixin where we can collect all of our custom components so…
  • scss file and create our own palette variables (eg: $my-company-blue) with all the sub-values which are contained in standard Angular Material palettes like 100, 200, contrast, …Then we simply import this file in the custom theme definition file so that we can use the provided values.That’s it!We learned how to theme…

Theming support in an application can be pretty useful. From nice to have feature like letting user to chose from available color schemes to get personalized experience to more mission critical…

The complete guide to Angular Material ThemesTheme your Angular Material apps like a PRO, examples included 😉For what is the web if not to express our ideas?Check out new live coding video tutorial video from meetup.Theming support in an application can be pretty useful. From nice to have feature like letting user to chose from available color schemes to get personalized experience to more mission critical branding capabilities like building multi-tenant SaaS product where every client wants to use their own domain, logo and colors to offer branded services to their end customers.Lately I have been working on Angular ngRx Material Starter project and surprisingly, one of the best features of new Angular Material component library proved to be its theming capabilities. It enables us to implement beautiful themes with only a little effort on our side!Angular Material theming capabilities in practice (light, dark and default themes of our as of June 2017, the official theming documentation seems to be a bit lackluster and it takes a while to figure out how the whole thing actually works and how to get access to the needed colors defined as a part of the theme.Anatomy of a themeDefining a theme in Angular Material is extremely simple, all we need to do is to create a theme file, select three color palettes for the main theme colors — primary, accent and warn — and we are all set!Feel free to explore all the palettes that are available out of the box.Angular Material theme definition fileThe numbers behind the palette variable name

The complete guide to Angular Material Themes – Tomas Trajan – Medium