How to set text color in Angular-Material?

Question

I want to set one word in a sentence to have md-primary color, and another word to have the accent color. I assumed something like this:

    Hel         


        
      

Answer 1

I think the only way is to create your own custom palette as demonstrated in the docs: https://material.angularjs.org/latest/#/Theming/03_configuring_a_theme under the paragraph Defining Custom Palette. There you can define 'contrastDefaultColor' to be light or dark. If I am correct, that should do it.

However, I want to use a standard palette and override the text color to light, not define a whole new palette.

You can also (and I would suggest this) extend an existing palette with 'extendPalette'. This way you wouldn't have to define all hue's but only set the 'contrastDefaultColor' accordingly.

*edit: just tested a solution

Add this to your config function (look for angular code example on link provided above about configuring theme)

var podsharkOrange;

podsharkOrange = $mdThemingProvider.extendPalette('orange', {
  '600': '#689F38',
  'contrastDefaultColor': 'light'
});

$mdThemingProvider.definePalette('podsharkOrange', podsharkOrange);

$mdThemingProvider.theme('default').primaryPalette('podsharkOrange', {
  'default': '600'
});

I just set the 600 HUE to a green color to verify if the theme change works, so you can ignore that line in the extendPalette.

So this only changed the colour to light, not a specific colour. So it didn't answer your question, but might still come in handy.