mobile: Add dark mode support

1 files changed, 27 insertions, 0 deletions

diff --git a/apps/mobile/components/navigation/stack.tsx b/apps/mobile/components/navigation/stack.tsx
new file mode 100644
index 00000000..f53b3652
--- /dev/null
+++ b/apps/mobile/components/navigation/stack.tsx
@@ -0,0 +1,27 @@
+import { TextStyle, ViewStyle } from "react-native";
+import { Stack } from "expo-router/stack";
+import { cssInterop } from "nativewind";
+
+interface StackProps extends React.ComponentProps<typeof Stack> {
+  contentStyle?: ViewStyle;
+  headerStyle?: TextStyle;
+}
+
+function StackImpl({ contentStyle, headerStyle, ...props }: StackProps) {
+  props.screenOptions = {
+    ...props.screenOptions,
+    contentStyle,
+    headerStyle: {
+      backgroundColor: headerStyle?.backgroundColor?.toString(),
+    },
+    navigationBarColor: contentStyle?.backgroundColor?.toString(),
+    headerTintColor: headerStyle?.color?.toString(),
+  };
+  return <Stack {...props} />;
+}
+
+// Changing this requires reloading the app
+export const StyledStack = cssInterop(StackImpl, {
+  contentClassName: "contentStyle",
+  headerClassName: "headerStyle",
+});