How to set text color in Angular-Material?

Question

I want to set one word in a sentence to have md-primary color, and another word to have the accent color. I assumed something like this:

<div>
    Hello <span class="md-primary">friend</span>. 
    How are <span class="md-accent">you</span>?
</div>

But those classes work only for some specified components.

What's the way to do it?

Answer 1

I was just able to do this using Angular Material 1.1.0.

You use the md-colors directive similar to how you would ng-class:

<span md-colors="{color:'primary'}">...</span>

The above code will color the text the primary color. The object that you pass to md-colors uses the key as the css property (i.e. 'color', 'background', etc) and the value as the theme and/or palette and/or hue you want to use.

Source Docs

Answer 2

Angular Material's docs explicitly enumerate list of components, which you able to differentiate with md-theme attribute:

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

From Angular Material documentation, under Theming / Declarative Syntax.

So I think the short answer is: you can't do it.

Answer 3

EDITED 2015/07/23

TitForTat's comment has better solution https://github.com/angular/material/issues/1269#issuecomment-121303016

---

I created a module:

(function () {
        "use strict";
        angular
            .module('custiom.material', ['material.core'])
            .directive('cMdThemeFg', ["$mdTheming", function ($mdTheming) {
                return {
                    restrict: 'A',
                    link: postLink
                };
                function postLink(scope, element, attr) {
                    $mdTheming(element);
                    element.addClass('c-md-fg');
                }

            }])
            .directive('cMdThemeBg', ["$mdTheming", function ($mdTheming) {
                return {
                    restrict: 'A',
                    link: postLink
                };
                function postLink(scope, element, attr) {
                    $mdTheming(element);
                    element.addClass('c-md-bg');
                }
            }]);
    })();

and then append

.c-md-fg.md-THEME_NAME-theme.md-primary {    color: '{{primary-color}}'; }
.c-md-fg.md-THEME_NAME-theme.md-accent {    color: '{{accent-color}}'; } 
.c-md-fg.md-THEME_NAME-theme.md-warn {    color: '{{warn-color}}'; } 
.c-md-bg.md-THEME_NAME-theme.md-primary {    background-color: '{{primary-color}}'; } 
.c-md-bg.md-THEME_NAME-theme.md-accent {    background-color: '{{accent-color}}'; } 
.c-md-bg.md-THEME_NAME-theme.md-warn {    background-color: '{{warn-color}}'; }

into angular-material.js at 13783 line

angular.module("material.core").constant("......  HERE")

Then, I can simply apply c-md-theme-fg and/or c-md-theme-bg to element to apply theme colors. Like this:

<div c-md-theme-bg class="md-primary md-hue-3">dasdasdasd</div>
<span c-md-theme-bg class="md-primary">test</span>

It works.

ps: sorry about english, come from Taiwan :)

Answer 4

I think the only way is to create your own custom palette as demonstrated in the docs: https://material.angularjs.org/latest/#/Theming/03_configuring_a_theme under the paragraph Defining Custom Palette. There you can define 'contrastDefaultColor' to be light or dark. If I am correct, that should do it.

However, I want to use a standard palette and override the text color to light, not define a whole new palette.

You can also (and I would suggest this) extend an existing palette with 'extendPalette'. This way you wouldn't have to define all hue's but only set the 'contrastDefaultColor' accordingly.

*edit: just tested a solution

Add this to your config function (look for angular code example on link provided above about configuring theme)

var podsharkOrange;

podsharkOrange = $mdThemingProvider.extendPalette('orange', {
  '600': '#689F38',
  'contrastDefaultColor': 'light'
});

$mdThemingProvider.definePalette('podsharkOrange', podsharkOrange);

$mdThemingProvider.theme('default').primaryPalette('podsharkOrange', {
  'default': '600'
});

I just set the 600 HUE to a green color to verify if the theme change works, so you can ignore that line in the extendPalette.

So this only changed the colour to light, not a specific colour. So it didn't answer your question, but might still come in handy.

Answer 5

The latests bits bring good news to this issue... This functionality has been added to the 1.1.0-rc3 (2016-04-13) version. It's not stable yet, but my first test on it are satisfactory.

Now you can use the mdColors directive and $mdColors service in conjunction with themes to achieve what you're looking for.

Please, take a look at:

https://github.com/angular/material/blob/master/CHANGELOG.md#110-rc3-2016-04-13

to see the announcement, and look for the mdColor directive and $mdColor service in the docs for some examples.

Answer 6

there is an issue in github that disccused this, like mentioned above TitForTat's comment in that issue almost had the perfect solution, but it doesn't work with costume palettes, i add a comment there with a fixed solution, you can check it out: https://github.com/angular/material/issues/1269#issuecomment-124859026

Answer 7

Anchor element () is reacting to the Angular Material current theme setting since version 1.0.0-rc1: https://github.com/angular/material/blob/master/CHANGELOG.md#110-rc1-2016-03-09.

Answer 8

This answer is outdated please check @factalspawn answer

With 'pure' angular-material you can't. But you can try usign this: https://gist.github.com/senthilprabhut/dd2147ebabc89bf223e7

Answer 9

For me i assume everything that starts with md- you can only apply theme colors to them.

In the documentation there are some components that are not documented where you can use theme colors. Example:

<md-subheader class="md-warn"> my subheader </md-subheader>
<md-icon class="md-accent"> </md-icon>