Client - update and fix dark theme - #465

fittrackee_client/src/components/Common/StatsChart/Chart.vue

@@ -14,6 +14,7 @@
   import { ROOT_STORE } from '@/store/constants'
   import type { IChartDataset } from '@/types/chart'
   import type { TStatisticsDatasetKeys } from '@/types/statistics'
+  import { getDarkTheme } from '@/utils'
   import { formatTooltipValue } from '@/utils/tooltip'
   import { chartsColors } from '@/utils/workouts'
 
@@ -41,17 +42,18 @@
   const darkMode: ComputedRef<boolean | null> = computed(
     () => store.getters[ROOT_STORE.GETTERS.DARK_MODE]
   )
+  const darkTheme: ComputedRef<boolean> = computed(() =>
+    getDarkTheme(darkMode.value)
+  )
   const lineColors = computed(() => ({
-    color:
-      darkMode.value !== false
-        ? chartsColors.darkMode.line
-        : chartsColors.ligthMode.line,
+    color: darkTheme.value
+      ? chartsColors.darkMode.line
+      : chartsColors.ligthMode.line,
   }))
   const textColors = computed(() => ({
-    color:
-      darkMode.value !== false
-        ? chartsColors.darkMode.text
-        : chartsColors.ligthMode.text,
+    color: darkTheme.value
+      ? chartsColors.darkMode.text
+      : chartsColors.ligthMode.text,
   }))
 
   const chartData = computed(() => ({

fittrackee_client/src/components/NavBar.vue

@@ -123,6 +123,7 @@
   import type { TLanguage } from '@/types/locales'
   import type { IAuthUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
+  import { getDarkTheme } from '@/utils'
   import { availableLanguages } from '@/utils/locales'
 
   const emit = defineEmits(['menuInteraction'])
@@ -143,7 +144,9 @@
   const darkMode: ComputedRef<boolean | null> = computed(
     () => store.getters[ROOT_STORE.GETTERS.DARK_MODE]
   )
-  const darkTheme: ComputedRef<boolean> = computed(() => getDarkTheme())
+  const darkTheme: ComputedRef<boolean> = computed(() =>
+    getDarkTheme(darkMode.value)
+  )
 
   onBeforeMount(() => setTheme())
 
@@ -168,15 +171,6 @@
   function updateDisplayModal(display: boolean) {
     displayModal.value = display
   }
-  function getDarkTheme() {
-    if (
-      darkMode.value === null &&
-      window.matchMedia('(prefers-color-scheme: dark)').matches
-    ) {
-      return true
-    }
-    return darkMode.value === true
-  }
   function setTheme() {
     if (darkTheme.value) {
       document.body.setAttribute('data-theme', 'dark')

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

@@ -70,6 +70,7 @@
     IWorkoutData,
     TCoordinates,
   } from '@/types/workouts'
+  import { getDarkTheme } from '@/utils'
   import { units } from '@/utils/units'
   import { chartsColors, getDatasets } from '@/utils/workouts'
 
@@ -88,6 +89,9 @@
   const darkMode: ComputedRef<boolean | null> = computed(
     () => store.getters[ROOT_STORE.GETTERS.DARK_MODE]
   )
+  const darkTheme: ComputedRef<boolean> = computed(() =>
+    getDarkTheme(darkMode.value)
+  )
   const displayDistance = ref(true)
   const beginElevationAtZero = ref(authUser.value.start_elevation_at_zero)
   const datasets: ComputedRef<IWorkoutChartData> = computed(() =>
@@ -95,7 +99,7 @@
       workoutData.value.chartData,
       t,
       authUser.value.imperial_units,
-      darkMode.value !== false
+      darkTheme.value
     )
   )
   const hasElevation = computed(
@@ -118,16 +122,14 @@
     () => datasets.value.coordinates
   )
   const lineColors = computed(() => ({
-    color:
-      darkMode.value !== false
-        ? chartsColors.darkMode.line
-        : chartsColors.ligthMode.line,
+    color: darkTheme.value
+      ? chartsColors.darkMode.line
+      : chartsColors.ligthMode.line,
   }))
   const textColors = computed(() => ({
-    color:
-      darkMode.value !== false
-        ? chartsColors.darkMode.text
-        : chartsColors.ligthMode.text,
+    color: darkTheme.value
+      ? chartsColors.darkMode.text
+      : chartsColors.ligthMode.text,
   }))
 
   const options = computed<ChartOptions<'line'>>(() => ({

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

@@ -143,9 +143,6 @@
     .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

@@ -227,7 +227,7 @@
         color: var(--map-control-color);
 
         &:hover {
-          background-color: var(--dropdown-hover-color);
+          background-color: var(--map-control-hover-bg-color);
         }
       }
     }

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

@@ -139,7 +139,7 @@
     padding-top: $default-padding;
     .weather-img {
       height: 30px;
-      filter: var(--workout-img-color);
+      filter: var(--icon-svg-filter);
     }
     .weather-img-small {
       height: 20px;

fittrackee_client/src/scss/base.scss

@@ -228,7 +228,7 @@ button {
 .mountains {
   margin-bottom: -3px;
   height: 16px;
-  filter: var(--workout-img-color);
+  filter: var(--icon-svg-filter);
 }
 
 .section-title {

fittrackee_client/src/scss/colors-dark.scss

@@ -85,6 +85,7 @@
   --map-control-color: #000000;
   --map-control-bg-color: #ffffff;
   --map-control-border-color: #bfc0ab;
+  --map-control-hover-bg-color: #eff0f5;
   --map-attribution-text: #e8e8e8;
   --map-display-hover-attribution-text: #444444;
   --map-attribution-bg-color: none;
@@ -97,7 +98,7 @@
   --workout-static-map-shadow-color: #d2d2d2;
   --workout-static-map-bg-color: #818181;
 
-  --mountains-filter: invert(90%) sepia(19%) saturate(0%) hue-rotate(39deg)
+  --icon-svg-filter: invert(90%) sepia(19%) saturate(0%) hue-rotate(39deg)
     brightness(86%) contrast(102%);
 
   --cell-heading-bg-color: #383838;

fittrackee_client/src/scss/colors.scss

@@ -82,6 +82,7 @@
   --map-control-color: #000000;
   --map-control-bg-color: #ffffff;
   --map-control-border-color: #bfc0ab;
+  --map-control-hover-bg-color: var(--dropdown-hover-color);
   --map-attribution-text: var(--app-color);
   --map-display-hover-attribution-text: initial;
   --map-attribution-bg-color: rgba(255, 255, 255, 0.7);
@@ -93,7 +94,7 @@
   --workout-static-map-shadow-color: var(--app-shadow-color);
   --workout-static-map-bg-color: var(--workout-no-map-bg-color);
 
-  --mountains-filter: invert(19%) sepia(9%) saturate(2921%) hue-rotate(169deg)
+  --icon-svg-filter: invert(19%) sepia(9%) saturate(2921%) hue-rotate(169deg)
     brightness(85%) contrast(80%);
 
   --cell-heading-bg-color: #eeeeee;

fittrackee_client/src/utils/index.ts

@@ -65,3 +65,13 @@ export const handleError = (
       : `api.ERROR.${errorMessages}`
   )
 }
+
+export const getDarkTheme = (darkMode: boolean | null) => {
+  if (
+    darkMode === null &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches
+  ) {
+    return true
+  }
+  return darkMode === true
+}