diff --git a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts
index e59d6e89..6bd6f359 100644
--- a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts
+++ b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts
@@ -1,4 +1,4 @@
-import {Component, ElementRef, HostListener, Input, OnChanges, ViewChild,} from '@angular/core';
+import {Component, ElementRef, HostListener, Input, OnChanges, OnDestroy, ViewChild,} from '@angular/core';
 import {PhotoDTO} from '../../../../../../common/entities/PhotoDTO';
 import {Dimension} from '../../../../model/IRenderable';
 import {FullScreenService} from '../../fullscreen.service';
@@ -32,13 +32,14 @@ import {
 } from 'leaflet';
 import {LeafletControlLayersConfig} from '@asymmetrik/ngx-leaflet';
 import {ThemeService} from '../../../../model/theme.service';
+import {Subscription} from 'rxjs';
 
 @Component({
   selector: 'app-gallery-map-lightbox',
   styleUrls: ['./lightbox.map.gallery.component.css'],
   templateUrl: './lightbox.map.gallery.component.html',
 })
-export class GalleryMapLightboxComponent implements OnChanges {
+export class GalleryMapLightboxComponent implements OnChanges, OnDestroy {
   @Input() photos: PhotoDTO[];
   @Input() gpxFiles: FileDTO[];
   public lightboxDimension: Dimension = {
@@ -110,6 +111,7 @@ export class GalleryMapLightboxComponent implements OnChanges {
   private thumbnailsOnLoad: ThumbnailBase[] = [];
   private startPosition: Dimension = null;
   private leafletMap: Map;
+  darkModeSubscription: Subscription;
 
   constructor(
     public fullScreenService: FullScreenService,
@@ -144,7 +146,11 @@ export class GalleryMapLightboxComponent implements OnChanges {
     );
 
     // update map theme on dark theme
-    this.themeService.darkMode.subscribe(this.selectBaseLayer);
+    this.darkModeSubscription = this.themeService.darkMode.subscribe(this.selectBaseLayer);
+  }
+
+  ngOnDestroy(): void {
+    this.darkModeSubscription.unsubscribe();
   }
 
   private selectBaseLayer = () => {
diff --git a/src/frontend/app/ui/gallery/map/map.gallery.component.ts b/src/frontend/app/ui/gallery/map/map.gallery.component.ts
index fc08dcd0..d4af791d 100644
--- a/src/frontend/app/ui/gallery/map/map.gallery.component.ts
+++ b/src/frontend/app/ui/gallery/map/map.gallery.component.ts
@@ -7,6 +7,7 @@ import {MapService} from './map.service';
 import {Config} from '../../../../../common/config/public/Config';
 import {LatLngLiteral, Map, MapOptions, Marker, marker, tileLayer, TileLayer} from 'leaflet';
 import {ThemeService} from '../../../model/theme.service';
+import {Subscription} from 'rxjs';
 
 @Component({
   selector: 'app-gallery-map',
@@ -34,12 +35,17 @@ export class GalleryMapComponent implements OnChanges, IRenderable {
     center: [0, 0],
   };
   markerLayer: Marker[] = [];
+  darkModeSubscription: Subscription;
 
   constructor(public mapService: MapService,
               private themeService: ThemeService) {
     this.initThemeModes();
   }
 
+  ngOnDestroy(): void {
+    this.darkModeSubscription.unsubscribe();
+  }
+
   initThemeModes() {
     this.layers = {
       'light': tileLayer(this.mapService.MapLayer.url, {
@@ -56,7 +62,7 @@ export class GalleryMapComponent implements OnChanges, IRenderable {
       this.options.layers = [this.layers.light];
     }
     // update map theme on dark theme
-    this.themeService.darkMode.subscribe((isDark) => {
+    this.darkModeSubscription = this.themeService.darkMode.subscribe((isDark) => {
       if (!this.leafletMap) {
         return;
       }