Angular Material - 设置调色板 [英] 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 文件中包含来自 angular material 模块的 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.

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