Use prefers-color-scheme

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>

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,
     };

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';