適用於動態主題的自定義調色板

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>