From 62621e7fe6accd4201559cc19fee138d71d098a8 Mon Sep 17 00:00:00 2001
From: Lucas Schumacher <technolucas@protonmail.com>
Date: Mon, 30 Oct 2023 23:45:37 -0400
Subject: [PATCH] Persist themes with user default

---
 client/src/components/ThemeToggle.vue | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/client/src/components/ThemeToggle.vue b/client/src/components/ThemeToggle.vue
index 0bc9357..391ce6f 100644
--- a/client/src/components/ThemeToggle.vue
+++ b/client/src/components/ThemeToggle.vue
@@ -9,25 +9,28 @@ const theme_icons = {
   'dark': IconMoonStars,
 }
 
-const currentTheme = ref('light')
+let storedTheme = localStorage.getItem('theme')
+if (!storedTheme) {
+  storedTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+const currentTheme = ref(storedTheme)
+document.documentElement.setAttribute('data-bs-theme', storedTheme)
 
 async function click(ev) {
   ev.preventDefault()
 
+  let newTheme = 'light'
   if (currentTheme.value == 'light') {
-    currentTheme.value = 'dark'
-  } else {
-    currentTheme.value = 'light'
+    newTheme = 'dark'
   }
-  document.documentElement.setAttribute('data-bs-theme', currentTheme.value)
+
+  currentTheme.value = newTheme
+  document.documentElement.setAttribute('data-bs-theme', newTheme)
+  localStorage.setItem('theme', newTheme)
 }
 
-const currentIcon = computed(() => {
-  let icon = theme_icons[currentTheme.value]
-  //console.log(currentTheme.value)
-  //console.log(icon)
-  return icon
-})
+const currentIcon = computed(() => theme_icons[currentTheme.value])
 
 </script>