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

发布时间：2020-12-17 06:56:31 所属栏目：安全来源：网络整理

导读：我期待为Angular Material Design创建一个简单的黑白主题.该领域的文档很少. 我的目标是这样做：非重音背景颜色为白色非重音文字颜色为黑色口音,错误,警告颜色将在稍后决定我希望在配置块中做这样的事情： $mdThemingProvider.theme('default') .primary

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

我的目标是这样做：

>非重音背景颜色为白色
>非重音文字颜色为黑色
>口音,错误,警告颜色将在稍后决定

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

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

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

有一个简单的方法吗？

解决方法

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!