From: Adam Dullage <redacted>
Date: Tue, 7 May 2024 12:08:11 +0000 (+0100)
Subject: Remember theme preference
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=94ce5d678829c7cd536b5705943b3797ce87c7d6;p=flatnotes.git

Remember theme preference
---

diff --git a/client/App.vue b/client/App.vue
index 7138e90..66c290e 100644
--- a/client/App.vue
+++ b/client/App.vue
@@ -21,7 +21,7 @@ import { RouterView, useRoute } from "vue-router";
 import { getConfig } from "./api.js";
 import PrimeToast from "./components/PrimeToast.vue";
 import { useGlobalStore } from "./globalStore.js";
-import { getUnknownServerErrorToastOptions } from "./helpers.js";
+import { getUnknownServerErrorToastOptions, loadTheme } from "./helpers.js";
 import NavBar from "./partials/NavBar.vue";
 import SearchModal from "./partials/SearchModal.vue";
 import { loadStoredToken } from "./tokenStorage.js";
@@ -58,4 +58,6 @@ const showNavBarLogo = computed(() => {
 function toggleSearchModal() {
   searchModal.value.toggle();
 }
+
+loadTheme();
 </script>
diff --git a/client/helpers.js b/client/helpers.js
index 1f711fe..290796b 100644
--- 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 c9c186a..ddc91d8 100644
--- 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";
 import Logo from "../components/Logo.vue";
 import PrimeMenu from "../components/PrimeMenu.vue";
+import { toggleTheme } from "../helpers.js";
 import { clearStoredToken } from "../tokenStorage.js";
 
 const menu = ref();
 const router = useRouter();
-const searchModal = ref();
 
 defineProps({
   hideLogo: Boolean,
@@ -68,10 +68,6 @@ const menuItems = [
   },
 ];
 
-function toggleTheme() {
-  document.body.classList.toggle("dark");
-}
-
 function logOut() {
   clearStoredToken();
   router.push({ name: "login" });