Rémi Becheras February 2016

How to access (via javascript) to the current theme's palette colors in angular material?

In angular-material, we can define color palettes in an angular config block the folowing way:

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

Its pretty great...

But

I can't find a way to handle the current color value of given palette, simply for using the same colors on elements, custom or not, that don't match the list of natively supported elements.

The elements that support theming are :

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

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

Maybe a little more, but sure, custom elements are not supported.

Thus, if I create a custom DOM element, or nested elements (anyway), how can I apply the current 700 value of the warn palette of the current default theme ?

I didn't found anything in the API.

I search something like a service exposing one or more method(s) usable like following, for example:

$mdTheme.getTheme('default');

This method, for example, should return an object filled by all palettes filled in this theme.

EDIT : an example of usage

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

Then, I will be able to expose it on scope and use it in othe

Answers


Rémi Becheras February 2016

I just created a set of useful directives wrapped in an angularjs module (swapMdPaint) packaged in a bower package (swap-md-paint).

Fork, documentation and downloads

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

 Install

You can install it as follow:

bower install swap-md-paint --save

or manually:

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

or via 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

Import

Then you need to import it in your application:

First, append public/lib/swap-md-paint/swap-md-paint.min.js in your body tag in index.html

And register swapMdPaint as a module dependency of your application.

API

Now you can use it as follow:

You can use the default theme's accent color

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

Or the default themes primary palette hue-1 and so on.

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

You can specify theme([default]) intent palette ( [primary], accent, warn, background ) and hue ( [default] hue-1, hue-2, hue-3)

[ ] => the default if you enter nothing.

  • swap-md-paint-fg set the css color in the element
  • swap-md-paint-bg set the css bac

Post Status

Asked in February 2016
Viewed 2,950 times
Voted 9
Answered 1 times

Search




Leave an answer