diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index 16193f175e87337ef77999af8db0436fe2f4bc6c..355dc5bff6a333db2d3903b838b35a7260c25a0a 100644
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -2,15 +2,13 @@ import { defineStore } from 'pinia';
 import defaultSettings from '../../settings';
 import { localStorage } from '@/utils/localStorage';
 import { ref } from 'vue';
+import { useCssVar, useStorage } from '@vueuse/core';
 
 const el = document.documentElement;
 
 export const useSettingsStore = defineStore('setting', () => {
   // state
-  const theme = ref(
-    localStorage.get('theme') ||
-      getComputedStyle(el).getPropertyValue(`--el-color-primary`)
-  );
+  const theme = useStorage('theme', useCssVar('--el-color-primary', el))
 
   const showSettings = ref<boolean>(defaultSettings.showSettings);
   const tagsView = ref<boolean>(