Angular Material - Color Picker Set

Question

I am trying to customize an Angular project in conjunction with material design. 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" }, 

inside AngularJS 1 you can set the color palette in the application via mdThemingProvider:

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

Now I want to do the same for Angular, but I don’t know how to do it. Is it necessary to set the palette through the provider (then which provider can be used and how to configure it?). Or do I need to include scss files from Angular material modules in my main 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 change _default-theme.scss and create a new npm package .

According to Angular member:

@ samio80 Styles are currently theme-specific, but we don't yet have a deployment strategy. As a workaround at the same time, you can directly pull the source and configure the theme by changing _default-theme.scss and creating npm packages (via script stage-release.sh).

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

Answer 2

Angular Material 2 has now been updated to alpha 9 and supports themes. Theming Documentation explains how you can fully implement your own theme in your application.

Here is the contents of the sass documentation file. You can not use color materials 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 support for support is available, it is not complete, and the documentation indicates that they plan to make it even easier over time. However, the current state works quite well.

Answer 3

Regarding the use of predefined color schemes for materials, you can always follow the topic guide available here .

If you want to define your own corporate color scheme, just define a custom palette in advance and pass it 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); ... 

The Deafult colors used from the palette are 500 (default), 100 (lighter) and 700 (darker). The easiest way to create a custom color scheme is to copy the palette on top of the standard palettes and adapt it to your liking.