如何使用Angular Material Design创建黑白主题？

Question

我期待为Angular Material Design创建一个简单的黑白主题.该领域的文档很少.

我的目标是这样做:

1. 不重音的背景颜色为白色
2. 不重音的文字颜色为黑色
3. 口音,错误,警告颜色将在稍后决定

我希望在配置块中做这样的事情:

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

但是,白色和黑色调色板不存在.

有一个简单的方法吗？

Answer 1

我相信你需要做的是创建黑色和白色的调色板.例如:

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

当然,你可以充实每个调色板的其余部分.值得注意的是,'contrastDefaultColor'对于在每种情况下获得正确的文本颜色非常重要.此外,遗憾的是,您似乎需要定义整个调色板.如果您不想创建全新的调色板,另一个选项是扩展现有调色板:

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

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