initial commit. Cloned timetracker repository

bo/src/stores/theme.ts

@@ -0,0 +1,47 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+export const useThemeStore = defineStore('theme', () => {
+  const vueuseColorScheme = ref(localStorage.getItem('vueuse-color-scheme'))
+  const themeIcon = computed(() => {
+    switch (true) {
+      case vueuseColorScheme.value == 'light':
+        return 'i-heroicons-sun'
+      case vueuseColorScheme.value == 'dark':
+        return 'i-heroicons-moon'
+      case vueuseColorScheme.value == 'auto':
+        return 'i-heroicons-computer-desktop'
+    }
+  })
+
+  function setTheme() {
+    switch (true) {
+      case localStorage.getItem('vueuse-color-scheme') == 'dark':
+        vueuseColorScheme.value = 'light'
+        localStorage.setItem('vueuse-color-scheme', 'light')
+        document.documentElement.classList.toggle('dark', false)
+        break
+      case localStorage.getItem('vueuse-color-scheme') == 'light':
+        vueuseColorScheme.value = 'dark'
+        localStorage.setItem('vueuse-color-scheme', 'dark')
+        document.documentElement.classList.toggle('dark', true)
+        break
+      case localStorage.getItem('vueuse-color-scheme') == 'auto':
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+          vueuseColorScheme.value = 'light'
+          localStorage.setItem('vueuse-color-scheme', 'light')
+          document.documentElement.classList.toggle('dark', false)
+        } else {
+          vueuseColorScheme.value = 'light'
+          localStorage.setItem('vueuse-color-scheme', 'light')
+          document.documentElement.classList.toggle('dark', false)
+        }
+        break
+    }
+  }
+  return {
+    vueuseColorScheme,
+    setTheme,
+    themeIcon,
+  }
+})