change to vite and enabled typescript

src/composables/useDarkMode.ts

@@ -0,0 +1,21 @@
+import { useMainStore } from '../store';
+
+export function useDarkMode() {
+  const store = useMainStore();
+  const HTMLnode = document.documentElement;
+
+  const setDarkMode = () => {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    if (prefersDark) {
+      HTMLnode.classList.add('dark');
+      store.setDarkMode(true);
+    } else {
+      HTMLnode.classList.remove('dark');
+      store.setDarkMode(false);
+    }
+  };
+
+  setDarkMode();
+  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  mediaQuery.addEventListener('change', setDarkMode);
+}

src/composables/useVuetifyDarkmode.ts

@@ -0,0 +1,21 @@
+import { watch } from 'vue';
+import { useTheme } from 'vuetify';
+import { useMainStore } from '@/store';
+
+export function useVuetifyDarkmode() {
+  const theme = useTheme();
+  const store = useMainStore();
+
+  const setVuetifyDarkmode = (isDarkMode: boolean) => {
+    theme.global.name.value = isDarkMode ? 'dark' : 'light';
+  };
+
+  setVuetifyDarkmode(store.isDarkMode);
+
+  watch(
+    () => store.isDarkMode,
+    (isDarkMode) => {
+      setVuetifyDarkmode(isDarkMode);
+    }
+  );
+}