Change default theme to indigo-pink

Author: jelbourn

browser-providers.js

@@ -26,7 +26,7 @@ const configuration = {
   'iOS7':         { unitTest: {target: null}, e2e: {target: null}},
   'iOS8':         { unitTest: {target: null}, e2e: {target: null}},
   'iOS9':         { unitTest: {target: 'BS'}, e2e: {target: null}},
-  'WindowsPhone': { unitTest: {target: 'BS'}, e2e: {target: null}}
+  'WindowsPhone': { unitTest: {target: null}, e2e: {target: null}}
 };
 
 exports.customLaunchers = {

src/app/pages/component-viewer/_component-viewer-theme.scss

@@ -7,6 +7,7 @@
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
 
+  guide-viewer,
   app-component-viewer {
     color: mat-color($foreground, text);
 

src/app/pages/guide-list/guide-list.spec.ts

@@ -1,7 +1,6 @@
-import {async, TestBed, ComponentFixture} from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
-import {CommonModule} from '@angular/common';
 import {RouterTestingModule} from '@angular/router/testing';
 import {MaterialModule} from '@angular/material';
 

src/app/shared/theme-picker/theme-picker.html

@@ -6,7 +6,7 @@
 <md-menu class="docs-theme-picker-menu" #themeMenu="mdMenu" x-position="before">
   <md-grid-list cols="2">
     <md-grid-tile *ngFor="let theme of themes">
-      <div md-menu-item (click)="installTheme(theme.href)">
+      <div md-menu-item (click)="installTheme(theme)">
         <div class="docs-theme-picker-swatch">
           <md-icon class="docs-theme-chosen-icon" *ngIf="currentTheme === theme">check_circle</md-icon>
           <div class="docs-theme-picker-primary" [style.background]="theme.primary"></div>

src/app/shared/theme-picker/theme-picker.spec.ts

@@ -22,7 +22,11 @@ describe('ThemePicker', () => {
     const component = fixture.componentInstance;
     const href = 'pink-bluegrey.css';
     spyOn(component.styleManager, 'setStyle');
-    component.installTheme(href);
+    component.installTheme({
+      primary: '#E91E63',
+      accent: '#607D8B',
+      href,
+    });
     expect(component.styleManager.setStyle).toHaveBeenCalled();
     expect(component.styleManager.setStyle).toHaveBeenCalledWith('theme', `assets/${href}`);
   });

src/app/shared/theme-picker/theme-picker.ts

@@ -26,6 +26,7 @@ export class ThemePicker {
       accent: '#E91E63',
       href: 'indigo-pink.css',
       isDark: false,
+      isDefault: true,
     },
     {
       primary: '#E91E63',
@@ -47,13 +48,19 @@ export class ThemePicker {
   ) {
     const currentTheme = this._themeStorage.getStoredTheme();
     if (currentTheme) {
-      this.installTheme(currentTheme.href);
+      this.installTheme(currentTheme);
     }
   }
 
-  installTheme(href: string) {
-    this.currentTheme = this._getCurrentThemeFromHref(href);
-    this.styleManager.setStyle('theme', `assets/${href}`);
+  installTheme(theme: DocsSiteTheme) {
+    this.currentTheme = this._getCurrentThemeFromHref(theme.href);
+
+    if (theme.isDefault) {
+      this.styleManager.removeStyle('theme');
+    } else {
+      this.styleManager.setStyle('theme', `assets/${theme.href}`);
+    }
+
     if (this.currentTheme) {
       this._themeStorage.storeTheme(this.currentTheme);
     }

src/app/shared/theme-picker/theme-storage/theme-storage.ts

@@ -5,6 +5,7 @@ export interface DocsSiteTheme {
   accent: string;
   primary: string;
   isDark?: boolean;
+  isDefault?: boolean;
 };
 
 

src/main.scss

@@ -11,8 +11,8 @@
 
 
 // Define the light theme.
-$primary: mat-palette($mat-cyan);
-$accent:  mat-palette($mat-amber, A200, A100, A400);
+$primary: mat-palette($mat-indigo);
+$accent:  mat-palette($mat-pink, A200, A100, A400);
 
 $theme: mat-light-theme($primary, $accent);
 @include angular-material-theme($theme);