feat(enhancement): use system dark mode (#458)

* Use prefers-color-scheme

* Remove theme store

1 files changed, 1 insertions, 10 deletions

diff --git a/src/components/NavbarButtons.vue b/src/components/NavbarButtons.vue
index 81661d9..5b1a3a4 100644
--- a/src/components/NavbarButtons.vue
+++ b/src/components/NavbarButtons.vue
@@ -1,18 +1,9 @@
 <script setup lang="ts">
 import { BrandGithub, BrandTwitter, InfoCircle, Moon, Sun } from '@vicons/tabler';
 import { useStyleStore } from '@/stores/style.store';
-import { useThemeStore } from '@/ui/theme/theme.store';
 
 const styleStore = useStyleStore();
 const { isDarkTheme } = toRefs(styleStore);
-
-const themeStore = useThemeStore();
-
-function toggleDarkTheme() {
-  isDarkTheme.value = !isDarkTheme.value;
-
-  themeStore.toggleTheme();
-}
 </script>
 
 <template>
@@ -58,7 +49,7 @@ function toggleDarkTheme() {
   </n-tooltip>
   <n-tooltip trigger="hover">
     <template #trigger>
-      <c-button circle variant="text" aria-label="Toggle dark/light mode" @click="toggleDarkTheme">
+      <c-button circle variant="text" aria-label="Toggle dark/light mode" @click="() => styleStore.toggleDark()">
         <n-icon v-if="isDarkTheme" size="25" :component="Sun" />
         <n-icon v-else size="25" :component="Moon" />
       </c-button>