Improve synced loader visibility in light mode

packages/app/src/components/sidebar-workspace-list.tsx

@@ -236,7 +236,7 @@ function WorkspaceStatusIndicator({
   if (shouldShowSyncedLoader) {
     return (
       <View style={styles.workspaceStatusDot}>
-        <SyncedLoader size={11} color={theme.colors.palette.amber[500]} />
+        <SyncedLoader size={11} color={theme.colorScheme === "light" ? theme.colors.palette.amber[700] : theme.colors.palette.amber[500]} />
       </View>
     );
   }
@@ -340,7 +340,7 @@ function ProjectLeadingVisual({
   if (shouldShowSyncedLoader) {
     return (
       <View style={styles.projectLeadingVisualSlot}>
-        <SyncedLoader size={11} color={theme.colors.palette.amber[500]} />
+        <SyncedLoader size={11} color={theme.colorScheme === "light" ? theme.colors.palette.amber[700] : theme.colors.palette.amber[500]} />
       </View>
     );
   }

packages/app/src/components/synced-loader.tsx

@@ -16,7 +16,7 @@ const DOT_COUNT = DOT_SEQUENCE.length;
 const GRID_ROWS = 3;
 const GRID_COLUMNS = 2;
 const SNAKE_SEGMENT_OFFSETS = [0, -1, -2, -3, -4] as const;
-const SNAKE_OPACITIES = [1, 0.72, 0.46, 0.22, 0] as const;
+const SNAKE_OPACITIES = [1, 0.78, 0.56, 0.34, 0] as const;
 const sharedStepProgress = makeMutable(0);
 let sharedLoopStarted = false;
 

packages/app/src/screens/workspace/workspace-tab-presentation.tsx

@@ -134,7 +134,7 @@ export function WorkspaceTabIcon({
   if (shouldShowLoader) {
     return (
       <View style={[styles.agentIconWrapper, { width: size, height: size }]}>
-        <SyncedLoader size={size - 1} color={theme.colors.palette.amber[500]} />
+        <SyncedLoader size={size - 1} color={theme.colorScheme === "light" ? theme.colors.palette.amber[700] : theme.colors.palette.amber[500]} />
       </View>
     );
   }

packages/app/src/styles/theme.ts

@@ -83,6 +83,7 @@ export const baseColors = {
   // Amber scale
   amber: {
     500: "#f59e0b",
+    700: "#b45309",
   },
 
   // Yellow scale