我需要动态生成自定义调色板来为我的 Angular 应用配置主题。
可用的默认 Material 调色板:https://material.io/guidelines/style/color.html .
我需要像上面的文档一样动态生成调色板输出，同时将颜色代码作为输入。
示例:如果我在代码中输入 #E91E63，输出应该是根据此输入的调色板。
有没有办法用angular/javascript/es6来实现？
最佳答案
我本来想做同样的任务，我想实现同样的解决方案，试试看这是否适合你，我也分享链接，在那里我能够找到这个解决方案(http://codepen.io/davidwolsey/pen/Qbrqoe)
<body ng-app="myApp">
<div ng-controller="demoController as demo" md-theme="{{theme}}" md-theme-watch="true">
<md-button href="#" class="md-primary md-raised" ng-click=changeTheme()>
Change theme
</md-button>
<div class="thing">
Current theme is {{theme}}.
</div>
<div>
<md-button href="#" class="md-primary md-raised">
Primary
</md-button>
<md-button href="#" class="md-raised md-accent">
Accent
</md-button>
<md-button href="#" class="md-raised md-warn">
Warn
</md-button>
</div>
</div>
</body>
(function(){
var app = angular.module('demoApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('indigo')
.primaryPalette('indigo')
.accentPalette('pink');
$mdThemingProvider.theme('lime')
.primaryPalette('lime')
.accentPalette('orange')
.warnPalette('blue');
// This is the absolutely vital part, without this, changes will not cascade down through the DOM.
$mdThemingProvider.alwaysWatchTheme(true);
})
.controller('demoController', function($scope){
$scope.theme = 'lime';
$scope.changeTheme = function() {
$scope.theme = $scope.theme === 'indigo' ? 'lime' : 'indigo';
};
});
})();
关于javascript - 为 Angular 主题生成自定义 Material 调色板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42968429/