Update darkMode.ts

src/lib/globalFunctions/darkMode.ts

@@ -4,28 +4,51 @@ import CapacitorPersistedStore from "../storage/capacitorPersistedStore";
 import { get } from "svelte/store";
 
 export const darkMode = new CapacitorPersistedStore<boolean>(false, "darkMode");
+export const autoDarkMode = new CapacitorPersistedStore<boolean>(true, "autoDarkMode");
+
 
 // Check if dark mode is enabled and set it if it is
 export async function checkAppMode() {
+	let isAuto = get(autoDarkMode);
     let isDark = get(darkMode);
-    if (isDark == null || isDark == undefined) { // Setting default dark mode | Fixes the toggle being ticked wrongly
-        darkMode.set(false);
+    if (isAuto) {
+        isDark = typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)').matches : false;
+        darkMode.set(isDark);
+    } else if (isDark == null || isDark == undefined) {        darkMode.set(false);
         isDark = false;
-        document.body.classList.add('dark');
-        await StatusBar.setStyle({ style: Style.Dark });
     }
     document.body.classList.toggle('dark', isDark);
+	if (isDark) {
+        await StatusBar.setStyle({ style: Style.Dark });
+    } else {
+        await StatusBar.setStyle({ style: Style.Light });
+    }
 
 }
 
 // Toggle dark mode on or off
 export async function toggleDarkTheme() {
     const isDark = document.body.classList.toggle('dark');
     darkMode.set(isDark);
-    // nativeSettings();
     if (isDark) {
         await StatusBar.setStyle({ style: Style.Dark });
     } else {
         await StatusBar.setStyle({ style: Style.Light });
     }
 }
+
+export async function toggleAutoDarkMode() {
+    let isAuto = !get(autoDarkMode);
+    autoDarkMode.set(isAuto);
+    if (isAuto) {
+        checkAppMode();
+    }
+}
+if (typeof window !== 'undefined') {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', async (e) => {
+        if (get(autoDarkMode)) {
+            darkMode.set(e.matches);
+            checkAppMode();
+        }
+    });
+}

src/routes/personalInfo/about.svelte

@@ -9,6 +9,7 @@
   import contributors from "$lib/components/personalInfo/contributors.json";
   import { t, locale, locales} from "$lib/i18n";
   import SubPageHeader from '$shared/subPageHeader.svelte';
+  import IonPage from 'ionic-svelte/components/IonPage.svelte';
   import { construct } from 'ionicons/icons';
 
   interface Contributor {
@@ -51,7 +52,7 @@
 
 </script>
 
-
+<IonPage>
 <SubPageHeader title={$t("about.title")} stackedNav/>
 <ion-content class="ion-padding">
 <div>
@@ -121,17 +122,18 @@
 </div>
 </div>
 </ion-content>
+</IonPage>
 
 <style>
 
 .card-content {
   padding: 20px;
 }
 
-.section {
+/* .section {
   margin-bottom: 30px;
   align-items: flex-start;
-}
+} */
 
 .section-title {
   color: var(--ion-color-primary);
@@ -164,5 +166,9 @@
   transform: scale(1.2);
 }
 
+ion-content {
+		--padding-end: 0.6rem;
+		--padding-start: 0.6rem;
+}
+
 </style>
-