feat: mobile app: add high-contrast dark mode theme toggle (#695)

mobileapp/.gitignore

@@ -40,3 +40,4 @@ yarn-error.*
 /ios
 /android
 mobileapp/package-lock.json
+package-lock.json

mobileapp/__tests__/ThemeProvider.test.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import { Text } from "react-native";
+import { render, act, fireEvent } from "@testing-library/react-native";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { ThemeProvider, useThemeContext } from "../src/contexts/ThemeProvider";
+import { Colors } from "../src/constants/theme";
+
+jest.mock("@react-native-async-storage/async-storage", () => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  return require("@react-native-async-storage/async-storage/jest/async-storage-mock");
+});
+
+const mockSystemIsLight = jest.fn(() => "light");
+jest.mock("react-native/Libraries/Utilities/useColorScheme", () => ({
+  __esModule: true,
+  default: () => mockSystemIsLight(),
+}));
+
+function Probe() {
+  const { theme, isDark, isHighContrast, preference, setPreference } =
+    useThemeContext();
+  return (
+    <>
+      <Text testID="bg">{theme.background}</Text>
+      <Text testID="isDark">{String(isDark)}</Text>
+      <Text testID="hc">{String(isHighContrast)}</Text>
+      <Text testID="pref">{preference}</Text>
+      <Text testID="set-dark" onPress={() => setPreference("dark")}>
+        go-dark
+      </Text>
+      <Text testID="set-hc" onPress={() => setPreference("high-contrast")}>
+        go-hc
+      </Text>
+    </>
+  );
+}
+
+describe("ThemeProvider", () => {
+  beforeEach(async () => {
+    await AsyncStorage.clear();
+    mockSystemIsLight.mockReturnValue("light");
+  });
+
+  it("defaults to the system palette", () => {
+    const { getByTestId } = render(
+      <ThemeProvider>
+        <Probe />
+      </ThemeProvider>
+    );
+    expect(getByTestId("bg").props.children).toBe(Colors.light.background);
+    expect(getByTestId("pref").props.children).toBe("system");
+  });
+
+  it("resolves dark palette when system is dark", () => {
+    mockSystemIsLight.mockReturnValue("dark");
+    const { getByTestId } = render(
+      <ThemeProvider>
+        <Probe />
+      </ThemeProvider>
+    );
+    expect(getByTestId("bg").props.children).toBe(Colors.dark.background);
+    expect(getByTestId("isDark").props.children).toBe("true");
+  });
+
+  it("applies dark theme immediately and persists the preference", async () => {
+    const { getByTestId } = render(
+      <ThemeProvider>
+        <Probe />
+      </ThemeProvider>
+    );
+    await act(async () => {
+      fireEvent.press(getByTestId("set-dark"));
+    });
+    expect(getByTestId("bg").props.children).toBe(Colors.dark.background);
+    expect(await AsyncStorage.getItem("zaps:theme_preference")).toBe("dark");
+  });
+
+  it("applies the high-contrast palette and flags high contrast", async () => {
+    const { getByTestId } = render(
+      <ThemeProvider>
+        <Probe />
+      </ThemeProvider>
+    );
+    await act(async () => {
+      fireEvent.press(getByTestId("set-hc"));
+    });
+    expect(getByTestId("bg").props.children).toBe(
+      Colors.highContrast.background
+    );
+    expect(getByTestId("hc").props.children).toBe("true");
+  });
+
+  it("rehydrates the persisted preference on mount", async () => {
+    await AsyncStorage.setItem("zaps:theme_preference", "dark");
+    const { getByTestId } = render(
+      <ThemeProvider>
+        <Probe />
+      </ThemeProvider>
+    );
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 0));
+    });
+    expect(getByTestId("pref").props.children).toBe("dark");
+    expect(getByTestId("bg").props.children).toBe(Colors.dark.background);
+  });
+});

mobileapp/app/(personal)/settings.tsx

@@ -136,6 +136,12 @@ export default function SettingsScreen() {
             sublabel="English"
             onPress={() => router.push("/language")}
           />
+          <SettingsItem
+            icon="color-palette-outline"
+            label="Appearance"
+            sublabel="Theme & high contrast"
+            onPress={() => router.push("/appearance")}
+          />
           <SettingsItem
             icon="help-circle-outline"
             label="Help & Support"

mobileapp/app/_layout.tsx

@@ -37,6 +37,8 @@ import { logNavigation, startNavigation } from "../src/utils/performance";
 import * as Linking from "expo-linking";
 import { parseSdpClaimUrl } from "../src/utils/sdpDeepLink";
 import { initOfflineSync } from "../src/services/api";
+import { ThemeProvider } from "../src/contexts/ThemeProvider";
+import { useTheme } from "../src/hooks/useTheme";
 
 const API_BASE = process.env.EXPO_PUBLIC_API_URL ?? "https://api.zaps.app";
 const IOS_STORE_URL = "https://apps.apple.com/app/zaps";
@@ -75,6 +77,7 @@ Notifications.setNotificationHandler({
 function LayoutContent() {
   const router = useRouter();
   const pathname = usePathname();
+  const { theme, isDark } = useTheme();
   const [forceUpdate, setForceUpdate] = React.useState(false);
   const [storeUrl, setStoreUrl] = React.useState(
     Platform.OS === "ios" ? IOS_STORE_URL : ANDROID_STORE_URL
@@ -200,12 +203,12 @@ function LayoutContent() {
   }, [router]);
 
   return (
-    <View style={{ flex: 1 }}>
-      <StatusBar style="auto" />
+    <View style={[{ flex: 1, backgroundColor: theme.backgroundRoot }]}>
+      <StatusBar style={isDark ? "light" : "auto"} />
       <Stack
         screenOptions={{
           headerShown: false,
-          contentStyle: { backgroundColor: COLORS.white },
+          contentStyle: { backgroundColor: theme.backgroundRoot },
         }}
       >
         {/* Existing screens */}
@@ -331,18 +334,20 @@ export default function Layout() {
   }
 
   return (
-    <PrivyProvider
-      appId={process.env.EXPO_PUBLIC_PRIVY_APP_ID || ""}
-      config={{
-        loginMethods: ["google", "apple", "email"],
-        appearance: { theme: "light" },
-      }}
-    >
-      <ErrorBoundary onReset={() => router.replace("/(personal)/home")}>
-        <ToastProvider>
-          <LayoutContent />
-        </ToastProvider>
-      </ErrorBoundary>
-    </PrivyProvider>
+<ThemeProvider>
+      <PrivyProvider
+        appId={process.env.EXPO_PUBLIC_PRIVY_APP_ID || ""}
+        config={{
+          loginMethods: ["google", "apple", "email"],
+          appearance: { theme: "light" },
+        }}
+      >
+        <ErrorBoundary onReset={() => router.replace("/(personal)/home")}>
+          <ToastProvider>
+            <LayoutContent />
+          </ToastProvider>
+        </ErrorBoundary>
+      </PrivyProvider>
+    </ThemeProvider>
   );
 }