diff --git a/apps/mobile/app/app.tsx b/apps/mobile/app/app.tsx
index afd96d301..5f88fb2ce 100644
--- a/apps/mobile/app/app.tsx
+++ b/apps/mobile/app/app.tsx
@@ -24,7 +24,7 @@ import {
   useThemeEngineStore
 } from "@notesnook/theme";
 import React, { useEffect } from "react";
-import { I18nManager, StatusBar } from "react-native";
+import { Appearance, I18nManager, StatusBar } from "react-native";
 import "react-native-gesture-handler";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
@@ -129,6 +129,15 @@ export const withTheme = (Element: (props: any) => JSX.Element) => {
             /* empty */
           });
       }, 1000);
+
+      const listener = Appearance.addChangeListener(({ colorScheme }) => {
+        if (colorScheme && SettingsService.getProperty("useSystemTheme")) {
+          useThemeStore.getState().setColorScheme(colorScheme);
+        }
+      });
+      return () => {
+        listener.remove();
+      };
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
diff --git a/apps/mobile/app/stores/use-theme-store.ts b/apps/mobile/app/stores/use-theme-store.ts
index b3fdd14d3..ffae0ca83 100644
--- a/apps/mobile/app/stores/use-theme-store.ts
+++ b/apps/mobile/app/stores/use-theme-store.ts
@@ -35,7 +35,7 @@ export interface ThemeStore extends State {
 
 export function changeSystemBarColors() {
   const change = () => {
-    let currTheme =
+    const currTheme =
       useThemeStore.getState().colorScheme === "dark"
         ? SettingsService.getProperty("darkTheme")
         : SettingsService.getProperty("lighTheme");