feature(mobile): Add settings page for configuring the theme

1 files changed, 7 insertions, 1 deletions

diff --git a/apps/mobile/app/_layout.tsx b/apps/mobile/app/_layout.tsx
index 0f38165b..41186842 100644
--- a/apps/mobile/app/_layout.tsx
+++ b/apps/mobile/app/_layout.tsx
@@ -10,6 +10,7 @@ import { ShareIntentProvider, useShareIntent } from "expo-share-intent";
 import { StatusBar } from "expo-status-bar";
 import { StyledStack } from "@/components/navigation/stack";
 import { Providers } from "@/lib/providers";
+import useAppSettings from "@/lib/settings";
 import { cn } from "@/lib/utils";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 import { useColorScheme } from "nativewind";
@@ -17,7 +18,8 @@ import { useColorScheme } from "nativewind";
 export default function RootLayout() {
   const router = useRouter();
   const { hasShareIntent } = useShareIntent();
-  const { colorScheme } = useColorScheme();
+  const { colorScheme, setColorScheme } = useColorScheme();
+  const { settings } = useAppSettings();
 
   useEffect(() => {
     if (hasShareIntent) {
@@ -27,6 +29,10 @@ export default function RootLayout() {
     }
   }, [hasShareIntent]);
 
+  useEffect(() => {
+    setColorScheme(settings.theme);
+  }, [settings.theme]);
+
   return (
     <ShareIntentProvider>
       <Providers>