How to use AngularJS theming on Service Portal Widget

[lasse3]

I am working on a widget on the ServicePortal for a project using AngularJS Materials. I have included AngularJS Materials as a dependency and everything is working fine.

As I understand the "Client script" section of the Widget is actually the controller of the AngularJS app. Here I am successfully using $mdDialog to show dialogues, so ngMaterial is successfully included and works as expected.

I now want to enable a theme which is normally done using .config on the app. I am however unsure how to do this in a widget?

Here is the code that I need to add:

angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
  $mdThemingProvider.theme('default')
    .primaryPalette('pink')
    .accentPalette('orange');
});

Any ideas on how to best apply this?

[lasse3 · Accepted solution]

I found the answer myself 🙂

I included a UI script after the AngularJS Material JS with the following content:

(function(angular) {
	var app = angular.module('sn.$sp');
	app.requires.push('ngMaterial');
	app.config(function($mdThemingProvider) {
		$mdThemingProvider.theme('default')
			.primaryPalette('pink')
			.accentPalette('orange');
	});
})(angular);