Remember theme preference

diff --git a/client/App.vue b/client/App.vue
index 7138e9013ef559fa65dc73945a549ec21b34964f..66c290ecdd06edc9d3dee6e6ceaebe45d12fd5db 100644 (file)
--- a/client/App.vue
+++ b/client/App.vue
@@ -21,7 +21,7 @@ import { RouterView, useRoute } from "vue-router";
 import { getConfig } from "./api.js";\r
 import PrimeToast from "./components/PrimeToast.vue";\r
 import { useGlobalStore } from "./globalStore.js";\r
-import { getUnknownServerErrorToastOptions } from "./helpers.js";\r
+import { getUnknownServerErrorToastOptions, loadTheme } from "./helpers.js";\r
 import NavBar from "./partials/NavBar.vue";\r
 import SearchModal from "./partials/SearchModal.vue";\r
 import { loadStoredToken } from "./tokenStorage.js";\r
@@ -58,4 +58,6 @@ const showNavBarLogo = computed(() => {
 function toggleSearchModal() {\r
   searchModal.value.toggle();\r
 }\r
+\r
+loadTheme();\r
 </script>\r

diff --git a/client/helpers.js b/client/helpers.js
index 1f711fe4425b7c1ea9efb4f69ec7aa9362dd0998..290796b296f4e344d1f8dae4d048e457385aa295 100644 (file)
--- a/client/helpers.js
+++ b/client/helpers.js
@@ -15,3 +15,31 @@ export function getUnknownServerErrorToastOptions() {
     true,
   );
 }
+
+export function setDarkThemeOn(save = true) {
+  document.body.classList.add("dark");
+  if (save) localStorage.setItem("darkTheme", "true");
+}
+
+export function setDarkThemeOff(save = true) {
+  document.body.classList.remove("dark");
+  if (save) localStorage.setItem("darkTheme", "false");
+}
+
+export function toggleTheme() {
+  document.body.classList.contains("dark")
+    ? setDarkThemeOff()
+    : setDarkThemeOn();
+}
+
+export function loadTheme() {
+  const storedTheme = localStorage.getItem("darkTheme");
+  if (storedTheme === "true") {
+    setDarkThemeOn();
+  } else if (
+    storedTheme === null &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches
+  ) {
+    setDarkThemeOn(false);
+  }
+}

diff --git a/client/partials/NavBar.vue b/client/partials/NavBar.vue
index c9c186aaaa3a07f69b219fd6324a37f82bdd57da..ddc91d8654ee54ac311ab751d5bfd877f0b323be 100644 (file)
--- a/client/partials/NavBar.vue
+++ b/client/partials/NavBar.vue
@@ -30,11 +30,11 @@ import { RouterLink, useRouter } from "vue-router";
 import CustomButton from "../components/CustomButton.vue";\r
 import Logo from "../components/Logo.vue";\r
 import PrimeMenu from "../components/PrimeMenu.vue";\r
+import { toggleTheme } from "../helpers.js";\r
 import { clearStoredToken } from "../tokenStorage.js";\r
 \r
 const menu = ref();\r
 const router = useRouter();\r
-const searchModal = ref();\r
 \r
 defineProps({\r
   hideLogo: Boolean,\r
@@ -68,10 +68,6 @@ const menuItems = [
   },\r
 ];\r
 \r
-function toggleTheme() {\r
-  document.body.classList.toggle("dark");\r
-}\r
-\r
 function logOut() {\r
   clearStoredToken();\r
   router.push({ name: "login" });\r