在角材料设计中添加和更改颜色？

Question

我正在尝试在材料设计基础模板中添加一些自定义颜色，

module.js

var app = angular.module('AppTool', ['ngMaterial', 'ui.router', 'ngCookies', 'ngResource','ngRoute', 'satellizer', 'myConfig.config', 'ngMdIcons'])
    .config(function($mdThemingProvider) {
         $mdThemingProvider.definePalette('amazingPaletteName', {
        '50': 'ffebee',
        '100': 'ffcdd2',
        '200': 'ef9a9a',
        '300': 'e57373',
        '400': 'ef5350',
        '500': 'f44336',
        '600': 'e53935',
        '700': 'd32f2f',
        '800': 'c62828',
        '900': 'b71c1c',
        'A100': 'ff8a80',
        'A200': 'ff5252',
        'A400': 'ff1744',
        'A700': 'd50000',
        'contrastDefaultColor': 'light',    // whether, by default, text         (contrast)
                                    // on this palette should be dark or light
        'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
         '200', '300', '400', 'A100'],
        'contrastLightColors': undefined    // could also specify this if default was 'dark'
    });

   $mdThemingProvider.theme('myTheme')
        .primaryPalette('amazingPaletteName');
});

overview.html

 <md-content>
            <md-tabs md-dynamic-height md-border-bottom class="md-primary md-hue-2" style="" >
                <md-tab class="overview_tabs" label="Overview" style="">
                    <md-content class="md-padding details-tab">
                        <ng-include src="'templates/overview.html'"></ng-include>
                    </md-content>
                </md-tab>

            </md-tabs>
        </md-content>

[当我看到标签标题的颜色时，它会显示：rgb（40、53、147）或＃283593，这种颜色来自哪里以及如何使用其他颜色模板。我在greatpalletname主题中的任何地方都看不到这种十六进制颜色

这50、100和所有数字是什么，我们如何使用它们，

Answer 1

左侧数字（50、100等）可用于在Angular-Material中指定主题颜色。

    $mdThemingProvider.theme('default')
        .primaryPalette('purple', {
            'default': '700', // by default use shade from the palette for primary intentions
            'hue-1': 'A400', // use shade for the <code>md-hue-1</code> class
            'hue-2': '600', // use shade for the <code>md-hue-2</code> class
            'hue-3': 'A100' // use shade for the <code>md-hue-3</code> class
        })
        // If you specify less than all of the keys, it will inherit from the default shades
        .accentPalette('deep-purple', {
            'default': '200' // use shade 200 for default, and keep all other shades the same
        })

您在使用中看到的数字，对应于左侧数字以设置颜色。然后，您可以像我一样将默认色调设置为'700'，这比正常默认色调要深。

在此示例中，我的网站使用的是紫色主题的变体，因此我可以将色相设置与Google设置不同。

Google Color Design Guidelines