refactor: use vueuse in useUserSkin composable (#140)

snapshot-labs · Mar 6, 2024 · 6f171ee · 6f171ee
1 parent 7fdabfe
commit 6f171ee
Showing 1 changed file with 11 additions and 38 deletions.
diff --git a/apps/ui/src/composables/useUserSkin.ts b/apps/ui/src/composables/useUserSkin.ts
@@ -1,49 +1,22 @@
-import { lsGet, lsSet } from '@/helpers/utils';
+type Skin = 'dark' | 'light' | 'none';
 
-const NOT_SET = 'none';
-const DARK_MODE = 'dark';
-const LIGHT_MODE = 'light';
-
-const currentSkin = lsGet('skin', NOT_SET);
-// const osSkin = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? LIGHT_MODE : DARK_MODE;
-const osSkin = DARK_MODE;
+export function useUserSkin() {
+  const store = useStorage<Skin>('skin', 'none');
+  const currentMode = computed(() => (store.value === 'light' ? 'light' : 'dark'));
 
-const userSkin = ref(currentSkin === NOT_SET ? osSkin : currentSkin);
-const currentMode = computed(() => (userSkin.value === LIGHT_MODE ? LIGHT_MODE : DARK_MODE));
-const _toggleSkin = skin => {
-  if (skin === LIGHT_MODE) {
-    lsSet('skin', DARK_MODE);
-    userSkin.value = DARK_MODE;
-  } else {
-    lsSet('skin', LIGHT_MODE);
-    userSkin.value = LIGHT_MODE;
+  function toggleSkin() {
+    store.value = store.value === 'light' ? 'dark' : 'light';
   }
-};
 
-export function useUserSkin() {
-  function toggleSkin() {
-    const currentSkin = lsGet('skin', NOT_SET);
-    if (currentSkin === NOT_SET) {
-      _toggleSkin(osSkin);
+  watchEffect(() => {
+    if (currentMode.value === 'light') {
+      document.documentElement.classList.remove('dark');
     } else {
-      _toggleSkin(currentSkin);
+      document.documentElement.classList.add('dark');
     }
-  }
-
-  watch(
-    userSkin,
-    () => {
-      if (userSkin.value === LIGHT_MODE) {
-        document.documentElement.classList.remove('dark');
-      } else {
-        document.documentElement.classList.add('dark');
-      }
-    },
-    { immediate: true }
-  );
+  });
 
   return {
-    userSkin,
     currentMode,
     toggleSkin
   };