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

【问题标题】：How to access (via javascript) to the current theme's palette colors in angular material?如何访问（通过 javascript）角度材料中当前主题的调色板颜色？
【发布时间】：2016-05-18 20:43:24
【问题描述】：

在angular-material中，我们可以在一个角度config块中定义调色板，方法如下：

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

真是太棒了……

但是

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

支持主题化的元素有：

md 按钮
md-复选框
md-progress-循环
md-progress-linear
md 单选按钮
md-滑块
md 开关
md 选项卡
md-text-float
md 工具栏

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

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

因此，如果我创建自定义 DOM 元素或嵌套元素（无论如何），如何应用当前 warn 调色板的当前 700 值 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>

【问题讨论】：

您想将材质的默认调色板应用到您的自定义指令吗？
例如，是的。或者能够将其应用于自定义元素的样式属性：<span ng-style="{'border-bottom':'solid 2px '+palettePrimary500"> 或其他。
您可以使用来自google.com/design/spec/style/color.html#color-color-palette的调色板编写自己的css类

标签： javascript css angularjs material-design angular-material

【解决方案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>

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

[ ] => 不输入时的默认值。

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 上 fork 我：https://github.com/rbecheras/swap-md-paint

【讨论】：