feat: add high contrast theme (#357)

Author: godind

src/app/app.component.html

@@ -52,9 +52,6 @@
   <button mat-menu-item routerLink="/settings">
     <div class="menu-items-with-icons"><i class="fa-solid fa-sliders" aria-hidden="true"></i>&nbsp;Settings</div>
   </button>
-  <!-- <button mat-menu-item [disabled]="isNightMode" [matMenuTriggerFor]="themesMenu"> -->
-    <!-- <span><i class="fa-solid fa-paint-brush"></i> Themes</span> -->
-  <!-- </button> -->
   <button mat-menu-item [disabled]="!unlockStatus" (click)="newPage()">
     <div class="menu-items-with-icons"><i class="fa-solid fa-plus-square" aria-hidden="true"></i>&nbsp;Add Page</div>
   </button>
@@ -63,30 +60,3 @@
     <div class="menu-items-with-icons" *ngIf="unlockStatus"><i class="fa-solid fa-lock" aria-hidden="true"></i>&nbsp;Lock Layout</div>
   </button>
 </mat-menu>
-
-<mat-menu #themesMenu="matMenu" xPosition="before">
-  <button mat-menu-item (click)="setTheme('default-light')">
-    <span><i *ngIf="themeName == 'default-light' else elseBlock" class="fa-solid fa-circle" aria-hidden="true"></i>&nbsp;Light Blue</span>
-      <ng-template #elseBlock><i class="fa-solid fa-circle-o" aria-hidden="true"></i></ng-template>
-  </button>
-  <button mat-menu-item (click)="setTheme('signalk-light')">
-    <span><i *ngIf="themeName == 'signalk-light' else elseBlock" class="fa-solid fa-circle" aria-hidden="true"></i>&nbsp;Signal K</span>
-      <ng-template #elseBlock><i class="fa-solid fa-circle-o" aria-hidden="true"></i></ng-template>
-  </button>
-  <button mat-menu-item (click)="setTheme('high-contrast-light')">
-    <span><i *ngIf="themeName == 'high-contrast-light' else elseBlock" class="fa-solid fa-circle" aria-hidden="true"></i>&nbsp;High Contrast</span>
-      <ng-template #elseBlock><i class="fa-solid fa-circle-o" aria-hidden="true"></i></ng-template>
-  </button>
-  <button mat-menu-item (click)="setTheme('platypus-light')">
-    <span><i *ngIf="themeName == 'platypus-light' else elseBlock" class="fa-solid fa-circle" aria-hidden="true"></i>&nbsp;Platypus</span>
-    <ng-template #elseBlock><i class="fa-solid fa-circle-o" aria-hidden="true"></i></ng-template>
-  </button>
-  <button mat-menu-item (click)="setTheme('darkBlue-dark')">
-    <span><i *ngIf="themeName == 'darkBlue-dark' else elseBlock" class="fa-solid fa-circle" aria-hidden="true"></i>&nbsp;Dark Blue</span>
-    <ng-template #elseBlock><i class="fa-solid fa-circle-o" aria-hidden="true"></i></ng-template>
-  </button>
-  <button mat-menu-item (click)="setTheme('modern-dark')">
-    <span><i *ngIf="themeName == 'modern-dark' else elseBlock" class="fa-solid fa-circle" aria-hidden="true"></i>&nbsp;Modern Dark</span>
-    <ng-template #elseBlock><i class="fa-solid fa-circle-o" aria-hidden="true"></i></ng-template>
-  </button>
-</mat-menu>

src/app/app.component.ts

@@ -182,10 +182,6 @@ export class AppComponent implements OnInit, OnDestroy {
     }
   }
 
-  setTheme(theme: string) {
-    this.appSettingsService.setThemeName(theme);
-  }
-
   setNightMode(nightMode: boolean) {
     this.isNightMode = nightMode;
     if (this.isNightMode) {

src/app/settings/general/general.component.html

@@ -1,8 +1,8 @@
 <div class="mat-typography">
   <form #general="ngForm" name="GeneraSetting">
-    <h2>Night Vision</h2>
-    <mat-checkbox [(ngModel)]="autoNightModeConfig" [ngModelOptions]="{standalone: false}" name="autoNightMode" (change)="isAutoNightPathSupported($event)">Automatically change between Day and Night display modes based on sun phases</mat-checkbox>
-    <br/><br/>
+    <h2>Display Modes</h2>
+    <mat-checkbox class="full-width" [(ngModel)]="autoNightModeConfig" [ngModelOptions]="{standalone: false}" name="autoNightMode" (change)="isAutoNightPathSupported($event)">Automatically change between Day and Night Modes based on sun phases preserving your night vision</mat-checkbox>
+    <mat-checkbox class="full-width" [(ngModel)]="enableHighContrast" [ngModelOptions]="{standalone: false}" name="enableHighContrast" (change)="setTheme($event)">Enable full sunlight High Contrast, black and white display</mat-checkbox>
     <h2>Notifications</h2>
     <p class="mat-card-subtitle">Notifications are a special type of data sent from Signal K and displayed in the
       notification menu. They are meant to alert or inform operators. Set server

src/app/settings/general/general.component.ts

@@ -7,7 +7,7 @@ import { MatButton } from '@angular/material/button';
 import { MatDivider } from '@angular/material/divider';
 import { MatAccordion, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle, MatExpansionPanelDescription } from '@angular/material/expansion';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
-import { MatCheckbox } from '@angular/material/checkbox';
+import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
 import { FormsModule } from '@angular/forms';
 
 
@@ -33,6 +33,7 @@ export class SettingsGeneralComponent implements OnInit {
 
   public notificationConfig: INotificationConfig;
   public autoNightModeConfig: boolean;
+  public enableHighContrast: boolean = null;
 
   constructor(
     private notifications: NotificationsService,
@@ -43,13 +44,16 @@ export class SettingsGeneralComponent implements OnInit {
   ngOnInit() {
     this.notificationConfig = this.settings.getNotificationConfig();
     this.autoNightModeConfig = this.app.autoNightMode;
+    this.enableHighContrast = (this.settings.getThemeName() == "high-contrast") ? true : false;
   }
 
   public saveAllSettings():void {
     try {
       this.saveNotificationsSettings();
       this.saveAutoNightMode();
       this.notifications.sendSnackbarNotification("General settings saved", 5000, false);
+      this.enableHighContrast ? this.settings.setThemeName("high-contrast") : this.settings.setThemeName("modernDark")
+
     } catch (error) {
       this.notifications.sendSnackbarNotification("Error saving settings: " + error, 5000, false);
     }
@@ -71,4 +75,8 @@ export class SettingsGeneralComponent implements OnInit {
       }
     }
   }
+
+  setTheme(e: MatCheckboxChange) {
+    this.enableHighContrast = e.checked;
+  }
 }

src/styles.scss

@@ -4,13 +4,9 @@
 // For customizations see https://material.angular.io/guide/theming-your-components
 
 //Import themes
-// @import 'themes/defaultTheme.scss';
-// @import 'themes/signalkTheme.scss';
-// @import 'themes/platypusTheme.scss';
-// @import 'themes/highContrastTheme.scss';
-// @import 'themes/darkBlueTheme.scss';
 @import 'themes/modernTheme.scss';
 @import 'themes/nightMode.scss';
+@import 'themes/highContrastTheme.scss';
 
 // Include the common all common Materiel styles.
 
@@ -58,25 +54,10 @@
   @include theme-kip-components($nightMode);
 }
 
-// .signalk-light {
-//   @include theme-components($signalKTheme-light);
-// }
-
-// .high-contrast-light {
-//   @include theme-components($highContrast-light);
-// }
-
-// .platypus-light {
-//   @include theme-components($platypusTheme-light);
-// }
-
-// .darkBlue-dark {
-//   @include theme-components($darkBlueTheme-dark);
-// }
-
-// .modern-dark {
-  // @include mat.all-component-themes($modernTheme-dark);
-// }
+.high-contrast {
+  @include mat.all-component-colors($highContrast);
+  @include theme-kip-components($highContrast);
+}
 
 /* You can add global styles to this file, and also import other style files */
 html,
@@ -95,27 +76,20 @@ body {
     border-left: 5px solid #42A948; /* green */
   }
 
-  .ng-invalid:not(form)  {
-    border-left: 5px solid #a94442; /* red */
-  }
-
-
+.ng-invalid:not(form)  {
+  border-left: 5px solid #a94442; /* red */
+}
 
 .verticalCenter {
-    position: relative;
-    top: 50%;
-    transform: translateY(-50%);
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
-
 .flexContainer {
-
-    display: flex;
-    /*flex-direction: column; */
-     align-items: stretch;
-
-    height: 100%;
-
+  display: flex;
+  align-items: stretch;
+  height: 100%;
 }
 
 .flowRow {