angular · shane99a · Dec 24, 2020 · Dec 27, 2020 · Jan 8, 2021 · Jan 9, 2021
diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
@@ -32,6 +32,7 @@
         <mat-icon svgIcon="logos:github"></mat-icon>
       </a>
     </div>
+    <theme-picker></theme-picker>
   </mat-toolbar-row>
 </mat-toolbar>
 

diff --git a/aio/src/app/shared/shared.module.ts b/aio/src/app/shared/shared.module.ts
@@ -2,18 +2,27 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SearchResultsComponent } from './search-results/search-results.component';
 import { SelectComponent } from './select/select.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { ThemePickerComponent } from './theme-picker/theme-picker.component';
+import { ThemeStorageService } from './theme-picker/theme-storage/theme-storage.service';
 
 @NgModule({
   imports: [
-    CommonModule
+    CommonModule,
+    MatButtonModule,
+    MatIconModule
   ],
   exports: [
     SearchResultsComponent,
-    SelectComponent
+    SelectComponent,
+    ThemePickerComponent
   ],
   declarations: [
     SearchResultsComponent,
-    SelectComponent
-  ]
+    SelectComponent,
+    ThemePickerComponent
+  ],
+  providers: [ThemeStorageService]
 })
 export class SharedModule {}
diff --git a/aio/src/app/shared/theme-picker/theme-picker.component.html b/aio/src/app/shared/theme-picker/theme-picker.component.html
@@ -0,0 +1,3 @@
+<button mat-icon-button aria-label="Theme switcher button" (click)="currentTheme.name === 'night-theme' ? selectTheme('ng-io-theme') : selectTheme('night-theme')">
+  <mat-icon>{{currentTheme.name === 'night-theme' ? themes[0].icon : themes[1].icon}}</mat-icon>
+</button>
diff --git a/aio/src/app/shared/theme-picker/theme-picker.component.spec.ts b/aio/src/app/shared/theme-picker/theme-picker.component.spec.ts
@@ -0,0 +1,24 @@
+import {async, TestBed} from '@angular/core/testing';
+import { ThemePickerComponent } from './theme-picker.component';
+import { ThemeStorageService } from './theme-storage/theme-storage.service';
+
+
+describe('ThemePicker', () => {
+  let themeStorageService: any;
+
+  beforeEach(async(() => {
+    themeStorageService = jasmine.createSpyObj('themeStorageService', ['getStoredThemeName', 'storeTheme']);
+    TestBed.configureTestingModule({
+      declarations: [ThemePickerComponent],
+      providers: [ { provide: ThemeStorageService, useValue: themeStorageService } ]
+    }).compileComponents();
+  }));
+
+  it('should install theme based on name', () => {
+    const fixture = TestBed.createComponent(ThemePickerComponent);
+    const component = fixture.componentInstance;
+    const name = 'night-theme';
+    component.selectTheme(name);
+    expect(themeStorageService.storeTheme).toHaveBeenCalledWith(component.themes[1]);
+  });
+});
diff --git a/aio/src/app/shared/theme-picker/theme-picker.component.ts b/aio/src/app/shared/theme-picker/theme-picker.component.ts
@@ -0,0 +1,53 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ViewEncapsulation,
+  } from '@angular/core';
+  import {DocsSiteTheme, ThemeStorageService} from './theme-storage/theme-storage.service';
+
+@Component({
+  selector: 'theme-picker',
+  templateUrl: 'theme-picker.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None
+})
+export class ThemePickerComponent {
+  readonly themes: DocsSiteTheme[] = [
+    {
+      primary: '#1976d2',
+      accent: '#e91e63',
+      displayName: 'Light Theme',
+      name: 'ng-io-theme',
+      icon: 'light_mode'
+    },
+    {
+      primary: '#00796b',
+      accent: '#80cbc4',
+      displayName: 'Night Theme',
+      name: 'night-theme',
+      isDark: true,
+      icon: 'dark_mode'
+    },
+  ];
+
+  readonly defaultTheme: DocsSiteTheme = this.themes[0];
+  currentTheme: DocsSiteTheme = this.themes[0];
+
+  constructor(private themeStorageService: ThemeStorageService) {
+    const themeName = this.themeStorageService.getStoredThemeName();
+    if (themeName) {
+      this.selectTheme(themeName);
+    }
+  }
+
+  selectTheme(themeName: string) {
+    const theme = this.themes.find(currentTheme => currentTheme.name === themeName);
+    this.currentTheme = theme || this.defaultTheme;
+    if (this.currentTheme.name === this.defaultTheme.name) {
+      document.body.classList.value = '';
+    } else {
+      document.body.classList.value = this.currentTheme.name;
+    }
+    this.themeStorageService.storeTheme(this.currentTheme);
+  }
+}
diff --git a/aio/src/app/shared/theme-picker/theme-storage/theme-storage.service.spec.ts b/aio/src/app/shared/theme-picker/theme-storage/theme-storage.service.spec.ts
@@ -0,0 +1,46 @@
+import {DocsSiteTheme, ThemeStorageService} from './theme-storage.service';
+
+
+const testStorageKey = ThemeStorageService.storageKey;
+const testTheme: DocsSiteTheme = {
+  primary: '#000000',
+  accent: '#ffffff',
+  name: 'test-theme',
+  icon: 'test-icon'
+};
+
+describe('ThemeStorage Service', () => {
+  const service = new ThemeStorageService();
+  const getCurrTheme = () => window.localStorage.getItem(testStorageKey);
+  const secondTestTheme = {
+    primary: '#666666',
+    accent: '#333333',
+    name: 'other-test-theme',
+    icon: 'other-test-icon'
+  };
+
+  beforeEach(() => {
+    window.localStorage[testStorageKey] = testTheme.name;
+  });
+
+  afterEach(() => {
+    window.localStorage.clear();
+  });
+
+  it('should set the current theme name', () => {
+    expect(getCurrTheme()).toEqual(testTheme.name);
+    service.storeTheme(secondTestTheme);
+    expect(getCurrTheme()).toEqual(secondTestTheme.name);
+  });
+
+  it('should get the current theme name', () => {
+    const theme = service.getStoredThemeName();
+    expect(theme).toEqual(testTheme.name);
+  });
+
+  it('should clear the stored theme data', () => {
+    expect(getCurrTheme()).not.toBeNull();
+    service.clearStorage();
+    expect(getCurrTheme()).toBeNull();
+  });
+});
diff --git a/aio/src/app/shared/theme-picker/theme-storage/theme-storage.service.ts b/aio/src/app/shared/theme-picker/theme-storage/theme-storage.service.ts
@@ -0,0 +1,37 @@
+import {Injectable} from '@angular/core';
+
+export interface DocsSiteTheme {
+  name: string;
+  displayName?: string;
+  accent: string;
+  primary: string;
+  isDark?: boolean;
+  icon: string;
+  isDefault?: boolean;
+}
+
+
+@Injectable()
+export class ThemeStorageService {
+  static storageKey = 'docs-theme-storage-current-name';
+
+  storeTheme(theme: DocsSiteTheme) {
+    try {
+      window.localStorage[ThemeStorageService.storageKey] = theme.name;
+    } catch { }
+  }
+
+  getStoredThemeName(): string | null {
+    try {
+      return window.localStorage[ThemeStorageService.storageKey] || null;
+    } catch {
+      return null;
+    }
+  }
+
+  clearStorage() {
+    try {
+      window.localStorage.removeItem(ThemeStorageService.storageKey);
+    } catch { }
+  }
+}