如何访问（通过javascript）角度材料中当前主题的调色板颜色？

Question

在angular-material中，我们可以按照以下方式在角度config块中定义调色板：

angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
  $mdThemingProvider.theme('default')
    .primaryPalette('pink')
    .accentPalette('orange');
});

非常好......

但是

我无法找到一种方法来处理给定调色板的当前颜色值，只是在元素上使用相同的颜色，自定义与否，不匹配本机支持的元素列表。

支持主题的元素是：

• md-button
• md-checkbox
• md-progress-circular
• MD-进展线性
• md-radio-button
• md-slider
• md-switch
• md-tabs
• md-text-float
• MD-工具栏

  

引用https://material.angularjs.org/latest/Theming/02_declarative_syntax

也许多一点，但可以肯定的是，不支持自定义元素。

因此，如果我创建自定义DOM元素或嵌套元素（无论如何），如何应用当前700调色板的当前warn值default主题？

我在API中找不到任何内容。

我搜索类似service的内容，公开一个或多个可用的方法，例如：

$mdTheme.getTheme('default');

例如，此方法应返回由此主题中填充的所有调色板填充的对象。

编辑：使用示例

  

这个例子不是漂亮的代码设计，但它很简单

然后，我将能够在范围上公开它并在其他（自定义或本机）指令中使用它：

// controller:
angular.module('myApp').controller('myCtrl',function($scope,$mdTheme){

  var primary500 = $mdTheme.getTheme('default').getPalette('primary').getHue('500');

  $scope.customStyleBorderPrimary = {
    'border-bottom': 'solid 2px ' + primary500
  };

}

然后

<!-- in view -->
<h4 ng-style="customStyleBorderPrimary" ng-controller="myCtrl">
  My h4 title with primary border-bottom
</h4>

Answer 1

  

我刚刚创建了一组包含在凉亭包（swapMdPaint）中的angularjs模块（swap-md-paint）的有用指令。

分叉，文档和下载

  

https://github.com/rbecheras/swap-md-paint

安装

您可以按照以下方式安装：

bower install swap-md-paint --save

或手动：

  

http://bower.io/search/?q=swap-md-paint

或通过git clone

git clone https://github.com/sirap-group/swap-md-paint.git public/lib/swap-md-paint
cd public/lib/swap-md-paint
git checkout v0.4.0

导入

然后你需要在你的应用程序中导入它：

首先，在public/lib/swap-md-paint/swap-md-paint.min.js

中的body标记中添加index.html

将swapMdPaint注册为应用程序的模块依赖项。

API

现在您可以按照以下方式使用它：

您可以使用默认主题的accent颜色

<div swap-md-paint-fg="accent">Default Themes Accent Color</div>

或默认主题primary调色板hue-1等等。

<div swap-md-paint-fg="hue-1">Default Themes Primary Palette Hue-1</div>

您可以指定theme([default])意图调色板（[primary], accent, warn, background）和色调（[default] hue-1, hue-2, hue-3）

  

[] =＆gt;如果您不输入任何内容，则为默认值。

• swap-md-paint-fg在元素
中设置了css color
• swap-md-paint-bg在元素
中设置了css background-color
• swap-md-paint-bg在元素
中设置了css fill

如果您使用-svg指令，则还需要设置

md-icon {
  fill:inherit;
}

（或更具体的选择器）将颜色应用于基于svg的图标按钮

把我放在github上！

  

你可以在github上分叉我：https://github.com/rbecheras/swap-md-paint