Material: Foreground color theme?

[vinkaga]

There doesn't seem to be a way to theme the foreground color. I do understand that different components have different foreground color transparency but they all seem to be based on pure black or pure white (see code fragment from https://github.com/angular/material/blob/master/src/core/services/theming/theming.js)

var DARK_FOREGROUND = {
  name: 'dark',
  '1': 'rgba(0,0,0,0.87)',
  '2': 'rgba(0,0,0,0.54)',
  '3': 'rgba(0,0,0,0.26)',
  '4': 'rgba(0,0,0,0.12)'
};
var LIGHT_FOREGROUND = {
  name: 'light',
  '1': 'rgba(255,255,255,1.0)',
  '2': 'rgba(255,255,255,0.7)',
  '3': 'rgba(255,255,255,0.3)',
  '4': 'rgba(255,255,255,0.12)'
};

Is there a way to overwrite those colors in themes?

[langley-agm]

https://material.angularjs.org/latest/#/Theming/03_configuring_a_theme

Be careful setting it to grey though, because it'll look like its still white, but what happens is that the hue that uses by default is really clear, you might want to change that too.

I think it was something like:

$mdThemingProvider.theme('default').backgroundPalette('grey',{ 'default': '100' });

change the 100 to w/e fits you.

Also note that at the moment it seems that very few components are affected by this default bg, just some containers like md-content and md-card.

[vinkaga]

@langley-agm, I do get how to set background palette but I am looking a way to customize _foreground_ palette.

[langley-agm]

my bad @vinkaga, I totally missread it.

Those values are part of the Google Material's Design Rules:

http://www.google.com.mx/design/spec/style/color.html#color-ui-color-application

So I don't think they did a way to change them, cannot say for sure though.

[amritk]

+1

[p-mcgowan]

+1

[brujo-rojas]

+1

[baelter]

+1

Would also be nice to know what the different colors in a theme are used for. Impossible to create a theme with the documentation provided. For example, what theme color to change to change onhover bg-color of a md-button?

[guilhermecvm]

+1

[yaiceltg]

+1

[rolandmaio]

@vinkaga Try this solution, it allows you to set the foreground colors via the $mdThemingProvider service. It works at least for 1.0.5.

[ThomasBurleson]

This issue is closed as part of our deprecation effort.
For details, see our post Spring Cleaning 2016.