CODEWITHSUNDEEP
angularjsangular-material
user990993
user990993

Reputation: 309

Material angular: md-content with different colour of background

I have customization of theme in md-angular

$mdThemingProvider.theme('default')
    .backgroundPalette('customPallete', {
        'default': '200',
        'hue-1': '300',
        'hue-2': '500',
        'hue-3': '700'
});

Where customPallete - is my own defined palette with custom colours.

Background colour '200' is succesfully applied to md-content. But I can't add another colour of the background for some other components. For example, I want to create another colour block with some data. Here's code

<md-content class="md-hue-3">
 ... some code here ...
</md-content>

But background is the same, colour is '100' from default config of backgroundPalette. Does someone know how to customize blocks with different background colours using $mdThemingProvider ?

Upvotes: 3

Views: 2924

Answers (2)

Dmitry
Dmitry

Reputation: 1149

Another way is re-compile the needed style:

angular
    .module("YourModule")
    .config(($mdThemingProvider: IThemingProvider): void => {
        // hack new features in angular-material
        $mdThemingProvider.registerStyles(`
            md-content.md-THEME_NAME-theme {
                color: '{{foreground-1}}';
                background-color: '{{background-color}}';
            }
        `);
    });

So you will able to use all "md-hue-X" from your palette!

Upvotes: 2

camden_kid
camden_kid

Reputation: 12813

You need to use md-colors - CodePen

I have used "purple" as the background colour to illustrate the point. I could not get your "customPallete" to work.

Markup

<div layout="column" ng-cloak="" class="md-padding colorsdemoBasicUsage" ng-app="MyApp">
  <md-content md-colors="{background: 'default-background-hue-3'}" style="height:100px">
  </md-content>
</div>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
  .config(function ($mdThemingProvider) {
    $mdThemingProvider.theme('default')
      .primaryPalette('brown')
      .accentPalette('green')
      .backgroundPalette('purple')
  });

https://material.angularjs.org/latest/demo/colors https://material.angularjs.org/latest/api/directive/mdColors

Upvotes: 3

Related Questions