Merge pull request #2489 from asfadmin/Yoreley-DS6242

Yoreley ds6242 - satellite graphic dark mode

Author: SpicyGarlicAlbacoreRoll

src/app/components/header/timeseries-header/timeseries-header.component.html

@@ -39,14 +39,23 @@
             }
           </span>
           <span class="line-of-site-icon">
-            <img
-              ngSrc="assets/satellite-graphics/sat-1.png"
-              class="invert-icon"
-              [class.flip-icon]="flightDesc"
-              alt="Line of Site"
-              height="70"
-              width="84"
-            />
+            @if (isDarkMode$ | async) {
+              <img
+                ngSrc="assets/satellite-graphics/sat-1-dark.png"
+                [class.flip-icon]="flightDesc"
+                alt="Line of Site"
+                height="70"
+                width="84"
+              />
+            } @else {
+              <img
+                ngSrc="assets/satellite-graphics/sat-1.png"
+                [class.flip-icon]="flightDesc"
+                alt="Line of Site"
+                height="70"
+                width="84"
+              />
+            }
           </span>
           <span class="line-of-site-icon-text">
             {{ 'INCIDENCE_ANGLE' | translate }}: 29° &ndash; 46°

src/app/components/header/timeseries-header/timeseries-header.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, OnDestroy, inject } from '@angular/core';
 import { SubSink } from 'subsink';
+import { map } from 'rxjs/operators';
 
 import { Store } from '@ngrx/store';
 import { AppState } from '@store';
@@ -8,7 +9,7 @@ import * as searchStore from '@store/search';
 import * as mapStore from '@store/map';
 import * as filtersStore from '@store/filters';
 
-import { ScreenSizeService } from '@services';
+import { ScreenSizeService, ThemingService } from '@services';
 import { MapDrawModeType, MapInteractionModeType } from '@models';
 import * as models from '@models';
 import { NgOptimizedImage, AsyncPipe } from '@angular/common';
@@ -35,8 +36,10 @@ import { TranslateModule } from '@ngx-translate/core';
 export class TimeseriesHeaderComponent implements OnInit, OnDestroy {
   private store$ = inject<Store<AppState>>(Store);
   private screenSize = inject(ScreenSizeService);
+  private themingService = inject(ThemingService);
 
   public breakpoint$ = this.screenSize.breakpoint$;
+  public isDarkMode$ = this.themingService.theme$.pipe(map(theme => theme === 'dark'));
   public breakpoints = models.Breakpoints;
   public isDrawing = false;
   public flightDirections: models.FlightDirection[];

src/app/services/theming.service.ts

@@ -29,5 +29,6 @@ export class ThemingService {
     // removes all classes from body, probably not best for later on
     body.removeAttribute('class');
     body.classList.add(themeName);
+    this.theme$.next(themeName === 'theme-dark' ? 'dark' : 'light');
   }
 }