Theme button text using Angular Material Design

Question

I would like to use $mdThemingProvider to universally customize all the buttons on my site using a custom palette. I can manipulate the background color of the buttons by customizing the A200 and A700 in the palette. I would also like to change the default text color. I laughed with contrastDefaultColor , contrastLightColors and contrastDarkColors , but the best I could do was get black or white text.

The following snippets will create 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 style sheet rules:

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

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

Answer 1

I don’t know why you came across this problem, but by giving the A200 and A700, the color you want to give will solve the problem. eg:

 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 specifying a contrasting palette in the form of an array.

And if you encounter any other problem, please update it, or you can link to this link