From d1e6239a1f68cb540f94bdad98650904f8366b0f Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 1 Jul 2024 07:50:30 +0000
Subject: [PATCH] fix: theme on device

---
 src/components/ProfileMenu.vue | 32 +++++++++++++++++++++++---------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/components/ProfileMenu.vue b/src/components/ProfileMenu.vue
index e359bfc7..dfa4889e 100644
--- a/src/components/ProfileMenu.vue
+++ b/src/components/ProfileMenu.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useQuasar } from 'quasar';
 // import useOption from 'src/stores/option';
 
@@ -10,6 +10,7 @@ const $q = useQuasar();
 
 const userImage = ref<string>('');
 const filterRole = ref<string[]>();
+
 const inputFile = document.createElement('input');
 inputFile.type = 'file';
 inputFile.accept = 'image/*';
@@ -99,20 +100,33 @@ function changeMode(mode: string) {
   }
 }
 
-window
-  .matchMedia('(prefers-color-scheme: dark)')
-  .addEventListener('change', () => {
-    if (themeMode.value[2].isActive) changeMode('baseOnDevice');
-  });
+function themeChange() {
+  if (themeMode.value[2].isActive) changeMode('baseOnDevice');
+}
+
+onUnmounted(() => {
+  window
+    .matchMedia('(prefers-color-scheme: dark)')
+    .removeEventListener('change', themeChange);
+});
 
 onMounted(async () => {
+  window
+    .matchMedia('(prefers-color-scheme: dark)')
+    .addEventListener('change', themeChange);
   //   if (isLoggedIn()) {
   //     userImage.value = (await storageStore.getProfile()) ?? '';
   //   }
   currentTheme.value = localStorage.getItem('currentTheme');
-  if (currentTheme.value === 'light') changeMode('light');
-  if (currentTheme.value === 'dark') changeMode('dark');
-  if (currentTheme.value === 'baseOnDevice') changeMode('baseOnDevice');
+  if (
+    currentTheme.value === 'light' ||
+    currentTheme.value === 'dark' ||
+    currentTheme.value === 'baseOnDevice'
+  ) {
+    changeMode(currentTheme.value);
+  } else {
+    changeMode('light');
+  }
 
   const userRoles = getRole();
   if (userRoles) {