angular material theme not working

Question

In config block, I have:

 .config(['$urlRouterProvider', '$stateProvider', '$locationProvider', '$mdThemingProvider', function ($urlRouterProvider, $stateProvider, $locationProvider, $mdThemingProvider) {


    $locationProvider.html5Mode(true);

    $urlRouterProvider.otherwise('/');

    $mdThemingProvider.theme('altTheme')
      .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
      })
      .accentPalette('purple', {
        'default': '200' // use shade 200 for default, and keep all other shades the same
      });

    $mdThemingProvider.setDefaultTheme('altTheme');
    $mdThemingProvider.alwaysWatchTheme(true);

In HTML:

<header>
  <md-toolbar class="md-hue-1">
    <div layout="row" layout-align="center center" flex>
      Beauty Plus Marketing
    </div>
  </md-toolbar>
</header>

However, There isn't any background applied.

Here's the style I am seeing in the browser:

    md-toolbar.md-altTheme-theme.md-hue-1:not(.md-menu-toolbar) {
    background-color: rgb(248,187,208);
    color: rgba(0,0,0,0.87);
}

<style>…</style>
md-toolbar.md-altTheme-theme:not(.md-menu-toolbar) {
    background-color: rgb(236,64,122);
    color: rgba(255,255,255,0.87);
}

I installed angular-material using bower but I don't see the CSS part for theming working here.Am I doing anything wrong here?

Akash Agrawal · Accepted Answer · 2017-12-14 10:47:02Z

I think you forgot to link the css files path in your index.html file.

<html>
<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="/bower_components/angular-material/angular-material.css">
</head>
    <body ng-app="YourApp">

    <div ng-controller="YourController">

    </div>

    <script src="/bower_components/angular/angular.js"></script>
    <script src="/bower_components/angular-aria/angular-aria.js"></script>
    <script src="/bower_components/angular-animate/angular-animate.js"></script>
    <script src="/bower_components/angular-material/angular-material.js"></script>
    <script>

        // Include app dependency on ngMaterial

        angular.module( 'YourApp', [ 'ngMaterial' ] )
            .controller("YourController", YourController );

    </script>

</body>
</html>

You can refer this link as well: https://github.com/angular/bower-material

My bad. I had added .scss path which I am surprised wasn't working

Collectives™ on Stack Overflow

angular material theme not working

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related