如何在Angular Material中通过JavaScript访问当前主题调色板颜色？

Question

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

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

这很棒......

但是

我找不到一种处理给定调色板当前颜色值的方法，只是为了在不匹配原生支持元素列表的元素（自定义或非自定义）上使用相同的颜色。

支持主题的元素有：

• md-button
• md-checkbox
• md-progress-circular
• md-progress-linear
• md-radio-button
• md-slider
• md-switch
• md-tabs
• md-text-float
• md-toolbar

参考 https://material.angularjs.org/latest/Theming/02_declarative_syntax

也许还有更多，但是肯定不支持自定义元素。

因此，如果我创建一个自定义DOM元素，或嵌套元素（反正），如何应用当前默认主题下warn调色板的当前700值？

我在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>

- Rémi Becheras

---

你想将材料的默认调色板应用于你的自定义指令吗？ - nitin

例如，是的。或者能够将其应用于自定义元素的样式属性中：<span ng-style="{'border-bottom':'solid 2px '+palettePrimary500">或其他内容。 - Rémi Becheras

你可以从 https://www.google.com/design/spec/style/color.html#color-color-palette 中选择颜色板，编写自己的 CSS 类。 - nitin

Answer 1

我刚刚创建了一个包含一组有用指令的angularjs模块（swapMdPaint），并打包成一个bower软件包（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

导入

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

首先，在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>

你可以指定主题([默认])意图调色板 ([primary], accent, warn, background) 和 色调 ([默认] hue-1, hue-2, hue-3)。

[ ] => 如果你什么都不输入，就是默认值。

swap-md-paint-fg 设置元素中的 css 颜色。

swap-md-paint-bg 设置元素中的 css 背景颜色。

swap-md-paint-bg 设置元素中的 css 填充。

如果你使用 -svg 指令，你还需要设置。

md-icon {
  fill:inherit;
}

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

在Github上Fork我！

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

- Rémi Becheras