refactor(theme): align AngularJS Material theme with Angular Material theme

- switch to white instead of grey background
- don't import theme styles we don't need, saves 4 KB minified

Author: Splaktar

src/_theme.scss

@@ -11,6 +11,25 @@ $app-accent: mat-palette($mat-green);
 // The warn palette is optional (defaults to red).
 $app-warn: mat-palette($mat-red);
 
+// Override the grey background with white
+$mat-light-theme-background: (
+  status-bar: map_get($mat-grey, 300),
+  app-bar: map_get($mat-grey, 100),
+  background: map_get($mat-grey, A100),
+  hover: rgba(black, 0.04),
+  card: white,
+  dialog: white,
+  disabled-button: rgba(black, 0.12),
+  raised-button: white,
+  focused-button: $dark-focused,
+  selected-button: map_get($mat-grey, 300),
+  selected-disabled-button: map_get($mat-grey, 400),
+  disabled-button-toggle: map_get($mat-grey, 200),
+  unselected-chip: map_get($mat-grey, 300),
+  disabled-list-option: map_get($mat-grey, 200),
+  tooltip: map_get($mat-grey, 700),
+);
+
 // Create the theme object (a Sass map containing all of the palettes).
 $app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
 

src/app/angularjs/app-angularjs.module.ts

@@ -13,8 +13,18 @@ import { bootstrapAngular } from './bootstrap-module';
 
 const downgradedModule = downgradeModule(bootstrapAngular);
 
+const configFunction = $mdThemingProvider => {
+  $mdThemingProvider
+    .theme('default')
+    .primaryPalette('indigo')
+    .accentPalette('green', { default: '500' })
+    .backgroundPalette('grey', { default: 'A100' });
+};
+configFunction.$inject = ['$mdThemingProvider'];
+
 export const appAngularjsModule = angular
   .module('AngularJSApp', ['ngMaterial', 'ngMessages', 'templates', downgradedModule])
+  .config(configFunction)
   .component(appAngularJSComponent.selector, appAngularJSComponent)
   .component(versionStampComponent.selector, versionStampComponent)
   .component(tabsComponent.selector, tabsComponent)

src/styles.scss

@@ -8,7 +8,14 @@
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include angular-material-theme($app-theme);
+@include mat-core-theme($app-theme);
+@include mat-button-theme($app-theme);
+@include mat-icon-theme($app-theme);
+@include mat-toolbar-theme($app-theme);
+@include mat-divider-theme($app-theme);
+@include mat-expansion-panel-theme($app-theme);
+@include mat-progress-spinner-theme($app-theme);
+@include mat-tabs-theme($app-theme);
 
 /* You can add global styles to this file, and also import other style files */