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

1 files changed, 47 insertions, 0 deletions

diff --git a/apps/mobile/app/dashboard/settings/theme.tsx b/apps/mobile/app/dashboard/settings/theme.tsx
new file mode 100644
index 00000000..dc7ba367
--- /dev/null
+++ b/apps/mobile/app/dashboard/settings/theme.tsx
@@ -0,0 +1,47 @@
+import { Pressable, Text, View } from "react-native";
+import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
+import { Divider } from "@/components/ui/Divider";
+import useAppSettings from "@/lib/settings";
+import { Check } from "lucide-react-native";
+
+export default function ThemePage() {
+  const { settings, setSettings } = useAppSettings();
+
+  const options = (["light", "dark", "system"] as const)
+    .map((theme) => {
+      const isChecked = settings.theme === theme;
+      return [
+        <Pressable
+          onPress={() => setSettings({ ...settings, theme })}
+          className="flex flex-row justify-between"
+          key={theme}
+        >
+          <Text className="text-lg text-accent-foreground">
+            {
+              { light: "Light Mode", dark: "Dark Mode", system: "System" }[
+                theme
+              ]
+            }
+          </Text>
+          {isChecked && <Check />}
+        </Pressable>,
+        <Divider
+          key={theme + "-divider"}
+          orientation="horizontal"
+          className="my-3 h-0.5 w-full"
+        />,
+      ];
+    })
+    .flat();
+  options.pop();
+
+  return (
+    <CustomSafeAreaView>
+      <View className="flex h-full w-full items-center px-4 py-2">
+        <View className="w-full rounded-lg bg-white px-4 py-2 dark:bg-accent">
+          {options}
+        </View>
+      </View>
+    </CustomSafeAreaView>
+  );
+}