CODEWITHSUNDEEP
angularjs
Steve Kim
Steve Kim

Reputation: 5601

Angular multiple md-theme-styles

I am just starting off with the angular material.

I have a blank page (basic setup) as below:

HTML:

<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">    
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">  
</head>
<body ng-app="BlankApp" ng-cloak>

<!-- No Content -->

<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>

JS:

var app = angular.module('BlankApp', ['ngMaterial']);

Pretty basic.

When I inspect the elements, I am getting multiple me-theme-style as below:

enter image description here

I just started with angularjs and I am not sure if I did something wrong.

Any suggestion will be much appreciated!

Thanks!

Upvotes: 8

Views: 3542

Answers (3)

Kraken
Kraken

Reputation: 5890

Angular is like a crazy cartoon multitool that comes equipped with refrigerators and lawn mowers, but sometimes all you need is piece of tin foil. The other answers here, while greatly helpful, talk around the solution without getting to the heart of the matter, which in my mind is helping the OP turn off the duplication.

Direct from the angular material docs

Lazy Generate Themes

By default, every theme is generated when defined. You can disable this in the configuration section using the $mdThemingProvider

angular.module('myApp', ['ngMaterial'])
    .config(function($mdThemingProvider) {
        //disable theme generation
        $mdThemingProvider.generateThemesOnDemand(true);
    });

Here's the exact syntax I used, and it worked like a champ. (Important to note this didn't break any style for us, either):

.config(['$mdThemingProvider', function($mdThemingProvider) {
    $mdThemingProvider.generateThemesOnDemand(true);
}])

Upvotes: 9

Jigar7521
Jigar7521

Reputation: 1579

As per the standards you should use, theme concept if you are using a material angular js. Here is the whole idea.

By default your Angular Material application will use the default theme, a theme that is pre-configured with the following palettes for intention groups:

primary - indigo accent - pink warn - red background - grey (note that white is in this palette) Configuring of the default theme is done by using the $mdThemingProvider during application configuration.

You can specify a color palette for a given color intention by calling the appropriate configuration method (theme.primaryPalette, theme.accentPalette, theme.warnPalette, theme.backgroundPalette).

Like from official site of material angular :

       angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {

  $mdThemingProvider.theme('default')
    .primaryPalette('pink', {
      'default': '400', // by default use shade 400 from the pink palette for primary intentions
      'hue-1': '100', // use shade 100 for the <code>md-hue-1</code> class
      'hue-2': '600', // use shade 600 for the <code>md-hue-2</code> class
      'hue-3': 'A100' // use shade A100 for the <code>md-hue-3</code> class
    })
    // If you specify less than all of the keys, it will inherit from the
    // default shades
    .accentPalette('purple', {
      'default': '200' // use shade 200 for default, and keep all other shades the same
    });
});

believe me you will get better lubrication in your code. just follow :

Upvotes: 0

lenilsondc
lenilsondc

Reputation: 9810

It's not a problem angularjs actually, neither with angular-material. It's the way angular-material generates the application theme programatically. In this case it's the default theme, but if you specify one by using angular-material configuration, it will generate your custom theme instead of the default.

In the end, it's just a feature to allow you to do such thing as creating your theme from the application like so:

angular.module('myApp', ['ngMaterial'])
    .config(function($mdThemingProvider) {

        $mdThemingProvider.theme('default')
            .primaryPalette('pink')
            .accentPalette('orange');
    });

Upvotes: 0

Related Questions