如何访问（通过 javascript）angular material 中的当前主题调色板颜色？

Question

在angular-material中，我们可以通过以下方式在angularconfig块中定义调色板：

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

非常棒...

但是

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

支持主题化的元素有：

• md 按钮
• md-复选框
• md-progress-circular
• md-progress-linear
• md-单选按钮
• md-滑块
• md-switch
• md-tabs
• md-text-float
• md-工具栏

refs https://material.angularjs.org/latest/Theming/02_declarative_syntax

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

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

我在 API 中没有找到任何内容。

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

$mdTheme.getTheme('default');

例如，此方法应该return一个由该主题中所有调色板填充的对象。

编辑：用法示例

this example is not beautiful code design, but it is to be simple

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

// 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

I just created a set of useful directives wrapped in an angularjs module (swapMdPaint) packaged in a bower package (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克隆

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

导入

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

首先，在 index.html

中的 body 标签中附加 public/lib/swap-md-paint/swap-md-paint.min.js

并将 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)

[ ] => the default if you enter nothing.

• 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 上分叉我！

You can fork me on github: https://github.com/rbecheras/swap-md-paint