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?

Solution 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

Solution 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.

Solution 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.

Comments

[pableiros]

Links to external resources are encouraged, but please add context around the link so your fellow users will have some idea what it is and why it’s there. Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline.

[crthompson]

Great update to the answer. Clearly worthy of upvotes now. In your answer you say that you can "use your own" colors, but there is not an example of that. Do you have one?

[Param Singh]

The official doc page is giving 404

[Brett Eckert]

@param-singh I have updated the link, you should now be able to view the official guide again.

[Tim Harker]

Thank you. This helped me a lot. :-). Especially your additional link to GitHub source.

[Pradip]

I beg to differ. Your own scss can also be added with palettes. Check this answer stackoverflow.com/questions/41440998/…

[Roel]

now that you have given a lot of color shades, mind to add how different shades of that custom color works? because i cannot seems to find any workaround yet.

[Liquinaut]

Google has written a complete styleguide around material design, there is a good readup on how the colors are meant to be used: material.io/guidelines/style/color.html

[Liquinaut]

The 100, 500 and 700 values are used as base colors for buttons, headers and the like. The other shades define gradient steps in between and may or may not be applied to animations, fades etc. I would start by defining the base colors and then use your favorite image program to find some sweet spots for the shades in between.