How do i change the angular material md-primary button text color?

Question

Basically i cant for the life of me figure out how to set the text color of the buttons using angular material and anything else using the md-primary background color.

The code i am using to create the theme is

var customPrimary = {
        '50': '#7de3cf',
        '100': '#69dec8',
        '200': '#54dac0',
        '300': '#3fd5b8',
        '400': '#2dceaf',
        '500': '#28b99d',
        '600': '#23a48b',
        '700': '#1f8f79',
        '800': '#1a7a68',
        '900': '#166556',
        'A100': '#92e8d7',
        'A200': '#a7ecdf',
        'A400': '#bcf1e7',
        'A700': '#115044'
    };
    $mdThemingProvider
        .definePalette('customPrimary',
        customPrimary);
    $mdThemingProvider.theme('buttons')
        .primaryPalette('customAccent');

However no matter what i try i can get the text colour to be #fff unless i use css and !important which i'd like to avoid, as it means overriding several selectors.

try changing the '500' color – Toolkit Mar 18 '16 at 12:56 — Toolkit, Mar 18 '16 at 12:56

score 8 · Accepted Answer · answered Jan 27 '16 at 16:11

From the docs:

angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
  $mdThemingProvider.definePalette('amazingPaletteName', {
    '50': 'ffebee',
    ...
    '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('default')
    .primaryPalette('amazingPaletteName')
});

The important thing here is the contrastDarkColors/contrastLightColors. The "contrast" color is the text (or icon) color that shows up on buttons.

I'm guessing you'll want something like

'contrastDefaultColor': 'light',
'contrastDarkColors': ['50', '100', '200', '300', 'A100', 'A400']

Edit: if you for some reason wanted a color on a button, creating a class that has an !important is fine, e.g.

.md-button.cyan-text {
    color: cyan !important;
}

and

<md-button class="md-primary md-raised cyan-text">Hello world</md-button>

Amazing, been banging my head against this all afternoon, think i went document blind, using `'contrastDefaultColor': 'light'` is perfect. — JohnC, Jan 27 '16 at 16:20

How do i change the angular material md-primary button text color?

1 Answers1