What is the best way to style using angular 2 mate

Question

I'm new to angular 2 material design the things i see was the 3 class primary, accent and warn that gives respective colors to the element, are these only things we can style out app using angular material 2? are there other class too? so that we can modify and use it for our purpose, or we have to style our app from scratch by making classes and attaching to the element,

Also I want to use themes but i dnt know how to use it in angular 2 project, im following official documentation this

I included this line in style.css but nothing happened

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css'

what is the concept of theme btw

Answer 1

If you are using angular-cli, which I recommend you to do.

Create a 'custom-theme.scss' in your app folder.

@import '~@angular/material/core/theming/all-theme';
// Plus imports for other components in your app.

// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include md-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$primary: md-palette($md-indigo);
$accent:  md-palette($md-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$warn:    md-palette($md-red);

// Create the theme object (a Sass map containing all of the palettes).
$theme: md-light-theme($primary, $accent, $warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($theme);

In your angular-cli.json add the custom style to the styles:

app/custom-theme.scss