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<boolean | null> = computed(
     () => store.getters[ROOT_STORE.GETTERS.DARK_MODE]
   )
-  const darkTheme: ComputedRef<boolean> = computed(
-    () => darkMode.value !== false
-  )
+  const darkTheme: ComputedRef<boolean> = computed(() => getDarkTheme())
   const themeIcon: ComputedRef<string> = 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')