From 795270989278198164df24a27725650bcdf9352e Mon Sep 17 00:00:00 2001
From: rmt/src <144435+rmtsrc@users.noreply.github.com>
Date: Sat, 17 Jun 2023 22:50:55 +0100
Subject: [PATCH] Use prefers-color-scheme

---
 src/components/NavbarButtons.vue |  3 +--
 src/stores/style.store.ts        |  6 ++++--
 src/ui/theme/theme.store.ts      | 10 +++++++---
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/NavbarButtons.vue b/src/components/NavbarButtons.vue
index 81661d9f..339495df 100644
--- a/src/components/NavbarButtons.vue
+++ b/src/components/NavbarButtons.vue
@@ -9,8 +9,7 @@ const { isDarkTheme } = toRefs(styleStore);
 const themeStore = useThemeStore();
 
 function toggleDarkTheme() {
-  isDarkTheme.value = !isDarkTheme.value;
-
+  styleStore.toggleDark();
   themeStore.toggleTheme();
 }
 </script>
diff --git a/src/stores/style.store.ts b/src/stores/style.store.ts
index d70bd768..8342a880 100644
--- a/src/stores/style.store.ts
+++ b/src/stores/style.store.ts
@@ -1,10 +1,11 @@
-import { useMediaQuery, useStorage } from '@vueuse/core';
+import { useDark, useMediaQuery, useStorage, useToggle } from '@vueuse/core';
 import { defineStore } from 'pinia';
 import { type Ref, watch } from 'vue';
 
 export const useStyleStore = defineStore('style', {
   state: () => {
-    const isDarkTheme = useStorage('isDarkTheme', true) as Ref<boolean>;
+    const isDarkTheme = useDark();
+    const toggleDark = useToggle(isDarkTheme);
     const isSmallScreen = useMediaQuery('(max-width: 700px)');
     const isMenuCollapsed = useStorage('isMenuCollapsed', isSmallScreen.value) as Ref<boolean>;
 
@@ -12,6 +13,7 @@ export const useStyleStore = defineStore('style', {
 
     return {
       isDarkTheme,
+      toggleDark,
       isMenuCollapsed,
       isSmallScreen,
     };
diff --git a/src/ui/theme/theme.store.ts b/src/ui/theme/theme.store.ts
index e2457fca..04d34945 100644
--- a/src/ui/theme/theme.store.ts
+++ b/src/ui/theme/theme.store.ts
@@ -1,9 +1,13 @@
 import { defineStore } from 'pinia';
+import { useStyleStore } from '@/stores/style.store';
 
 export const useThemeStore = defineStore('ui-theme', {
-  state: () => ({
-    themeType: useStorage<'dark' | 'light'>('ui-store:theme-type', 'dark') as Ref<'dark' | 'light'>,
-  }),
+  state: () => {
+    const styleStore = useStyleStore();
+    return {
+      themeType: styleStore.isDarkTheme ? 'dark' : 'light',
+    };
+  },
   getters: {
     isDarkTheme(): boolean {
       return this.themeType === 'dark';