Material Themes or Custom angular-material.css?

[Brad_GMI]

Good Afternoon Everyone,

Just when you think you have finally got a handle on Angular as a whole, along comes a new challenge.

I've hit a bit of a roadblock in trying to understand how to best implement styling that suits our company's branding.

I've been successful in implementing themes in stand along Material applications, but I'm not sure where I need to place the configuration JS to set up the theme.for a Mango application.

I took a shot by adding the following from the Material demos with no luck:

index.html

<script src="../js/themetest.js"></script>

themetest.js

angular.module('maMaterialDashboard', ['ngMaterial'])
.config(function($mdThemingProvider) {
  $mdThemingProvider.theme('default')
    .dark();
});

Any ideas?

Thanks for the help!

[Will Geller]

It will be easier to customize the angular module and hook into the config if you start with the Extend App Template:
http://localhost:8080/modules/dashboards/web/mdAdmin/#/dashboard/examples/templates/extend-app

or the full Admin Template:
http://localhost:8080/modules/dashboards/web/mdAdmin/#/dashboard/examples/basics/create-dashboard

you can see there is JS files associated with these templates that set up the angular module, and this would be the place to pass in the mdThemingProvider to your app.

I believe in your case you should be able to transition your page pretty easily to the extendApp, and this will allow you to do theme customization, set up controllers, and create directives.

[Brad_GMI]

Implemented the extendApp template and added the themeProvider to my extendApp.js and all is well.

Thanks for the tip! One step closer to finishing up my application.