title: Configuring a dark theme for Angular Material
body: <p>I'm working on a design for my webapp, and I'd like a dark theme similar to that seen <a href="http://themes.getbootstrap.com/products/dashboard" rel="noreferrer">here</a>.</p>
  
  <p>Sadly I've found the <a href="https://material.angularjs.org/latest/Theming/03_configuring_a_theme" rel="noreferrer">Angular Material Theming Docs</a> very hard to get my head around; no mention of where each colour will be used, how to set a background color or a text color etc.</p>
  
  <p>I'm currently using:</p>
  
  <pre><code>.config(function($mdThemingProvider) {
      $mdThemingProvider.definePalette('coolpal', {"50":"#d9ddec","100":"#a6b1d2","200":"#8190bf","300":"#5468a5","400":"#495b90","500":"#252830","600":"#354168","700":"#2a3453","800":"#20283f","900":"#161b2b","A100":"#252830","A200":"#a6b1d2","A400":"#495b90","A700":"#2a3453"});
      $mdThemingProvider.definePalette('accentpal', {"50":"#ffffff","100":"#bfe7f7","200":"#8dd5f1","300":"#4ebee9","400":"#32b4e5","500":"#1ca8dd","600":"#1993c2","700":"#157fa7","800":"#126a8c","900":"#0e5570","A100":"#ffffff","A200":"#bfe7f7","A400":"#32b4e5","A700":"#157fa7"});
      $mdThemingProvider.definePalette('warnpal', {"50":"#f0fdf9","100":"#adf4dc","200":"#7bedc7","300":"#3ce5ac","400":"#21e1a0","500":"#1bc98e","600":"#17ae7b","700":"#149368","800":"#107855","900":"#0d5d42","A100":"#f0fdf9","A200":"#adf4dc","A400":"#21e1a0","A700":"#149368"});
  
  
      $mdThemingProvider.theme('default')
          .primaryPalette('coolpal').dark()
          .accentPalette('accentpal')
          .warnPalette('warnpal')
          .backgroundPalette('coolpal')
  })
  </code></pre>
  
  <p>With a bit of hacking of colours this works ok, but if I look at the colors in an <code>md-toolbar</code>, the text is set to <code>rgba(0,0,0,0.87);</code> and I have no idea how to change it; I assumed it would come from somewhere in my <code>coolpal</code> theme, but it's not. Here's how my text elements are being styled:</p>
  
  <p><a href="https://i.stack.imgur.com/euXZX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/euXZX.png" alt="Angular Material mdthemingprovider example"></a></p>
  
  <p>How can I alter <code>$mdThemingProvider</code> to ensure the text is a light color rather than opaque black?</p>