How to set light foreground colors for text when using dark theme?

Question

I'm start experimenting with Angular Material (0.8.3 version to be specific).
From code of theming related directives and mdThemingProvider source code I'm found that light foreground is defined for dark theme. But text for text paragraphs remains dark as for default.
Even with their example code for Input Demo there color problem. When you delete content of title and e-mail input field placeholder text turns into dark grey so it is almost invisible.
I'm only starting looking through their library source code and can not find out how to active changing text for paragraphs and placeholders to contrast one.
From briefly looking at core/services/theming/theme.palette.js file I found some palettes properties with name prefix contrast. So I think they defines colors to be visible on dark theme. But how to active theme to using them?

Have anyone good suggestion to archive readable content on dark theme without many additional coding?
If this do not breaks dynamic changing theme of entire application (through calling $mdThemeProvider from js code) it would be wonderful.

Answer 1

I ran into this as well and I was able to solve in satisfactorily in my case (Angular Material v0.9.6) by setting the foregroundPalette of the theme:

myApp.config(function($mdThemingProvider) {
  $mdThemingProvider.theme('default')
    .dark()
    .foregroundPalette['3'] = 'rgba(255,0,0,1)';
})

You can see a demo here and compare it to the original foreground. This doesn't seem to be publicly documented, so it might be internal to AM and in fact it will change the foreground for your entire app, even if you are using multiple themes.

There are four shades for foreground, and they have different values for light vs. dark themes. Here are the defaults (from AM source):

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)'
};

As for why I picked 3, it happens to be the shade used by md-input-container, which I found by trial and error.