From 0eb63e5a1a3ee8c26a4077ad499cba0174958168 Mon Sep 17 00:00:00 2001
From: pu-raihan <raihanbinmary@gmail.com>
Date: Wed, 27 Mar 2024 13:09:53 +0530
Subject: [PATCH] feat: Added checks for system theme

---
 src/pages/POS/ClosePOSShiftModal.vue | 2 +-
 src/pages/POS/OpenPOSShiftModal.vue  | 2 +-
 src/renderer.ts                      | 3 +--
 src/utils/theme.ts                   | 9 ++++++++-
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/pages/POS/ClosePOSShiftModal.vue b/src/pages/POS/ClosePOSShiftModal.vue
index ac302b82..57b5f31e 100644
--- a/src/pages/POS/ClosePOSShiftModal.vue
+++ b/src/pages/POS/ClosePOSShiftModal.vue
@@ -32,7 +32,7 @@
       @row-change="handleChange"
     />
 
-    <div class="mt-4 grid grid-cols-2 gap-4 flex items-end">
+    <div class="mt-4 grid grid-cols-2 gap-4 items-end">
       <Button
         class="w-full py-5 bg-red-500 dark:bg-red-700"
         @click="$emit('toggleModal', 'ShiftClose', false)"
diff --git a/src/pages/POS/OpenPOSShiftModal.vue b/src/pages/POS/OpenPOSShiftModal.vue
index bae0198d..ffd901c7 100644
--- a/src/pages/POS/OpenPOSShiftModal.vue
+++ b/src/pages/POS/OpenPOSShiftModal.vue
@@ -36,7 +36,7 @@
           @row-change="handleChange"
         />
 
-        <div class="mt-4 grid grid-cols-2 gap-4 flex items-end">
+        <div class="mt-4 grid grid-cols-2 gap-4 items-end">
           <Button
             class="w-full py-5 bg-red-500 dark:bg-red-700"
             @click="$router.back()"
diff --git a/src/renderer.ts b/src/renderer.ts
index 4c493dc3..4baabc9f 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -21,8 +21,7 @@ import { setDarkMode } from './utils/theme';
   }
   fyo.store.language = language || 'English';
 
-  const darkMode = fyo.config.get('darkMode') as boolean;
-  setDarkMode(darkMode);
+  setDarkMode();
 
   registerIpcRendererListeners();
   const { isDevelopment, platform, version } = await ipc.getEnv();
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index 2fe33d52..86d2b2df 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -11,7 +11,14 @@ export async function toggleDarkMode(): Promise<void> {
   fyo.config.set('darkMode', true);
 }
 
-export function setDarkMode(darkMode: boolean): void {
+export function setDarkMode(): void {
+  var darkMode = fyo.config.get('darkMode');
+
+  /* Fetching system theme */
+  if (darkMode === undefined){
+    darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    fyo.config.set('darkMode', darkMode);
+  }
   if (darkMode) {
     document.documentElement.classList.add('dark');
     return;