feat(mobile): add optional Material You layout

apps/mobile/generated-uniwind-default-theme-variables.json

@@ -6,6 +6,13 @@
     "--color-card": "#ffffff",
     "--color-card-alt": "#f5f5f5",
     "--color-card-translucent": "rgba(255, 255, 255, 0.8)",
+    "--color-thread-canvas": "#f5f5f5",
+    "--color-thread-selected": "#ffffff",
+    "--color-thread-selected-foreground": "#262626",
+    "--color-thread-selected-foreground-muted": "#737373",
+    "--color-composer-panel": "rgba(245, 245, 245, 0.88)",
+    "--color-composer-surface": "rgba(255, 255, 255, 0.94)",
+    "--color-composer-border": "rgba(0, 0, 0, 0.1)",
     "--color-foreground": "#262626",
     "--color-foreground-secondary": "#525252",
     "--color-foreground-muted": "#737373",
@@ -76,6 +83,13 @@
     "--color-card": "#171717",
     "--color-card-alt": "#1c1c1c",
     "--color-card-translucent": "rgba(17, 17, 17, 0.8)",
+    "--color-thread-canvas": "#1c1c1c",
+    "--color-thread-selected": "#171717",
+    "--color-thread-selected-foreground": "#f5f5f5",
+    "--color-thread-selected-foreground-muted": "#8e8e93",
+    "--color-composer-panel": "rgba(28, 28, 28, 0.92)",
+    "--color-composer-surface": "rgba(23, 23, 23, 0.9)",
+    "--color-composer-border": "rgba(255, 255, 255, 0.08)",
     "--color-foreground": "#f5f5f5",
     "--color-foreground-secondary": "#a3a3a3",
     "--color-foreground-muted": "#8e8e93",

apps/mobile/generated-uniwind-themes.css

@@ -128,6 +128,13 @@
       --color-card: #fdfafd;
       --color-card-alt: #faf3fb;
       --color-card-translucent: rgba(253, 250, 253, 0.8);
+      --color-thread-canvas: #faf3fb;
+      --color-thread-selected: #fdfafd;
+      --color-thread-selected-foreground: #501854;
+      --color-thread-selected-foreground-muted: #ac1668;
+      --color-composer-panel: rgba(250, 243, 251, 0.88);
+      --color-composer-surface: rgba(253, 250, 253, 0.94);
+      --color-composer-border: rgba(238, 225, 237, 0.54);
       --color-foreground: #501854;
       --color-foreground-secondary: #ac1668;
       --color-foreground-muted: #8d1255;
@@ -256,6 +263,13 @@
       --color-card: #2c2631;
       --color-card-alt: #29232d;
       --color-card-translucent: rgba(44, 38, 49, 0.8);
+      --color-thread-canvas: #29232d;
+      --color-thread-selected: #2c2631;
+      --color-thread-selected-foreground: #f9f8fb;
+      --color-thread-selected-foreground-muted: #e7d0dd;
+      --color-composer-panel: rgba(41, 35, 45, 0.92);
+      --color-composer-surface: rgba(44, 38, 49, 0.9);
+      --color-composer-border: rgba(39, 36, 44, 0.46);
       --color-foreground: #f9f8fb;
       --color-foreground-secondary: #e7d0dd;
       --color-foreground-muted: #e7d0dd;
@@ -384,6 +398,13 @@
       --color-card: #ecefed;
       --color-card-alt: #f3f7f4;
       --color-card-translucent: rgba(236, 239, 237, 0.8);
+      --color-thread-canvas: #f3f7f4;
+      --color-thread-selected: #ecefed;
+      --color-thread-selected-foreground: #241523;
+      --color-thread-selected-foreground-muted: #746c73;
+      --color-composer-panel: rgba(243, 247, 244, 0.88);
+      --color-composer-surface: rgba(236, 239, 237, 0.94);
+      --color-composer-border: rgba(203, 213, 209, 0.54);
       --color-foreground: #241523;
       --color-foreground-secondary: #746c73;
       --color-foreground-muted: #6e696f;
@@ -512,6 +533,13 @@
       --color-card: #36413c;
       --color-card-alt: #1b2821;
       --color-card-translucent: rgba(54, 65, 60, 0.8);
+      --color-thread-canvas: #1b2821;
+      --color-thread-selected: #36413c;
+      --color-thread-selected-foreground: #fffaff;
+      --color-thread-selected-foreground-muted: #919595;
+      --color-composer-panel: rgba(27, 40, 33, 0.92);
+      --color-composer-surface: rgba(54, 65, 60, 0.9);
+      --color-composer-border: rgba(65, 95, 79, 0.46);
       --color-foreground: #fffaff;
       --color-foreground-secondary: #919595;
       --color-foreground-muted: #9da5a2;
@@ -640,6 +668,13 @@
       --color-card: #edeff1;
       --color-card-alt: #f5f7f8;
       --color-card-translucent: rgba(237, 239, 241, 0.8);
+      --color-thread-canvas: #f5f7f8;
+      --color-thread-selected: #edeff1;
+      --color-thread-selected-foreground: #241523;
+      --color-thread-selected-foreground-muted: #746c75;
+      --color-composer-panel: rgba(245, 247, 248, 0.88);
+      --color-composer-surface: rgba(237, 239, 241, 0.94);
+      --color-composer-border: rgba(205, 212, 220, 0.54);
       --color-foreground: #241523;
       --color-foreground-secondary: #746c75;
       --color-foreground-muted: #6f6873;
@@ -768,6 +803,13 @@
       --color-card: #333b45;
       --color-card-alt: #17212b;
       --color-card-translucent: rgba(51, 59, 69, 0.8);
+      --color-thread-canvas: #17212b;
+      --color-thread-selected: #333b45;
+      --color-thread-selected-foreground: #fffaff;
+      --color-thread-selected-foreground-muted: #8d8f97;
+      --color-composer-panel: rgba(23, 33, 43, 0.92);
+      --color-composer-surface: rgba(51, 59, 69, 0.9);
+      --color-composer-border: rgba(64, 85, 103, 0.46);
       --color-foreground: #fffaff;
       --color-foreground-secondary: #8d8f97;
       --color-foreground-muted: #969ca6;
@@ -896,6 +938,13 @@
       --color-card: #f1efee;
       --color-card-alt: #f9f7f5;
       --color-card-translucent: rgba(241, 239, 238, 0.8);
+      --color-thread-canvas: #f9f7f5;
+      --color-thread-selected: #f1efee;
+      --color-thread-selected-foreground: #241523;
+      --color-thread-selected-foreground-muted: #766c74;
+      --color-composer-panel: rgba(249, 247, 245, 0.88);
+      --color-composer-surface: rgba(241, 239, 238, 0.94);
+      --color-composer-border: rgba(221, 210, 206, 0.54);
       --color-foreground: #241523;
       --color-foreground-secondary: #766c74;
       --color-foreground-muted: #74686f;
@@ -1024,6 +1073,13 @@
       --color-card: #433835;
       --color-card-alt: #291e1a;
       --color-card-translucent: rgba(67, 56, 53, 0.8);
+      --color-thread-canvas: #291e1a;
+      --color-thread-selected: #433835;
+      --color-thread-selected-foreground: #fffaff;
+      --color-thread-selected-foreground-muted: #968e8f;
+      --color-composer-panel: rgba(41, 30, 26, 0.92);
+      --color-composer-surface: rgba(67, 56, 53, 0.9);
+      --color-composer-border: rgba(102, 76, 63, 0.46);
       --color-foreground: #fffaff;
       --color-foreground-secondary: #968e8f;
       --color-foreground-muted: #a59996;
@@ -1152,6 +1208,13 @@
       --color-card: #f0eff2;
       --color-card-alt: #f8f7f9;
       --color-card-translucent: rgba(240, 239, 242, 0.8);
+      --color-thread-canvas: #f8f7f9;
+      --color-thread-selected: #f0eff2;
+      --color-thread-selected-foreground: #241523;
+      --color-thread-selected-foreground-muted: #766c76;
+      --color-composer-panel: rgba(248, 247, 249, 0.88);
+      --color-composer-surface: rgba(240, 239, 242, 0.94);
+      --color-composer-border: rgba(214, 209, 222, 0.54);
       --color-foreground: #241523;
       --color-foreground-secondary: #766c76;
       --color-foreground-muted: #726874;
@@ -1280,6 +1343,13 @@
       --color-card: #383443;
       --color-card-alt: #1d1929;
       --color-card-translucent: rgba(56, 52, 67, 0.8);
+      --color-thread-canvas: #1d1929;
+      --color-thread-selected: #383443;
+      --color-thread-selected-foreground: #fffaff;
+      --color-thread-selected-foreground-muted: #8e8a95;
+      --color-composer-panel: rgba(29, 25, 41, 0.92);
+      --color-composer-surface: rgba(56, 52, 67, 0.9);
+      --color-composer-border: rgba(77, 67, 102, 0.46);
       --color-foreground: #fffaff;
       --color-foreground-secondary: #8e8a95;
       --color-foreground-muted: #9690a1;

apps/mobile/global.css

@@ -19,6 +19,13 @@
       --color-card: #ffffff;
       --color-card-alt: #f5f5f5;
       --color-card-translucent: rgba(255, 255, 255, 0.8);
+      --color-thread-canvas: #f5f5f5;
+      --color-thread-selected: #ffffff;
+      --color-thread-selected-foreground: #262626;
+      --color-thread-selected-foreground-muted: #737373;
+      --color-composer-panel: rgba(245, 245, 245, 0.88);
+      --color-composer-surface: rgba(255, 255, 255, 0.94);
+      --color-composer-border: rgba(0, 0, 0, 0.1);
 
       /* Text */
       --color-foreground: #262626;
@@ -123,6 +130,13 @@
       --color-card: #171717;
       --color-card-alt: #1c1c1c;
       --color-card-translucent: rgba(17, 17, 17, 0.8);
+      --color-thread-canvas: #1c1c1c;
+      --color-thread-selected: #171717;
+      --color-thread-selected-foreground: #f5f5f5;
+      --color-thread-selected-foreground-muted: #8e8e93;
+      --color-composer-panel: rgba(28, 28, 28, 0.92);
+      --color-composer-surface: rgba(23, 23, 23, 0.9);
+      --color-composer-border: rgba(255, 255, 255, 0.08);
 
       /* Text */
       --color-foreground: #f5f5f5;

apps/mobile/src/components/AndroidScreenHeader.tsx

@@ -48,6 +48,7 @@ export function AndroidScreenHeader(props: {
   readonly trailing?: ReactNode;
   readonly onBack?: () => void;
   readonly embedded?: boolean;
+  readonly hideBottomBorder?: boolean;
 }) {
   const insets = useSafeAreaInsets();
 
@@ -56,6 +57,7 @@ export function AndroidScreenHeader(props: {
       className="border-b border-header-border bg-header px-3 pb-2.5"
       style={{
         paddingTop: props.embedded ? 8 : Math.max(insets.top, 12),
+        borderBottomWidth: props.hideBottomBorder ? 0 : undefined,
       }}
     >
       <View className="min-h-12 flex-row items-center gap-2">

apps/mobile/src/components/ThemedSwitch.tsx

@@ -1,6 +1,52 @@
-import { Platform, Switch, type SwitchProps } from "react-native";
+import { Platform, Pressable, Switch, View, type SwitchProps } from "react-native";
+
+import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
+import { SymbolView } from "./AppSymbol";
 
 export function ThemedSwitch(props: SwitchProps) {
+  const { materialYouStyleLayoutActive } = useAppearancePreferences();
+  if (materialYouStyleLayoutActive) {
+    return (
+      <Pressable
+        accessibilityHint={props.accessibilityHint}
+        accessibilityLabel={props.accessibilityLabel}
+        accessibilityRole="switch"
+        accessibilityState={{ checked: Boolean(props.value), disabled: props.disabled }}
+        disabled={props.disabled}
+        hitSlop={8}
+        onPress={() => props.onValueChange?.(!props.value)}
+        style={props.style}
+        testID={props.testID}
+        className={props.disabled ? "opacity-40" : "active:opacity-70"}
+      >
+        <View
+          className={
+            props.value
+              ? "h-8 w-[52px] items-end justify-center rounded-full border-2 border-switch-active-track bg-switch-active-track px-0.5"
+              : "h-8 w-[52px] items-start justify-center rounded-full border-2 border-switch-inactive-thumb bg-switch-inactive-track px-0.5"
+          }
+        >
+          <View
+            className={
+              props.value
+                ? "size-6 items-center justify-center rounded-full bg-switch-active-thumb"
+                : "size-6 items-center justify-center rounded-full bg-switch-inactive-thumb"
+            }
+          >
+            <SymbolView
+              name={props.value ? "checkmark" : "xmark"}
+              size={13}
+              tintColorClassName={
+                props.value ? "accent-switch-active-track" : "accent-switch-inactive-track"
+              }
+              type="monochrome"
+            />
+          </View>
+        </View>
+      </Pressable>
+    );
+  }
+
   return (
     <Switch
       {...props}

apps/mobile/src/features/files/ThreadFilesRouteScreen.tsx

@@ -306,8 +306,10 @@ export function ThreadFilesTreeScreen(props: ThreadFilesRouteScreenProps) {
     useAdaptiveWorkspaceLayout();
   const [searchQuery, setSearchQuery] = useState("");
   const isAndroid = Platform.OS === "android";
-  const { themeAppearance: highlightTheme } = useAppearancePreferences();
+  const { themeAppearance: highlightTheme, materialYouStyleLayoutActive } =
+    useAppearancePreferences();
   const theme = useUniwindTheme();
+  const screenColor = theme["--color-screen"];
   const sheetSurfaceColor = theme["--color-sheet-solid"];
   const { cwd, environmentId, projectName, selectedThread, threadId } = useThreadFilesWorkspace(
     props.route.params,
@@ -423,14 +425,16 @@ export function ThreadFilesTreeScreen(props: ThreadFilesRouteScreenProps) {
   const usesCompactMailToolbar =
     Platform.OS === "ios" && !layout.usesSplitView && NATIVE_MAIL_SEARCH_TOOLBAR_SUPPORTED;
 
-  return (
+  const content = (
     <>
       {/* Static header config (glass preset and title) lives in Stack.tsx. The
           live sheet color stays dynamic here so the FlatList can remain the
           direct scene child for native scroll-edge sampling. */}
       <NativeStackScreenOptions
         options={{
-          contentStyle: { backgroundColor: sheetSurfaceColor },
+          contentStyle: {
+            backgroundColor: materialYouStyleLayoutActive ? screenColor : sheetSurfaceColor,
+          },
           headerShown: !isAndroid,
           unstable_headerSubtitle:
             Platform.OS === "ios" && projectName.length > 0 ? projectName : undefined,
@@ -466,6 +470,7 @@ export function ThreadFilesTreeScreen(props: ThreadFilesRouteScreenProps) {
             title="Files"
             subtitle={projectName}
             onBack={handleReturnToThread}
+            hideBottomBorder={materialYouStyleLayoutActive}
             actions={[
               {
                 accessibilityLabel: "Refresh files",
@@ -474,7 +479,13 @@ export function ThreadFilesTreeScreen(props: ThreadFilesRouteScreenProps) {
               },
             ]}
           />
-          <View className="flex-row items-center gap-2 border-b border-border px-3 py-2">
+          <View
+            className={
+              materialYouStyleLayoutActive
+                ? "mx-4 my-2 min-h-12 flex-row items-center gap-2 rounded-full border border-input-border bg-input px-3.5"
+                : "flex-row items-center gap-2 border-b border-border px-3 py-2"
+            }
+          >
             <SymbolView
               name="magnifyingglass"
               size={17}
@@ -485,7 +496,11 @@ export function ThreadFilesTreeScreen(props: ThreadFilesRouteScreenProps) {
               accessibilityLabel="Search files"
               autoCapitalize="none"
               autoCorrect={false}
-              className="min-h-10 flex-1 rounded-xl py-2 text-sm"
+              className={
+                materialYouStyleLayoutActive
+                  ? "min-h-10 flex-1 py-2 text-sm text-foreground"
+                  : "min-h-10 flex-1 rounded-xl py-2 text-sm"
+              }
               placeholder="Search files"
               value={searchQuery}
               onChangeText={setSearchQuery}
@@ -528,6 +543,14 @@ export function ThreadFilesTreeScreen(props: ThreadFilesRouteScreenProps) {
       <FilesToolbarBottomFade />
     </>
   );
+
+  return materialYouStyleLayoutActive ? (
+    <View className="flex-1" style={{ backgroundColor: screenColor }}>
+      {content}
+    </View>
+  ) : (
+    content
+  );
 }
 
 export function ThreadFileScreen(props: ThreadFileRouteScreenProps) {

apps/mobile/src/features/home/HomeHeader.tsx

@@ -1,3 +1,4 @@
+import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
 import type { EnvironmentId, SidebarThreadSortOrder } from "@t3tools/contracts";
 import type { MenuAction } from "@react-native-menu/menu";
 import Constants from "expo-constants";
@@ -66,6 +67,7 @@ function checkedMenuState(checked: boolean) {
 }
 
 function AndroidHomeHeader(props: HomeHeaderProps) {
+  const { materialYouStyleLayoutActive } = useAppearancePreferences();
   const insets = useSafeAreaInsets();
   const stageLabel = resolveMobileStageLabel(Constants.expoConfig?.extra?.appVariant);
   // Thread List v2 lays the list out in fixed creation order, so the
@@ -199,7 +201,11 @@ function AndroidHomeHeader(props: HomeHeaderProps) {
     <>
       <NativeStackScreenOptions options={{ headerShown: false }} />
       <View
-        className="border-b border-header-border bg-header pb-3"
+        className={
+          materialYouStyleLayoutActive
+            ? "bg-header pb-3"
+            : "border-b border-header-border bg-header pb-3"
+        }
         style={{
           paddingHorizontal: HOME_HORIZONTAL_INSET,
           paddingTop: Math.max(insets.top, 12),
@@ -269,7 +275,13 @@ function AndroidHomeHeader(props: HomeHeaderProps) {
             </Pressable>
           </View>
 
-          <View className="min-h-12 flex-row items-center gap-2.5 rounded-2xl border border-input-border bg-input px-3.5">
+          <View
+            className={
+              materialYouStyleLayoutActive
+                ? "min-h-12 flex-row items-center gap-2.5 rounded-full border border-input-border bg-input px-3.5"
+                : "min-h-12 flex-row items-center gap-2.5 rounded-2xl border border-input-border bg-input px-3.5"
+            }
+          >
             <SymbolView
               name="magnifyingglass"
               size={17}