Persist themes with user default

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'
+    newTheme = 'dark'
-  } else {
-    currentTheme.value = 'light'
-  }
-  document.documentElement.setAttribute('data-bs-theme', currentTheme.value)
   }
 
-const currentIcon = computed(() => {
+  currentTheme.value = newTheme
-  let icon = theme_icons[currentTheme.value]
+  document.documentElement.setAttribute('data-bs-theme', newTheme)
-  //console.log(currentTheme.value)
+  localStorage.setItem('theme', newTheme)
-  //console.log(icon)
+}
-  return icon
+
-})
+const currentIcon = computed(() => theme_icons[currentTheme.value])
 
 </script>