fix(mobile): fix formsheet colors

Author: MohamedBassem

apps/mobile/app/_layout.tsx

@@ -12,6 +12,7 @@ import { ShareIntentProvider, useShareIntent } from "expo-share-intent";
 import { StatusBar } from "expo-status-bar";
 import { StyledStack } from "@/components/navigation/stack";
 import SplashScreenController from "@/components/SplashScreenController";
+import { getFormSheetSurfaceOptions } from "@/lib/form-sheet-options";
 import { isIOS26 } from "@/lib/ios";
 import { Providers } from "@/lib/providers";
 import { useColorScheme, useInitialAndroidBarSync } from "@/lib/useColorScheme";
@@ -34,7 +35,8 @@ export default Sentry.wrap(function RootLayout() {
   useInitialAndroidBarSync();
   const router = useRouter();
   const { hasShareIntent } = useShareIntent();
-  const { colorScheme } = useColorScheme();
+  const { colorScheme, colors } = useColorScheme();
+  const formSheetSurfaceOptions = getFormSheetSurfaceOptions(colors.background);
 
   useEffect(() => {
     if (hasShareIntent) {
@@ -115,6 +117,7 @@ export default Sentry.wrap(function RootLayout() {
             <Stack.Screen
               name="server-address"
               options={{
+                ...formSheetSurfaceOptions,
                 title: "Server Address",
                 headerShown: true,
                 headerTransparent: false,
@@ -128,6 +131,7 @@ export default Sentry.wrap(function RootLayout() {
             <Stack.Screen
               name="test-connection"
               options={{
+                ...formSheetSurfaceOptions,
                 title: "Test Connection",
                 headerShown: true,
                 headerTransparent: false,

apps/mobile/app/dashboard/_layout.tsx

@@ -4,8 +4,10 @@ import { AppState, Platform } from "react-native";
 import { useRouter } from "expo-router";
 import { Stack } from "expo-router/stack";
 import BookmarkListHeader from "@/components/bookmarks/BookmarkListHeader";
+import { getFormSheetSurfaceOptions } from "@/lib/form-sheet-options";
 import { isIOS26 } from "@/lib/ios";
 import { useIsLoggedIn } from "@/lib/session";
+import { useColorScheme } from "@/lib/useColorScheme";
 import { focusManager } from "@tanstack/react-query";
 
 function onAppStateChange(status: AppStateStatus) {
@@ -16,6 +18,8 @@ function onAppStateChange(status: AppStateStatus) {
 
 export default function Dashboard() {
   const router = useRouter();
+  const { colors } = useColorScheme();
+  const formSheetSurfaceOptions = getFormSheetSurfaceOptions(colors.background);
 
   const isLoggedIn = useIsLoggedIn();
   useEffect(() => {
@@ -73,6 +77,7 @@ export default function Dashboard() {
       <Stack.Screen
         name="bookmarks/new"
         options={{
+          ...formSheetSurfaceOptions,
           headerTitle: "New Bookmark",
           headerBackTitle: "Back",
           headerTransparent: false,
@@ -88,6 +93,7 @@ export default function Dashboard() {
       <Stack.Screen
         name="bookmarks/[slug]/manage_tags"
         options={{
+          ...formSheetSurfaceOptions,
           headerTitle: "Manage Tags",
           headerTransparent: false,
           headerLargeTitle: false,
@@ -102,6 +108,7 @@ export default function Dashboard() {
       <Stack.Screen
         name="bookmarks/[slug]/manage_lists"
         options={{
+          ...formSheetSurfaceOptions,
           headerTitle: "Manage Lists",
           headerTransparent: false,
           headerLargeTitle: false,
@@ -116,6 +123,7 @@ export default function Dashboard() {
       <Stack.Screen
         name="bookmarks/[slug]/info"
         options={{
+          ...formSheetSurfaceOptions,
           headerTitle: "Edit Bookmark",
           headerTransparent: false,
           headerLargeTitle: false,
@@ -129,6 +137,7 @@ export default function Dashboard() {
       <Stack.Screen
         name="bookmarks/[slug]/highlights"
         options={{
+          ...formSheetSurfaceOptions,
           headerTitle: "Highlights",
           headerTransparent: false,
           headerLargeTitle: false,
@@ -142,6 +151,7 @@ export default function Dashboard() {
       <Stack.Screen
         name="lists/new"
         options={{
+          ...formSheetSurfaceOptions,
           headerTitle: "New List",
           headerBackTitle: "Back",
           headerLargeTitle: false,
@@ -156,6 +166,7 @@ export default function Dashboard() {
       <Stack.Screen
         name="lists/[slug]/edit"
         options={{
+          ...formSheetSurfaceOptions,
           headerTitle: "Edit List",
           headerBackTitle: "Back",
           headerLargeTitle: false,
@@ -178,6 +189,7 @@ export default function Dashboard() {
       <Stack.Screen
         name="settings/index"
         options={{
+          ...formSheetSurfaceOptions,
           headerTitle: "Settings",
           headerTransparent: false,
           headerLargeTitle: false,

apps/mobile/components/ui/FAB/FAB.ios.tsx

@@ -7,6 +7,7 @@ import { isIOS26, isIPad } from "@/lib/ios";
 
 const shouldUseGlass = isIOS26 && isGlassEffectAPIAvailable();
 const SIZE = 62;
+const TAB_BAR_GAP = 8;
 
 export function FAB({ children }: { children: ReactNode }) {
   const insets = useSafeAreaInsets();
@@ -16,7 +17,7 @@ export function FAB({ children }: { children: ReactNode }) {
       style={[
         styles.container,
         {
-          bottom: insets.bottom + (isIPad ? 0 : isIOS26 ? 57 : 60),
+          bottom: insets.bottom + (isIPad ? 0 : TAB_BAR_GAP),
           right: isIOS26 ? 21 : 16,
         },
       ]}

apps/mobile/lib/form-sheet-options.ts

@@ -0,0 +1,8 @@
+import type { ColorValue } from "react-native";
+
+export function getFormSheetSurfaceOptions(backgroundColor: ColorValue) {
+  return {
+    contentStyle: { backgroundColor },
+    headerStyle: { backgroundColor },
+  };
+}