From b9f0deffe13c2be9df73d532df2406d23bbc26d8 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Sun, 17 Dec 2023 09:33:30 +0100
Subject: [PATCH] Client - display workout map with dark mode colors when
 enabled

---
 .../Workout/WorkoutDetail/WorkoutData.vue     |  3 +++
 .../WorkoutDetail/WorkoutMap/index.vue        | 22 ++++++++++++++-----
 fittrackee_client/src/scss/base.scss          |  8 +++----
 fittrackee_client/src/scss/colors-dark.scss   |  6 +++++
 fittrackee_client/src/scss/colors.scss        |  6 +++++
 5 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue
index c734e222..51de8c59 100644
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue
+++ b/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;
diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap/index.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap/index.vue
index 27d54c9b..60357ad4 100644
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap/index.vue
+++ b/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;
     }
-    .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);
+    .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;
diff --git a/fittrackee_client/src/scss/base.scss b/fittrackee_client/src/scss/base.scss
index c4414dfe..d257927b 100644
--- a/fittrackee_client/src/scss/base.scss
+++ b/fittrackee_client/src/scss/base.scss
@@ -4,7 +4,7 @@
 @import 'vars';
 
 html [data-theme='dark'] {
-    color-scheme: dark;
+  color-scheme: dark;
 }
 
 body {
@@ -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);
     }
   }
diff --git a/fittrackee_client/src/scss/colors-dark.scss b/fittrackee_client/src/scss/colors-dark.scss
index fd4b8a8f..33769d26 100644
--- a/fittrackee_client/src/scss/colors-dark.scss
+++ b/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;
diff --git a/fittrackee_client/src/scss/colors.scss b/fittrackee_client/src/scss/colors.scss
index 09332a1a..205144e3 100644
--- a/fittrackee_client/src/scss/colors.scss
+++ b/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;