feat: theme mode base on device

src/components/ProfileMenu.vue

@@ -8,13 +8,14 @@ import { getName, getRealm, getRole, isLoggedIn } from 'src/services/keycloak';
 
 const $q = useQuasar();
 
-const themeRef = ref();
 const userImage = ref<string>('');
 const filterRole = ref<string[]>();
 const inputFile = document.createElement('input');
 inputFile.type = 'file';
 inputFile.accept = 'image/*';
 // const profileFile = ref<File | undefined>(undefined);
+
+const currentTheme = ref();
 const options = ref([
   {
     icon: 'mdi-account',
@@ -54,7 +55,6 @@ const themeMode = ref([
   },
 ]);
 
-const isDarkActive = computed(() => $q.dark.isActive);
 // inputFile.addEventListener('change', async (e) => {
 //   profileFile.value = await (e.currentTarget as HTMLInputElement).files?.[0];
 //   if (profileFile.value) {
@@ -62,28 +62,57 @@ const isDarkActive = computed(() => $q.dark.isActive);
 //   }
 //   userImage.value = (await storageStore.getProfile()) ?? '';
 // });
-watch(
-  () => isDarkActive.value,
-  () => {
-    if ($q.dark.isActive) {
-      themeMode.value[1].isActive = true;
-      themeMode.value[0].isActive = false;
-      localStorage.setItem('currentTheme', 'dark');
+
+function changeMode(mode: string) {
+  if (mode === 'light') {
+    localStorage.setItem('currentTheme', 'light');
+    themeMode.value[0].isActive = true;
+    themeMode.value[1].isActive = false;
+    themeMode.value[2].isActive = false;
+    $q.dark.set(false);
+    return;
+  }
+
+  if (mode === 'dark') {
+    localStorage.setItem('currentTheme', 'dark');
+    themeMode.value[0].isActive = false;
+    themeMode.value[1].isActive = true;
+    themeMode.value[2].isActive = false;
+    $q.dark.set(true);
+    return;
+  }
+
+  if (mode === 'baseOnDevice') {
+    localStorage.setItem('currentTheme', 'baseOnDevice');
+    themeMode.value[0].isActive = false;
+    themeMode.value[1].isActive = false;
+    themeMode.value[2].isActive = true;
+    if (
+      window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+    ) {
+      $q.dark.set(true);
     } else {
-      themeMode.value[0].isActive = true;
-      themeMode.value[1].isActive = false;
-      localStorage.setItem('currentTheme', 'light');
+      $q.dark.set(false);
     }
-  },
-);
+    return;
+  }
+}
+
+window
+  .matchMedia('(prefers-color-scheme: dark)')
+  .addEventListener('change', () => {
+    changeMode('baseOnDevice');
+  });
 
 onMounted(async () => {
   //   if (isLoggedIn()) {
   //     userImage.value = (await storageStore.getProfile()) ?? '';
   //   }
-  isDarkActive.value
-    ? (themeMode.value[1].isActive = true)
-    : (themeMode.value[0].isActive = true);
+  currentTheme.value = localStorage.getItem('currentTheme');
+  if (currentTheme.value === 'light') changeMode('light');
+  if (currentTheme.value === 'dark') changeMode('dark');
+  if (currentTheme.value === 'baseOnDevice') changeMode('baseOnDevice');
 
   const userRoles = getRole();
   if (userRoles) {
@@ -230,14 +259,13 @@ onMounted(async () => {
                       {{ $t(op.label) }}
                     </span>
                     <span class="app-text-muted-2">
-                      {{ isDarkActive ? $t('dark') : $t('light') }}
+                      {{ $t(currentTheme) }}
                       <q-icon name="mdi-chevron-right" />
                     </span>
                   </div>
                 </q-item-section>
 
                 <q-menu
-                  ref="themeRef"
                   class="bordered rounded"
                   anchor="top right"
                   self="top left"
@@ -250,7 +278,7 @@ onMounted(async () => {
                       clickable
                       @click="
                         () => {
-                          mode.isActive ? '' : $q.dark.toggle();
+                          changeMode(mode.value);
                         }
                       "
                     >

src/layouts/MainLayout.vue

@@ -151,9 +151,6 @@ onMounted(async () => {
     setLocale('th');
   }
 
-  const getCurTheme = localStorage.getItem('currentTheme');
-  if (getCurTheme === 'dark') $q.dark.toggle();
-
   const resultOption = await fetch('/option/option.json');
   rawOption.value = await resultOption.json();
   if (locale.value === 'en-US') optionStore.globalOption = rawOption.value.eng;