Angular Material - 设置颜色调色板

Question

Angular Material - 设置颜色调色板

6

我正在尝试将Angular项目与Material Design结合起来。我的package.json的一部分如下：

 "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 将颜色调色板设置为应用程序：

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

现在我想对Angular进行相同的操作，但不知道该怎么做。我需要通过提供程序设置调色板吗（然后可以使用哪个提供程序以及如何配置它？）。还是需要在我的核心scss文件中包含来自角材料模块的scss文件并设置一些属性？

- Vandeperre Maarten

应该将angular-material标签替换为angular-material2。 - Splaktar

3个回答

3

很不幸，由于Angular 2目前仍处于alpha版本，更改颜色调色板的唯一方法是直接修改_default-theme.scss并创建一个新的npm软件包。

根据Angular成员的说法：

@samio80 目前编写样式时考虑了主题，但我们还没有准备好主题部署策略。与此同时，您可以直接拉取源代码，并通过修改 _default-theme.scss 和创建 npm 软件包（通过脚本 stage-release.sh）来自定义主题。

来源：https://github.com/angular/material2/issues/287

- WillS

我不太同意。您自己的scss也可以与调色板一起添加。请查看此答案https://dev59.com/GFgR5IYBdhLWcg3wV8Le - Pradip

2

关于使用预定义的材料颜色方案，您可以始终遵循此处提供的主题指南available here。

如果您想定义自己的企业颜色方案，只需预先定义一个自定义调色板，并将其传递给mat-palette()函数：

...    
$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);
    ...

默认颜色调色板使用的颜色深度为500（默认）、100（较浅）和700（较暗）。创建自定义颜色方案的最简单方法是将一个调色板从标准调色板上复制过来，然后按照自己的喜好进行调整。

- Liquinaut

谢谢。这对我帮助很大。:-)。特别是你提供的额外的GitHub源链接。 - Tim Harker

既然你已经提供了许多颜色阴影，能否解释一下如何使用自定义颜色的不同阴影？因为我似乎还没有找到任何解决方法。 - Shift 'n Tab

谷歌已经围绕材料设计编写了完整的样式指南，其中有一篇很好的介绍，说明颜色应该如何使用：https://material.io/guidelines/style/color.html - Liquinaut

100、500和700的数值用作按钮、标题等基础颜色。其他阴影定义了中间的渐变步骤，可能会应用于动画、淡入淡出等。我会先定义基础颜色，然后使用你喜欢的图像程序找到一些适合中间阴影的颜色。 - Liquinaut

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brett Eckert · Accepted Answer

Angular Material 2现已更新到alpha 9版本，支持主题。主题文档解释了如何完全将自定义主题应用于应用程序。

以下是文档Sass文件的内容。您可以决定不使用提供的Material颜色，而使用自己的颜色。

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

需要注意的是，虽然主题支持是可用的，但尚未最终确定，文档说明他们计划随着时间的推移使这更加容易。然而，当前状态运行得非常好。