Добавление и изменение цвета в дизайне углового материала?

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, откуда этот цвет исходит и как я могу использовать другие цветные шаблоны. Я не вижу этого шестнадцатеричный цвет где-нибудь в теме amazingpalletname

Что это 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