Angular Material Palette - primary contrast definition

Question

I've got a toolbar with a custom theme and I'm trying to figure out where it's picking up the contrast colour for the <md-icon> fill. Everything I've tried so far results in white icons on my custom blue toolbar.

Looking through the Material code, I found that the value is being filled in with {{primary-contrast}} but I can't find where that's being set.

Where should I look to configure the primary-contrast value for my palette?

md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar) md-icon {
    color: '{{primary-contrast}}';    fill: '{{primary-contrast}}';
}

My palette:

$mdThemingProvider.definePalette('myBlue', {
    '50': 'e3e4e7',
    '100': 'b9bcc3',
    '200': '8b8f9b',
    '300': '5c6272',
    '400': '394154',
    '500': '161f36',
    '600': '131b30',
    '700': '101729',
    '800': '0c1222',
    '900': '060a16',
    'A100': 'b9bcc3',
    'A200': '8b8f9b',
    'A400': '394154',
    'A700': '101729',
    'contrastDefaultColor': 'light'
});

My theme:

$mdThemingProvider.theme('myMenu')
    .primaryPalette('myBlue')
    .backgroundPalette('myBlue')
    .dark();

In the material design, all the icons are used as black or white and it will adjusted by the color theme defined in the config. — nextt1
did you find something for this? I'm also trying to set the contrast color using the md-colors directive but there doesn't seem to be a way of doing it. — Andrei Tătar

dpix dpix · Accepted Answer · 2017-08-29T09:54:30

Primary contrast colors are fixed as black and white at 0.7 opacity. As far as I know you cannot change these. You can however inject your own custom css and get color values replaced by the theme.

https://material.angularjs.org/latest/api/service/$mdThemingProvider#custom-theme-styles

Angular Material Palette - primary contrast definition

1 Answers