Client - display workout map with dark mode colors when enabled

fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue

@@ -143,6 +143,9 @@
     .mountains {
       padding-right: $default-padding * 0.5;
     }
+    .mountains {
+      filter: var(--mountains-filter);
+    }
 
     .workout-data {
       padding: $default-padding * 0.5 0;

fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap/index.vue

@@ -17,6 +17,7 @@
             ref="workoutMap"
             @ready="fitBounds(bounds)"
             :use-global-leaflet="false"
+            class="map"
           >
             <LControlLayers />
             <LControl
@@ -213,12 +214,21 @@
     .no-map {
       line-height: 400px;
     }
+    .leaflet-container {
+      .map {
+        filter: var(--map-filter);
+      }
       .map-control {
         background: var(--map-control-bg-color);
         padding: 5px 10px;
         border: 2px solid var(--map-control-border-color);
         border-radius: 3px;
         color: var(--map-control-color);
+
+        &:hover {
+          background-color: var(--dropdown-hover-color);
+        }
+      }
     }
     ::v-deep(.fullscreen) {
       display: flex;

fittrackee_client/src/scss/base.scss

@@ -114,7 +114,7 @@ button {
   }
 
   &:hover {
-    background: var( --button-transparent-hover-color);
+    background: var(--button-transparent-hover-color);
     color: var(--button-hover-color);
   }
 
@@ -134,7 +134,7 @@ button {
     background: var(--button-cancel-bg-color);
     color: var(--button-cancel-color);
     &:hover {
-      background: var( --button-transparent-hover-color);
+      background: var(--button-transparent-hover-color);
       color: var(--button-hover-color);
     }
   }
@@ -143,7 +143,7 @@ button {
     background: var(--button-confirm-bg-color);
     color: var(--button-confirm-color);
     &:hover {
-      background: var( --button-transparent-hover-color);
+      background: var(--button-transparent-hover-color);
       color: var(--button-hover-color);
     }
   }

fittrackee_client/src/scss/colors-dark.scss

@@ -85,6 +85,12 @@
   --map-control-bg-color: #ffffff;
   --map-control-border-color: #bfc0ab;
   --map-attribution-text: rgba(255, 255, 255, 0.7);
+  --map-filter: invert(1) hue-rotate(180deg) brightness(0.8) contrast(0.8);
+  --map-layers-overlays: var(--app-color);
+  --map-control-bar: var(--app-color);
+
+  --mountains-filter: invert(90%) sepia(19%) saturate(0%) hue-rotate(39deg)
+    brightness(86%) contrast(102%);
 
   --cell-heading-bg-color: #eeeeee;
   --cell-heading-color: #696969;

fittrackee_client/src/scss/colors.scss

@@ -82,6 +82,12 @@
   --map-control-bg-color: #ffffff;
   --map-control-border-color: #bfc0ab;
   --map-attribution-text: rgba(255, 255, 255, 0.7);
+  --map-filter: initial;
+  --map-layers-overlays: initial;
+  --map-control-bar: #bfc0ab;
+
+  --mountains-filter: invert(19%) sepia(9%) saturate(2921%) hue-rotate(169deg)
+    brightness(85%) contrast(80%);
 
   --cell-heading-bg-color: #eeeeee;
   --cell-heading-color: #696969;