CODEWITHSUNDEEP
angular-material
Chris Camaratta
Chris Camaratta

Reputation: 2769

Theme button text using Angular Material Design

I'd like to use $mdThemingProvider to universally configure all buttons on my site with a custom palette. I can manipulate the buttons' background color by configuring A200 and A700 in the palette. I would also like to change the default text color. I've jiggered with contrastDefaultColor, contrastLightColors, and contrastDarkColors but the best I've been able to do is get black or white text.

The following snippit will produce white buttons with dark text:

var lightGrey = $mdThemingProvider.extendPalette('grey', {
  'A200': '#fefefe', // Element background color (default)
  'A700': '#fefefe', // Element hover background color (default)
  'contrastDefaultColor': 'dark',
  'contrastLightColors': '600 700 800 900'
});
$mdThemingProvider.definePalette('light-grey', lightGrey);

$mdThemingProvider.theme('default')
  // Accent palette controls buttons, links, etc
  .accentPalette('light-grey');

Changing contrastDefaultColor to "light" causes the text to turn white.

I could manually achieve the effect I want by overriding the generated stylesheet's rules:

.md-button.md-default-theme.md-fab {
  color: #bdc3c7;
}

...but I'm trying to use the tools provided in the library.

Upvotes: 5

Views: 2994

Answers (1)

Harsh Agrawal
Harsh Agrawal

Reputation: 11

I don't know why you are facing this problem but by giving A200 & A700 the color you want to give will solve the problem. like this: 

var lightGrey = $mdThemingProvider.extendPalette('grey', {
  'A200': '#bdc3c7', // Element background color (default)
  'A700': '#bdc3c7', // Element hover background color (default)
  'contrastDefaultColor': 'dark',
  'contrastLightColors': ['600', '700', '800', '900']
});

Note: Try to give contrast palette in array form.

And if you are facing some different problem please update or you can refer this link

Upvotes: 1

Related Questions