How to define a custom theme in angular material as to control the color of the button text?

Question

Hello I'm using angular material and I've defined a custom theme which I want to use as my accent theme:

$mdThemingProvider.definePalette('gold', {
    '50': '#333333',
    '100': '#333333',
    '200': '#333333',
    '300': '#333333',
    '400': '#333333',
    '500': '#FFB000',
    '600': '#FFB000',
    '700': '#FFB000',
    '800': '#FFB000',
    '900': '#FFB000',
    'A100': '#333333',
    'A200': '#FFB000',
    'A400': '#FFB000',
    'A700': '#FFB000',
    'contrastDefaultColor': 'light',
    'contrastDarkColors': ['50', '100',
     '200', '300', '400', 'A100'],
    'contrastLightColors': undefined
  });

$mdThemingProvider.theme('default')
    .accentPalette('gold');

I've set up a codepen here where you can see it in action, my problem is that the text for my buttons which have the md-accent class is still the standard white and not the black colors I've defined as contrast colours in the theme.

Does anybody know how I need to define my theme so that the black #333333 is used on the text of the md-accent buttons ?

Answer 1

There are two ways to do this:

1. You can change the contrastDefaultColor to be dark instead of light . This controls the default contrast color for all colors in the palette.

2. You can update your contrastDarkColors to include A200 which is the color that the buttons use.

You can read more here: https://material.angularjs.org/latest/Theming/03_configuring_a_theme