feat(mobile): themes with appearance override and custom import

apps/mobile/app.config.ts

@@ -2,6 +2,7 @@ import type { ExpoConfig } from "expo/config";
 
 import { BRAND_ASSET_PATHS } from "../../scripts/lib/brand-assets.ts";
 import { loadRepoEnv } from "../../scripts/lib/public-config.ts";
+import { createSchemeNeutralSplashConfig } from "./src/lib/splashConfig.ts";
 
 type AppVariant = "development" | "preview" | "production";
 
@@ -299,19 +300,9 @@ const config: ExpoConfig = {
       },
     ],
     ["expo-image-picker", { photosPermission: false, microphonePermission: false }],
-    [
-      "expo-splash-screen",
-      {
-        image: variant.assets.splashIcon,
-        resizeMode: "contain",
-        backgroundColor: "#ffffff",
-        imageWidth: 220,
-        dark: {
-          image: variant.assets.splashIcon,
-          backgroundColor: "#0a0a0a",
-        },
-      },
-    ],
+    // Expo's storyboard mod runs first, then this inlines its generated color.
+    "./plugins/withIosSplashScreenInlineBackground.cjs",
+    ["expo-splash-screen", createSchemeNeutralSplashConfig(variant.assets.splashIcon)],
     [
       "expo-build-properties",
       {

apps/mobile/global.css

@@ -80,8 +80,10 @@
       --color-md-blockquote-bg: rgba(0, 0, 0, 0.02);
       --color-md-code-bg: rgba(0, 0, 0, 0.04);
       --color-md-code-text: #262626;
+      --color-md-inline-code-text: #5f6368;
       --color-md-user-code-bg: rgba(255, 255, 255, 0.22);
       --color-md-user-code-text: #ffffff;
+      --color-md-user-inline-code-text: rgba(255, 255, 255, 0.82);
       --color-md-user-fence-bg: rgba(0, 0, 0, 0.16);
       --color-md-user-fence-text: #ffffff;
       --color-md-hr: rgba(0, 0, 0, 0.08);
@@ -174,8 +176,10 @@
       --color-md-blockquote-bg: rgba(255, 255, 255, 0.03);
       --color-md-code-bg: rgba(255, 255, 255, 0.06);
       --color-md-code-text: #e5e5e5;
+      --color-md-inline-code-text: #b8bcc2;
       --color-md-user-code-bg: rgba(255, 255, 255, 0.18);
       --color-md-user-code-text: #ffffff;
+      --color-md-user-inline-code-text: rgba(255, 255, 255, 0.82);
       --color-md-user-fence-bg: rgba(0, 0, 0, 0.28);
       --color-md-user-fence-text: #ffffff;
       --color-md-hr: rgba(255, 255, 255, 0.08);

apps/mobile/modules/t3-review-diff/android/src/main/java/expo/modules/t3reviewdiff/T3ReviewDiffView.kt

@@ -1404,16 +1404,27 @@ private fun parseStringSet(value: String): Set<String> = try {
   emptySet()
 }
 
-private fun parseColor(value: String, fallback: Int): Int = try {
-  Color.parseColor(value)
-} catch (_: Exception) {
-  fallback
+private fun parseColor(value: String, fallback: Int): Int = parseColorOrNull(value) ?: fallback
+
+private fun parseColorOrNull(value: String): Int? {
+  decodeCssHexColor(value)?.let { return it }
+  return try {
+    Color.parseColor(value)
+  } catch (_: Exception) {
+    null
+  }
 }
 
-private fun parseColorOrNull(value: String): Int? = try {
-  Color.parseColor(value)
-} catch (_: Exception) {
-  null
+private fun decodeCssHexColor(value: String): Int? {
+  val hex = value.trim().takeIf { it.startsWith("#") }?.drop(1) ?: return null
+  if (hex.length != 6 && hex.length != 8) return null
+  if (!hex.all { it in '0'..'9' || it in 'a'..'f' || it in 'A'..'F' }) return null
+  val raw = hex.toLongOrNull(16) ?: return null
+  if (hex.length == 6) return (0xff000000L or raw).toInt()
+
+  val alpha = raw and 0xff
+  val rgb = raw shr 8
+  return ((alpha shl 24) or rgb).toInt()
 }
 
 private fun JSONObject.optNullableString(key: String): String? =

apps/mobile/modules/t3-terminal/android/src/main/java/expo/modules/t3terminal/T3TerminalView.kt

@@ -428,10 +428,24 @@ class T3TerminalView(context: Context, appContext: AppContext) : ExpoView(contex
     }
   }
 
-  private fun parseColor(value: String, fallback: Int): Int =
-    try {
+  private fun parseColor(value: String, fallback: Int): Int {
+    decodeCssHexColor(value)?.let { return it }
+    return try {
       Color.parseColor(value)
     } catch (_: IllegalArgumentException) {
       fallback
     }
+  }
+
+  private fun decodeCssHexColor(value: String): Int? {
+    val hex = value.trim().takeIf { it.startsWith("#") }?.drop(1) ?: return null
+    if (hex.length != 6 && hex.length != 8) return null
+    if (!hex.all { it in '0'..'9' || it in 'a'..'f' || it in 'A'..'F' }) return null
+    val raw = hex.toLongOrNull(16) ?: return null
+    if (hex.length == 6) return (0xff000000L or raw).toInt()
+
+    val alpha = raw and 0xff
+    val rgb = raw shr 8
+    return ((alpha shl 24) or rgb).toInt()
+  }
 }

apps/mobile/modules/t3-terminal/ios/T3TerminalView.swift

@@ -181,15 +181,27 @@ private enum TerminalAppearanceScheme: String {
 }
 
 private extension UIColor {
-  convenience init(hexString: String) {
-    let sanitized = hexString.replacingOccurrences(of: "#", with: "")
-    let value = Int(sanitized, radix: 16) ?? 0
-    self.init(
-      red: CGFloat((value >> 16) & 0xFF) / 255,
-      green: CGFloat((value >> 8) & 0xFF) / 255,
-      blue: CGFloat(value & 0xFF) / 255,
-      alpha: 1
-    )
+  convenience init?(cssHex: String) {
+    let value = cssHex.trimmingCharacters(in: .whitespacesAndNewlines)
+    guard value.hasPrefix("#") else { return nil }
+    let hex = String(value.dropFirst())
+    guard hex.count == 6 || hex.count == 8, let raw = UInt64(hex, radix: 16) else { return nil }
+
+    if hex.count == 8 {
+      self.init(
+        red: CGFloat((raw >> 24) & 0xFF) / 255,
+        green: CGFloat((raw >> 16) & 0xFF) / 255,
+        blue: CGFloat((raw >> 8) & 0xFF) / 255,
+        alpha: CGFloat(raw & 0xFF) / 255
+      )
+    } else {
+      self.init(
+        red: CGFloat((raw >> 16) & 0xFF) / 255,
+        green: CGFloat((raw >> 8) & 0xFF) / 255,
+        blue: CGFloat(raw & 0xFF) / 255,
+        alpha: 1
+      )
+    }
   }
 }
 
@@ -211,7 +223,7 @@ public final class T3TerminalView: ExpoView, UITextFieldDelegate {
   private var isCreatingSurface = false
   private var surfaceCreationFailed = false
   private var appearance = TerminalAppearanceScheme.dark
-  private var backgroundColorValue = UIColor(hexString: "#24292e")
+  private var backgroundColorValue = UIColor(cssHex: "#24292e") ?? .black
 
   let onInput = EventDispatcher()
   let onResize = EventDispatcher()
@@ -276,7 +288,11 @@ public final class T3TerminalView: ExpoView, UITextFieldDelegate {
 
   var backgroundColorHex: String = "#24292e" {
     didSet {
-      backgroundColorValue = UIColor(hexString: backgroundColorHex)
+      guard let color = UIColor(cssHex: backgroundColorHex) else {
+        backgroundColorHex = oldValue
+        return
+      }
+      backgroundColorValue = color
       applyTheme()
     }
   }

apps/mobile/plugins/withIosSplashScreenInlineBackground.cjs

@@ -0,0 +1,35 @@
+const { withMod } = require("expo/config-plugins");
+
+function inlineSplashScreenBackground(modResults) {
+  // Expo's splashScreenStoryboard modResults is the parsed XML root, whose
+  // top-level `document` property contains the storyboard document.
+  const document = modResults.document;
+  const mainView = document.scenes?.[0]?.scene?.[0]?.objects?.[0]?.viewController?.[0]?.view?.[0];
+  const namedBackground = document.resources?.[0]?.namedColor?.find(
+    (entry) => entry.$?.name === "SplashScreenBackground",
+  );
+  const backgroundReference = mainView?.color?.find((entry) => entry.$?.key === "backgroundColor");
+  const concreteColor = namedBackground?.color?.[0]?.$;
+
+  if (backgroundReference?.$?.name !== "SplashScreenBackground" || !concreteColor) {
+    throw new Error(
+      "Could not find Expo's generated splash background in SplashScreen.storyboard.",
+    );
+  }
+
+  mainView.color = [{ $: { key: "backgroundColor", ...concreteColor } }];
+  return modResults;
+}
+
+module.exports = function withIosSplashScreenInlineBackground(config) {
+  return withMod(config, {
+    platform: "ios",
+    mod: "splashScreenStoryboard",
+    action: async (nextConfig) => {
+      nextConfig.modResults = inlineSplashScreenBackground(nextConfig.modResults);
+      return nextConfig;
+    },
+  });
+};
+
+module.exports.inlineSplashScreenBackground = inlineSplashScreenBackground;

apps/mobile/plugins/withIosSplashScreenInlineBackground.test.ts

@@ -0,0 +1,107 @@
+import * as NodeModule from "node:module";
+
+import { describe, expect, it } from "vite-plus/test";
+
+type StoryboardColor = {
+  $: Record<string, string>;
+};
+
+type StoryboardModResults = {
+  document: {
+    scenes: Array<{
+      scene: Array<{
+        objects: Array<{
+          viewController: Array<{
+            view: Array<{
+              color: Array<StoryboardColor>;
+            }>;
+          }>;
+        }>;
+      }>;
+    }>;
+    resources: Array<{
+      namedColor: Array<{
+        $: { name: string };
+        color: Array<StoryboardColor>;
+      }>;
+    }>;
+  };
+};
+
+const require = NodeModule.createRequire(import.meta.url);
+const {
+  inlineSplashScreenBackground,
+}: {
+  inlineSplashScreenBackground: (modResults: StoryboardModResults) => StoryboardModResults;
+} = require("./withIosSplashScreenInlineBackground.cjs");
+
+describe("iOS splash screen inline background", () => {
+  it("transforms Expo's real storyboard modResults shape", () => {
+    const modResults: StoryboardModResults = {
+      document: {
+        scenes: [
+          {
+            scene: [
+              {
+                objects: [
+                  {
+                    viewController: [
+                      {
+                        view: [
+                          {
+                            color: [
+                              {
+                                $: {
+                                  key: "backgroundColor",
+                                  name: "SplashScreenBackground",
+                                },
+                              },
+                            ],
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+        resources: [
+          {
+            namedColor: [
+              {
+                $: { name: "SplashScreenBackground" },
+                color: [
+                  {
+                    $: {
+                      alpha: "1.000",
+                      blue: "0.450980392156863",
+                      green: "0.450980392156863",
+                      red: "0.450980392156863",
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    };
+
+    expect(inlineSplashScreenBackground(modResults)).toBe(modResults);
+    expect(
+      modResults.document.scenes[0]?.scene[0]?.objects[0]?.viewController[0]?.view[0]?.color,
+    ).toEqual([
+      {
+        $: {
+          key: "backgroundColor",
+          alpha: "1.000",
+          blue: "0.450980392156863",
+          green: "0.450980392156863",
+          red: "0.450980392156863",
+        },
+      },
+    ]);
+  });
+});