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

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"; 

当我打我的页面，该页面主题保存按钮改变为白色，我得到这个错误：

Cannot read property 'colors' of undefined

我不能追溯到哪里colors定义。我当然没有一个名为colors的变量。这似乎是应用调色板的主题是做错了。有些东西看起来不正确。

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

我在做什么错？不幸的是我不能提供一个例子，所以请让我知道你是否需要更多信息。由于

Answer 1

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

有两点需要注意，虽然

• 这似乎只为“默认”的主题，而不是另一名
• 这并未工作似乎无视任何以前的主题设置

经过一些详尽的调查后，我发现customPrimary调色板没有被设置我n与默认调色板相同，如果它没有在配置中定义。这是我所看到的在控制台看$ 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>