How do I create a black and white theme with Angular Material Design?

Question

I am looking to create a simple black and white theme for Angular Material Design. The documentation is sparse in this area.

My goal is to do this:

1. Unaccented background color is white
2. Unaccented text color is black
3. Accents, error, warning colors to be decided later

I was hoping to do something like this in a config block:

$mdThemingProvider.theme('default')
  .primaryPalette('black')
  .backgroundPalette('white');

But, the white and black palettes do not exist.

Is there a simple way to do this?

Answer 1

I believe what you will need to do is create the palettes for both black and white. For example:

angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
  $mdThemingProvider.definePalette('black', {
    '50': '000000',
    '100': '000000',
    '200': '000000',
    '300': '000000',
    '400': '000000',
    '500': '000000',
    '600': '000000',
    '700': '000000',
    '800': '000000',
    '900': '000000',
    'A100': '000000',
    'A200': '000000',
    'A400': '000000',
    'A700': '000000',
    'contrastDefaultColor': 'light'
  });
  $mdThemingProvider.definePalette('white', {
    '50': 'ffffff',
    '100': 'ffffff',
    '200': 'ffffff',
    '300': 'ffffff',
    '400': 'ffffff',
    '500': 'ffffff',
    '600': 'ffffff',
    '700': 'ffffff',
    '800': 'ffffff',
    '900': 'ffffff',
    'A100': 'ffffff',
    'A200': 'ffffff',
    'A400': 'ffffff',
    'A700': 'ffffff',
    'contrastDefaultColor': 'dark'
  });

  $mdThemingProvider.theme('default')
    .primaryPalette('black')
    .backgroundPalette('white');
});

Naturally, you can flesh out the rest of each palette. Of note here is that the 'contrastDefaultColor' is important to get the text color right in each case. Also, unfortunately it does seem that you need to define the whole color palette. Another option if you don't want to create entirely new palettes is to extend an existing palette:

var blackPalette = $mdThemingProvider.extendPalette('grey', { '500': '000000' });
$mdThemingProvider.definePalette('black', blackPalette);

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