add theme selector to main dashboard

frontend/src/app/components/theme-selector/theme-selector.component.html

@@ -0,0 +1,6 @@
+<div [formGroup]="themeForm" class="text-small text-center ml-2">
+    <select formControlName="theme" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 160px;" (change)="changeTheme()">
+        <option value="default" i18n="theme.mempool-theme">Mempool Theme</option>
+        <option value="contrast" i18n="theme.high-contrast">High Contrast</option>
+    </select>
+</div>

frontend/src/app/components/theme-selector/theme-selector.component.ts

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { ThemeService } from '../../services/theme.service';
+
+@Component({
+  selector: 'app-theme-selector',
+  templateUrl: './theme-selector.component.html',
+  styleUrls: ['./theme-selector.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ThemeSelectorComponent implements OnInit {
+  themeForm: UntypedFormGroup;
+  themes = ['default', 'contrast'];
+
+  constructor(
+    private formBuilder: UntypedFormBuilder,
+    private themeService: ThemeService,
+  ) { }
+
+  ngOnInit() {
+    this.themeForm = this.formBuilder.group({
+      theme: ['default']
+    });
+    this.themeForm.get('theme')?.setValue(this.themeService.theme);
+  }
+
+  changeTheme() {
+    const newTheme = this.themeForm.get('theme')?.value;
+    this.themeService.apply(newTheme);
+  }
+}

frontend/src/app/dashboard/dashboard.component.html

@@ -140,7 +140,10 @@
     </div>
   </div>
 
-  <app-language-selector></app-language-selector>
+  <div class="pref-selectors">
+    <app-language-selector></app-language-selector>
+    <app-theme-selector></app-theme-selector>
+  </div>
 
   <div class="terms-of-service">
     <a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>

frontend/src/app/dashboard/dashboard.component.scss

@@ -323,4 +323,11 @@
   margin-bottom: 10px;
   text-decoration: none;
   color: inherit;
+}
+
+.pref-selectors {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
 }

frontend/src/app/shared/shared.module.ts

@@ -34,6 +34,7 @@ import { TxFeaturesComponent } from '../components/tx-features/tx-features.compo
 import { TxFeeRatingComponent } from '../components/tx-fee-rating/tx-fee-rating.component';
 import { ReactiveFormsModule } from '@angular/forms';
 import { LanguageSelectorComponent } from '../components/language-selector/language-selector.component';
+import { ThemeSelectorComponent } from '../components/theme-selector/theme-selector.component';
 import { ColoredPriceDirective } from './directives/colored-price.directive';
 import { NoSanitizePipe } from './pipes/no-sanitize.pipe';
 import { MempoolBlocksComponent } from '../components/mempool-blocks/mempool-blocks.component';
@@ -92,6 +93,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
     TxFeaturesComponent,
     TxFeeRatingComponent,
     LanguageSelectorComponent,
+    ThemeSelectorComponent,
     ScriptpubkeyTypePipe,
     RelativeUrlPipe,
     NoSanitizePipe,
@@ -197,6 +199,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
     TxFeaturesComponent,
     TxFeeRatingComponent,
     LanguageSelectorComponent,
+    ThemeSelectorComponent,
     ScriptpubkeyTypePipe,
     RelativeUrlPipe,
     Hex2asciiPipe,