角材料-设置调色板 [英] Angular Material - set color palette

问题描述

我正在尝试结合材料设计来设置Angular项目. 我的package.json的一部分看起来像这样:

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"
  },

在AngularJS 1中，您可以通过mdThemingProvider将调色板设置为应用程序:

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');
});

现在我想对Angular做同样的事情，但是不知道如何做. 我是否需要通过提供程序设置调色板(然后可以使用哪个提供程序以及如何对其进行配置?).还是我需要将角度材料模块中的scss文件包括在我的核心scss文件中并设置一些属性?

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?

推荐答案

Angular Material 2现在已更新为alpha 9，并提供了对主题的支持. 主题文档说明了如何实现自己的自定义主题完全进入您的应用程序.

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.

这是文档sass文件的内容.您可以决定不使用提供的材料颜色，而使用自己的颜色.

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.

这篇关于角材料-设置调色板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！