feat(theme-picker): provide a visual preview of the theme colors via an SVG

Author: Splaktar

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

@@ -3,12 +3,13 @@
   <mat-icon>format_color_fill</mat-icon>
 </button>
 
-<mat-menu #themeMenu="matMenu" x-position="before">
+<mat-menu #themeMenu="matMenu" xPosition="before" class="theme-picker-menu">
   <button mat-menu-item *ngFor="let theme of themes" (click)="onThemeSelection(theme.name)">
     <mat-icon [ngClass]="{'docs-theme-selected-icon': currentTheme === theme}"
               [color]="currentTheme === theme ? 'accent' : undefined">
       {{currentTheme === theme ? 'radio_button_checked' : 'radio_button_unchecked'}}
     </mat-icon>
     <span>{{theme.displayName}}</span>
+    <mat-icon [class]="'theme-example-icon ' + theme.name" svgIcon="theme-example"></mat-icon>
   </button>
 </mat-menu>

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

@@ -0,0 +1,62 @@
+.theme-picker-menu {
+  .mat-menu-item {
+    .mat-icon.theme-example-icon {
+      margin-right: 0;
+      margin-left: 8px;
+      float: right;
+
+      svg {
+        vertical-align: middle;
+      }
+
+      // The below colors need to align with the themes defined in ThemePicker
+      &.deeppurple-amber svg {
+        .theme-icon-background {
+          fill: #fafafa;
+        }
+        .theme-icon-button {
+          fill: #FFC107;
+        }
+        .theme-icon-toolbar {
+          fill: #673AB7;
+        }
+      }
+
+      &.indigo-pink svg {
+        .theme-icon-background {
+          fill: #fafafa;
+        }
+        .theme-icon-button {
+          fill: #E91E63;
+        }
+        .theme-icon-toolbar {
+          fill: #3F51B5;
+        }
+      }
+
+      &.pink-bluegrey svg {
+        .theme-icon-background {
+          fill: #303030;
+        }
+        .theme-icon-button {
+          fill: #607D8B;
+        }
+        .theme-icon-toolbar {
+          fill: #E91E63;
+        }
+      }
+
+      &.purple-green svg {
+        .theme-icon-background {
+          fill: #303030;
+        }
+        .theme-icon-button {
+          fill: #4CAF50;
+        }
+        .theme-icon-toolbar {
+          fill: #9C27B0;
+        }
+      }
+    }
+  }
+}

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

@@ -4,29 +4,33 @@ import {
   NgModule,
   OnDestroy,
   OnInit,
+  ViewEncapsulation,
 } from '@angular/core';
 import {StyleManager} from '../style-manager';
 import {DocsSiteTheme, ThemeStorage} from './theme-storage/theme-storage';
 import {MatButtonModule} from '@angular/material/button';
 import {MatGridListModule} from '@angular/material/grid-list';
-import {MatIconModule} from '@angular/material/icon';
+import {MatIconModule, MatIconRegistry} from '@angular/material/icon';
 import {MatMenuModule} from '@angular/material/menu';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {CommonModule} from '@angular/common';
 import {ActivatedRoute, ParamMap} from '@angular/router';
 import {Subscription} from 'rxjs';
 import {map} from 'rxjs/operators';
+import {DomSanitizer} from '@angular/platform-browser';
 
 @Component({
   selector: 'theme-picker',
   templateUrl: 'theme-picker.html',
   styleUrls: ['theme-picker.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None
 })
 export class ThemePicker implements OnInit, OnDestroy {
   private _queryParamSubscription = Subscription.EMPTY;
   currentTheme: DocsSiteTheme;
 
+  // The below colors need to align with the themes defined in theme-picker.scss
   themes: DocsSiteTheme[] = [
     {
       primary: '#673AB7',
@@ -59,10 +63,13 @@ export class ThemePicker implements OnInit, OnDestroy {
     },
   ];
 
-  constructor(
-    public styleManager: StyleManager,
-    private _themeStorage: ThemeStorage,
-    private _activatedRoute: ActivatedRoute) {
+  constructor(public styleManager: StyleManager,
+              private _themeStorage: ThemeStorage,
+              private _activatedRoute: ActivatedRoute,
+              iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
+    iconRegistry.addSvgIcon('theme-example',
+                            sanitizer.bypassSecurityTrustResourceUrl(
+                                'assets/img/theme-demo-icon.svg'));
     const themeName = this._themeStorage.getStoredThemeName();
     if (themeName) {
       this.onThemeSelection(themeName);