feat: complete theme-token migration and enhance error boundary with theme support

Author: Lalit Sharma

CHANGELOG.md

@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.29] — 2026-02-26
+
+### Changed
+- Continued the theme-token migration to remaining app surfaces by tokenizing `EclipsePreviewScreen` and removing hardcoded dark-only panel/background styling there.
+- Updated app error recovery UI to respect active app theme preference by wiring `ErrorBoundary` to theme colors through app state context.
+- Removed leftover hardcoded startup-shell fallback colors in `RootNavigator` styles so startup visual tokens come from the active theme.
+- Bumped `apps/mobile` version to `1.1.29`.
+
+### Tests
+- Verified mobile checks pass after this migration step: `pnpm -C apps/mobile typecheck`, `pnpm -C apps/mobile test`, and `pnpm -C apps/mobile lint`.
+
 ## [1.1.28] — 2026-02-26
 
 ### Added

apps/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eclipse-timer/mobile",
-  "version": "1.1.28",
+  "version": "1.1.29",
   "private": true,
   "main": "index.js",
   "scripts": {

apps/mobile/src/App.tsx

@@ -1,12 +1,13 @@
 import * as Sentry from "@sentry/react-native";
 import * as SplashScreen from "expo-splash-screen";
-import { useEffect } from "react";
+import { type ReactNode, useEffect } from "react";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 
 import ErrorBoundary from "./components/ErrorBoundary";
 import RootNavigator from "./navigation/RootNavigator";
 import { configureNotificationPresentationHandler } from "./services/notifications";
 import { AppStateProvider } from "./state/appState";
+import { useAppTheme } from "./theme/useAppTheme";
 
 SplashScreen.preventAutoHideAsync();
 
@@ -21,26 +22,33 @@ if (isSentryEnabled) {
   });
 }
 
-function AppInner() {
+function AppContent() {
   useEffect(() => {
     configureNotificationPresentationHandler();
   }, []);
 
+  return <RootNavigator />;
+}
+
+function ThemedErrorBoundary({ children }: { children: ReactNode }) {
+  const { colors } = useAppTheme();
+  return <ErrorBoundary colors={colors}>{children}</ErrorBoundary>;
+}
+
+function AppInner() {
   return (
     <SafeAreaProvider>
       <AppStateProvider>
-        <RootNavigator />
+        <ThemedErrorBoundary>
+          <AppContent />
+        </ThemedErrorBoundary>
       </AppStateProvider>
     </SafeAreaProvider>
   );
 }
 
 function App() {
-  return (
-    <ErrorBoundary>
-      <AppInner />
-    </ErrorBoundary>
-  );
+  return <AppInner />;
 }
 
 export default isSentryEnabled ? Sentry.wrap(App) : App;

apps/mobile/src/components/ErrorBoundary.tsx

@@ -1,9 +1,11 @@
+import * as Sentry from "@sentry/react-native";
 import { Component, type ReactNode } from "react";
 import { Pressable, StyleSheet, Text, View } from "react-native";
-import * as Sentry from "@sentry/react-native";
+import type { AppThemeColors } from "../theme/colors";
 
 type Props = {
   children: ReactNode;
+  colors?: AppThemeColors;
 };
 
 type State = {
@@ -33,6 +35,7 @@ export default class ErrorBoundary extends Component<Props, State> {
 
   render() {
     if (this.state.hasError) {
+      const styles = createStyles(this.props.colors ?? FALLBACK_ERROR_BOUNDARY_COLORS);
       return (
         <View style={styles.container}>
           <View style={styles.card}>
@@ -63,65 +66,89 @@ export default class ErrorBoundary extends Component<Props, State> {
   }
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#0b0b0b",
-    alignItems: "center",
-    justifyContent: "center",
-    paddingHorizontal: 24,
-  },
-  card: {
-    width: "100%",
-    borderRadius: 14,
-    backgroundColor: "#141414",
-    borderWidth: 1,
-    borderColor: "#2b2b2b",
-    paddingVertical: 32,
-    paddingHorizontal: 20,
-    alignItems: "center",
-    gap: 12,
-  },
-  emoji: {
-    fontSize: 36,
-  },
-  title: {
-    color: "white",
-    fontSize: 20,
-    fontWeight: "800",
-    textAlign: "center",
-  },
-  message: {
-    color: "#b7b7b7",
-    fontSize: 14,
-    lineHeight: 20,
-    textAlign: "center",
-  },
-  debugBox: {
-    width: "100%",
-    borderRadius: 8,
-    backgroundColor: "#1a1a1a",
-    borderWidth: 1,
-    borderColor: "#333",
-    paddingVertical: 8,
-    paddingHorizontal: 10,
-  },
-  debugText: {
-    color: "#ff6b6b",
-    fontSize: 12,
-    fontFamily: "monospace",
-  },
-  button: {
-    marginTop: 4,
-    paddingVertical: 12,
-    paddingHorizontal: 32,
-    borderRadius: 12,
-    backgroundColor: "#2c3cff",
-    alignItems: "center",
-  },
-  buttonText: {
-    color: "white",
-    fontWeight: "800",
-    fontSize: 15,
-  },
-});
+const FALLBACK_ERROR_BOUNDARY_COLORS: AppThemeColors = {
+  background: "#0b0b0b",
+  surface: "#121212",
+  surfaceMuted: "#171717",
+  surfaceElevated: "#1b1b1b",
+  border: "#2b2b2b",
+  borderStrong: "#3a3a3a",
+  textPrimary: "#ffffff",
+  textSecondary: "#d5d5d5",
+  textMuted: "#a8a8a8",
+  primary: "#2c3cff",
+  primaryMuted: "#1a2056",
+  primaryText: "#ffffff",
+  inputBackground: "#1b1b1b",
+  inputBorder: "#2f2f2f",
+  inputPlaceholder: "#6f6f6f",
+  dangerBackground: "#351515",
+  dangerBorder: "#7b2d2d",
+  dangerText: "#ffb8b8",
+  overlay: "rgba(0,0,0,0.58)",
+};
+
+function createStyles(colors: AppThemeColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.background,
+      alignItems: "center",
+      justifyContent: "center",
+      paddingHorizontal: 24,
+    },
+    card: {
+      width: "100%",
+      borderRadius: 14,
+      backgroundColor: colors.surface,
+      borderWidth: 1,
+      borderColor: colors.border,
+      paddingVertical: 32,
+      paddingHorizontal: 20,
+      alignItems: "center",
+      gap: 12,
+    },
+    emoji: {
+      fontSize: 36,
+    },
+    title: {
+      color: colors.textPrimary,
+      fontSize: 20,
+      fontWeight: "800",
+      textAlign: "center",
+    },
+    message: {
+      color: colors.textMuted,
+      fontSize: 14,
+      lineHeight: 20,
+      textAlign: "center",
+    },
+    debugBox: {
+      width: "100%",
+      borderRadius: 8,
+      backgroundColor: colors.inputBackground,
+      borderWidth: 1,
+      borderColor: colors.inputBorder,
+      paddingVertical: 8,
+      paddingHorizontal: 10,
+    },
+    debugText: {
+      color: colors.dangerText,
+      fontSize: 12,
+      fontFamily: "monospace",
+    },
+    button: {
+      marginTop: 4,
+      paddingVertical: 12,
+      paddingHorizontal: 32,
+      borderRadius: 12,
+      backgroundColor: colors.primary,
+      alignItems: "center",
+    },
+    buttonText: {
+      color: colors.primaryText,
+      fontWeight: "800",
+      fontSize: 15,
+    },
+  });
+}

apps/mobile/src/navigation/RootNavigator.tsx

@@ -761,17 +761,14 @@ export default function RootNavigator() {
 const styles = StyleSheet.create({
   startupSafe: {
     flex: 1,
-    backgroundColor: "#0b0b0b",
     alignItems: "center",
     justifyContent: "center",
     paddingHorizontal: 24,
   },
   startupCard: {
     width: "100%",
     borderRadius: 14,
-    backgroundColor: "#121212",
     borderWidth: 1,
-    borderColor: "#2b2b2b",
     paddingVertical: 24,
     paddingHorizontal: 16,
     alignItems: "center",
@@ -782,12 +779,10 @@ const styles = StyleSheet.create({
     height: 52,
   },
   startupTitle: {
-    color: "white",
     fontSize: 20,
     fontWeight: "800",
   },
   startupSubtitle: {
-    color: "#bdbdbd",
     fontSize: 13,
   },
   navigationRoot: {