javascript - 如何访问(通过javascript) Angular Material 中的当前主题调色板颜色？

Question

在angular-material ，我们可以通过以下方式在 Angular config block 中定义调色板:

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

非常棒...

但是

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

支持主题化的元素有:

• md 按钮
• md-复选框
• md-progress-circular
• md-progress-linear
• md-单选按钮
• md- slider
• md-开关
• md 标签
• md-text-float
• md-工具栏

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

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

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

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

我搜索类似服务的东西，公开一个或多个可用的方法，例如:

$mdTheme.getTheme('default');

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

编辑:使用示例

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

然后，我将能够在范围内公开它并在其他(自定义或 native )指令中使用它:

// 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 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 注册为您的应用程序的模块依赖项。

应用程序接口(interface)

现在您可以按如下方式使用它:

您可以使用默认主题的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 ) 和 hue ( [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 上 fork 我!

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