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

Question

我希望为 Angular Material Design 创建一个简单的黑白主题。该领域的文档很少。

我的目标是做到这一点:

1. 非重音背景颜色为白色
2. 非重音文字颜色为黑色
3. 重音、错误、警告颜色稍后决定

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

$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