gpt4 book ai didi

javascript - 为 Angular 主题生成自定义 Material 调色板

转载 作者:行者123 更新时间:2023-11-30 11:40:15 28 4
gpt4 key购买 nike

我需要动态生成自定义调色板来为我的 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/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com