应用于动态主题的自定义调色板

Question

我正在尝试动态应用主题。为此，我在网站上输入 HEX 颜色作为主色和强调色，然后生成颜色图等。完成后地图如下所示：

{
    "50": "8080ff",
    "100": "6666ff",
    "200": "4d4dff",
    "300": "3333ff",
    "400": "1a1aff",
    "500": "0000ff",
    "600": "0000e6",
    "700": "0000cc",
    "800": "0000b3",
    "900": "000099",
    "A100": "9999ff",
    "A200": "b3b3ff",
    "A400": "ccccff",
    "A700": "000080"
}

然后我使用主题提供程序创建一个全新的调色板（customPrimary 是我上面的对象）：

this.themeProvider.definePalette('customPrimary', customPrimary);

我的this.themeProvider 是我的$mdThemingProvider 发送自我的App.Config.ts，我在其中定义了主题提供程序等等。基本上this.themeProvider = $mdThemingProvider。在您问太多问题之前，请阅读以下内容：https://github.com/angular/material/issues/5502

然后我生成一个新主题并设置调色板等等：

this.themeProvider.theme('whatever').primaryPalette('customPrimary').accentPalette('customAccent');

this.$mdTheming.generateTheme('whatever');

this.themeProvider.setDefaultTheme('whatever');
this.Theme = "whatever";

当我点击页面上的保存按钮时，页面主题变为白色，我收到此错误：

无法读取未定义的属性“颜色”

我无法追溯colors 的定义位置。我当然没有名为colors 的变量。似乎将调色板应用于主题是错误的。似乎有些不对劲。

如果我将调色板更改为 "blue" 之类的东西，它可以正常工作。设置我的自定义调色板不起作用。

我做错了什么？不幸的是，我无法提供示例，因此如果您需要更多信息，请告诉我。谢谢

Answer 1

我想我找到了部分解决方案 - CodePen

有两点需要注意

• 这似乎只适用于“默认”主题，而不是其他名称
• 这似乎不会覆盖任何以前的主题设置

经过一些详尽的调查后，我发现 customPrimary 调色板的设置方式与默认调色板的设置方式不同，如果它没有在配置中定义的话。这是我在控制台中查看 $mdThemingProvider 所看到的：

蓝色

customPrimary

所以我决定创建一个名为 workingPrimary 的自定义调色板，它模仿默认调色板数据，即使用具有对比度和值的对象而不是字符串。这似乎有效。所以现在唯一的技巧就是将你的十六进制值转换为对比度/值对象。

JS

angular.module('MyApp',['ngMaterial', 'ngMessages'])

.config(function ($mdThemingProvider, $provide) {  
  $mdThemingProvider.generateThemesOnDemand(true);
  $provide.value('themeProvider', $mdThemingProvider);
})

.controller('AppCtrl', function($scope, $mdTheming, themeProvider) {
  var customPrimary = {
    "50": "8080ff",
    "100": "6666ff",
    "200": "4d4dff",
    "300": "3333ff",
    "400": "1a1aff",
    "500": "0000ff",
    "600": "0000e6",
    "700": "0000cc",
    "800": "0000b3",
    "900": "000099",
    "A100": "9999ff",
    "A200": "b3b3ff",
    "A400": "ccccff",
    "A700": "000080"
  }

  var workingPrimary = {
    "50": {contrast: [0, 0, 0, 0.87], value: [227, 242, 253]},
    "100": {contrast: [0, 0, 0, 0.87], value: [227, 242, 253]},
    "200": {contrast: [0, 0, 0, 0.87], value: [227, 242, 253]},
    "300": {contrast: [0, 0, 0, 0.87], value: [227, 242, 253]},
    "400": {contrast: [0, 0, 0, 0.87], value: [227, 242, 253]},
    "500": {contrast: [255, 255, 255, 0.87], value: [100, 100, 253]},
    "600": {contrast: [255, 255, 255, 0.87], value: [227, 242, 253]},
    "700": {contrast: [255, 255, 255, 0.87], value: [227, 242, 253]},
    "800": {contrast: [255, 255, 255, 0.87], value: [227, 242, 253]},
    "900": {contrast: [255, 255, 255, 0.87], value: [227, 242, 253]},
    "A100": {contrast: [255, 255, 255, 0.87], value: [227, 242, 253]},
    "A200": {contrast: [255, 255, 255, 0.87], value: [227, 242, 253]},
    "A400": {contrast: [255, 255, 255, 0.87], value: [227, 242, 253]},
    "A700": {contrast: [255, 255, 255, 0.87], value: [227, 242, 253]}
  };

  $scope.addTheme = function () {
    themeProvider.definePalette('customPrimary', customPrimary);

    themeProvider.definePalette('workingPrimary', workingPrimary);
    themeProvider.theme('default').primaryPalette('workingPrimary', {"default": "500"});
    $mdTheming.generateTheme('default');
    $scope.theme = "default";

    console.log(themeProvider);
  }
});

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" md-theme="{{theme}}" md-theme-watch>
  <md-button ng-click="addTheme()">Add Theme</md-button>
  <br>
  <md-button class="md-primary">My Primary button</md-button>
</div>