Client - update and fix dark theme - #465

This commit is contained in:
Sam 2023-12-20 20:36:57 +01:00
parent 75b436293b
commit fadf0bce7d
10 changed files with 42 additions and 35 deletions

View File

@ -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(() => ({

View File

@ -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')

View File

@ -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'>>(() => ({

View File

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

View File

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

View File

@ -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;

View File

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

View File

@ -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;

View File

@ -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;

View File

@ -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
}