From 816296c97613e0fb6fabe628295f51e988cde36e Mon Sep 17 00:00:00 2001 From: Sam Date: Sun, 17 Dec 2023 10:07:19 +0100 Subject: [PATCH] Client - take browser preferences into account for dark mode --- fittrackee_client/src/components/NavBar.vue | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/fittrackee_client/src/components/NavBar.vue b/fittrackee_client/src/components/NavBar.vue index 4fcc8a5c..171db642 100644 --- a/fittrackee_client/src/components/NavBar.vue +++ b/fittrackee_client/src/components/NavBar.vue @@ -136,9 +136,7 @@ const darkMode: ComputedRef = computed( () => store.getters[ROOT_STORE.GETTERS.DARK_MODE] ) - const darkTheme: ComputedRef = computed( - () => darkMode.value !== false - ) + const darkTheme: ComputedRef = computed(() => getDarkTheme()) const themeIcon: ComputedRef = computed(() => darkTheme.value ? 'fa-moon' : 'fa-sun' ) @@ -166,6 +164,15 @@ 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')