Angular Material - set color palette

Question

I'm trying to setup an Angular project in combination with material design. A part of my package.json looks like this:

 "dependencies": {
    "@angular2-material/button": "2.0.0-alpha.3",
    "@angular2-material/card": "2.0.0-alpha.3",
    "@angular2-material/checkbox": "2.0.0-alpha.3",
    "@angular2-material/core": "2.0.0-alpha.3",
    "@angular2-material/input": "2.0.0-alpha.3",
    "@angular2-material/list": "2.0.0-alpha.3",
    "@angular2-material/progress-bar": "2.0.0-alpha.3",
    "@angular2-material/progress-circle": "2.0.0-alpha.3",
    "@angular2-material/radio": "2.0.0-alpha.3",
    "@angular2-material/sidenav": "2.0.0-alpha.3",
    "@angular2-material/toolbar": "2.0.0-alpha.3",
    "angular2": "2.0.0-beta.16",
    "core-js": "^2.2.2",
    "normalize.css": "^4.1.1",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "~0.6.12"
  },

within AngularJS 1 you could set the color palette to the app via the mdThemingProvider:

 angular.module('myApp', ['ngMaterial']).config(function($mdThemingProvider) {
  $mdThemingProvider.theme('default')
    .primaryPalette('pink')
    .accentPalette('orange');
});

Now I want to do the same thing for Angular, but don't know how to do this. Do I need to set the palette via a provider (then which provider can be used and how can it be configured?). Or do I need to include the scss files from the angular material modules in my core scss file and set some properties?

Answer 1

Unfortunately, since Angular 2 is still in alpha right now, the only way to change the color palette is to modify _default-theme.scss directly and create a new npm package.

According to an Angular member:

@samio80 The styles are currently written with theming in mind, but we don't have a deployment strategy for theming ready yet. As a workaround in the meantime, you can pull the source directly and customize the theme by modifying _default-theme.scss and creating npm packages (via the script stage-release.sh).

Source: https://github.com/angular/material2/issues/287

Answer 2

Angular Material 2 has been updated to alpha 9 now and brings support for themes. The Theming Documentation explains how you can implement your own custom theme into your application in full.

Here are the contents of the the documentations sass file. You can decide not to use material colours provided and use your own.

 @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);

It should be noted that while theming support is availible, it is not finalized and the documentation states that they plan to make this even easier as time goes on. However the current state works quite well.

Answer 3

As for using predefined material colour schemes you can always follow the theming guide available here.

If you want to define your own corporate colour scheme, just define a custom palette beforehand and pass that to the mat-palette() function:

...    
$mat-custom: (
            50: #e0f2f1,
            100: #b2dfdb,
            200: #80cbc4,
            300: #4db6ac,
            400: #26a69a,
            500: #009688,
            600: #00897b,
            700: #00796b,
            800: #00695c,
            900: #004d40,
            A100: #a7ffeb,
            A200: #64ffda,
            A400: #1de9b6,
            A700: #00bfa5,
            contrast: (
                    50: $black-87-opacity,
                    100: $black-87-opacity,
                    200: $black-87-opacity,
                    300: $black-87-opacity,
                    400: $black-87-opacity,
                    500: white,
                    600: white,
                    700: white,
                    800: $white-87-opacity,
                    900: $white-87-opacity,
                    A100: $black-87-opacity,
                    A200: $black-87-opacity,
                    A400: $black-87-opacity,
                    A700: $black-87-opacity,
            )
    );
    
    // 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.
    $candy-app-primary: mat-palette($mat-custom);
    ...

Deafult color shades used from the palette are 500 (default), 100 (lighter) and 700 (darker). The easiest way to create a custom color scheme would be to copy a palette over from the standard palettes and adapt it to your liking.