From fadf0bce7d1d10d798b705d17616e091efa5abc2 Mon Sep 17 00:00:00 2001 From: Sam Date: Wed, 20 Dec 2023 20:36:57 +0100 Subject: [PATCH] Client - update and fix dark theme - #465 --- .../components/Common/StatsChart/Chart.vue | 18 +++++++++-------- fittrackee_client/src/components/NavBar.vue | 14 ++++--------- .../WorkoutDetail/WorkoutChart/index.vue | 20 ++++++++++--------- .../Workout/WorkoutDetail/WorkoutData.vue | 3 --- .../WorkoutDetail/WorkoutMap/index.vue | 2 +- .../Workout/WorkoutDetail/WorkoutWeather.vue | 2 +- fittrackee_client/src/scss/base.scss | 2 +- fittrackee_client/src/scss/colors-dark.scss | 3 ++- fittrackee_client/src/scss/colors.scss | 3 ++- fittrackee_client/src/utils/index.ts | 10 ++++++++++ 10 files changed, 42 insertions(+), 35 deletions(-) diff --git a/fittrackee_client/src/components/Common/StatsChart/Chart.vue b/fittrackee_client/src/components/Common/StatsChart/Chart.vue index 54bc76e7..ee6953ce 100644 --- a/fittrackee_client/src/components/Common/StatsChart/Chart.vue +++ b/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 = computed( () => store.getters[ROOT_STORE.GETTERS.DARK_MODE] ) + const darkTheme: ComputedRef = 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(() => ({ diff --git a/fittrackee_client/src/components/NavBar.vue b/fittrackee_client/src/components/NavBar.vue index 35412a1d..30221ad9 100644 --- a/fittrackee_client/src/components/NavBar.vue +++ b/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 = computed( () => store.getters[ROOT_STORE.GETTERS.DARK_MODE] ) - const darkTheme: ComputedRef = computed(() => getDarkTheme()) + const darkTheme: ComputedRef = 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') diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutChart/index.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutChart/index.vue index cd56fb5e..d15ae6a8 100644 --- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutChart/index.vue +++ b/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 = computed( () => store.getters[ROOT_STORE.GETTERS.DARK_MODE] ) + const darkTheme: ComputedRef = computed(() => + getDarkTheme(darkMode.value) + ) const displayDistance = ref(true) const beginElevationAtZero = ref(authUser.value.start_elevation_at_zero) const datasets: ComputedRef = 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>(() => ({ diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue index 51de8c59..c734e222 100644 --- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue +++ b/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; diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap/index.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap/index.vue index a9a85c91..b97aee21 100644 --- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap/index.vue +++ b/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); } } } diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutWeather.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutWeather.vue index 7f3d9913..929989cb 100644 --- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutWeather.vue +++ b/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; diff --git a/fittrackee_client/src/scss/base.scss b/fittrackee_client/src/scss/base.scss index d257927b..5175a83d 100644 --- a/fittrackee_client/src/scss/base.scss +++ b/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 { diff --git a/fittrackee_client/src/scss/colors-dark.scss b/fittrackee_client/src/scss/colors-dark.scss index a0add3b3..35a224b3 100644 --- a/fittrackee_client/src/scss/colors-dark.scss +++ b/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; diff --git a/fittrackee_client/src/scss/colors.scss b/fittrackee_client/src/scss/colors.scss index 19a47a1f..a98ea448 100644 --- a/fittrackee_client/src/scss/colors.scss +++ b/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; diff --git a/fittrackee_client/src/utils/index.ts b/fittrackee_client/src/utils/index.ts index 0f5357e8..5db0eecd 100644 --- a/fittrackee_client/src/utils/index.ts +++ b/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 +}