Make zinc accent monochrome and respect accentForeground

packages/app/src/components/add-host-modal.tsx

@@ -489,7 +489,7 @@ export function AddHostModal({ visible, onClose, onCancel, onSaved }: AddHostMod
         <View style={checkboxStyle}>
           {useTls ? (
             <View testID="direct-ssl-toggle-checked">
-              <Check size={14} color={theme.colors.palette.white} />
+              <Check size={14} color={theme.colors.accentForeground} />
             </View>
           ) : null}
         </View>

packages/app/src/components/composer.tsx

@@ -463,7 +463,7 @@ function QueuedMessageRow({ item, onEdit, onSendNow }: QueuedMessageRowProps) {
           accessibilityLabel="Send queued message now"
           accessibilityRole="button"
         >
-          <ArrowUp size={ICON_SIZE.sm} color="white" />
+          <ThemedArrowUp size={ICON_SIZE.sm} uniProps={iconAccentForegroundMapping} />
         </Pressable>
       </View>
     </View>
@@ -1847,6 +1847,7 @@ const styles = StyleSheet.create((theme: Theme) => ({
 const QUEUE_SEND_BUTTON_STYLE = [styles.queueActionButton, styles.queueSendButton];
 
 const ThemedPencil = withUnistyles(Pencil);
+const ThemedArrowUp = withUnistyles(ArrowUp);
 const ThemedGitPullRequest = withUnistyles(GitPullRequest);
 const ThemedCircleDot = withUnistyles(CircleDot);
 const ThemedAudioLines = withUnistyles(AudioLines);
@@ -1855,3 +1856,4 @@ const ThemedGithub = withUnistyles(Github);
 
 const iconForegroundMapping = (theme: Theme) => ({ color: theme.colors.foreground });
 const iconForegroundMutedMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
+const iconAccentForegroundMapping = (theme: Theme) => ({ color: theme.colors.accentForeground });

packages/app/src/components/dictation-controls.tsx

@@ -166,16 +166,16 @@ export function DictationOverlay({
     [actionsDisabled, isFailed],
   );
   const overlayTimerTextStyle = useMemo(
-    () => [overlayStyles.timerText, { color: theme.colors.palette.white }],
-    [theme.colors.palette.white],
+    () => [overlayStyles.timerText, { color: theme.colors.accentForeground }],
+    [theme.colors.accentForeground],
   );
   const overlayTranscriptTextStyle = useMemo(
-    () => [overlayStyles.transcriptText, { color: theme.colors.palette.white, opacity: 0.95 }],
-    [theme.colors.palette.white],
+    () => [overlayStyles.transcriptText, { color: theme.colors.accentForeground, opacity: 0.95 }],
+    [theme.colors.accentForeground],
   );
   const overlayRetryButtonStyle = useMemo(
-    () => [overlayStyles.actionButton, { backgroundColor: theme.colors.palette.white }],
-    [theme.colors.palette.white],
+    () => [overlayStyles.actionButton, { backgroundColor: theme.colors.accentForeground }],
+    [theme.colors.accentForeground],
   );
   const overlayConfirmButtonStyle = overlayRetryButtonStyle;
 
@@ -192,7 +192,7 @@ export function DictationOverlay({
         accessibilityLabel="Cancel dictation"
         style={overlayCancelButtonStyle}
       >
-        <X size={theme.iconSize.lg} color={theme.colors.palette.white} strokeWidth={2.5} />
+        <X size={theme.iconSize.lg} color={theme.colors.accentForeground} strokeWidth={2.5} />
       </Pressable>
 
       <View style={overlayStyles.centerContainer}>
@@ -202,7 +202,7 @@ export function DictationOverlay({
             isMuted={false}
             isSpeaking={false}
             orientation="horizontal"
-            color={theme.colors.palette.white}
+            color={theme.colors.accentForeground}
           />
           <Text style={overlayTimerTextStyle}>{formatDuration(duration)}</Text>
         </View>
@@ -216,7 +216,7 @@ export function DictationOverlay({
       <View style={overlayStyles.actionButtonsContainer}>
         {actionsDisabled ? (
           <View style={overlayStyles.loadingContainer}>
-            <ActivityIndicator size="small" color={theme.colors.palette.white} />
+            <ActivityIndicator size="small" color={theme.colors.accentForeground} />
           </View>
         ) : null}
         {!actionsDisabled && isFailed ? (
@@ -239,7 +239,7 @@ export function DictationOverlay({
             >
               <Pencil
                 size={theme.iconSize.lg}
-                color={theme.colors.palette.white}
+                color={theme.colors.accentForeground}
                 strokeWidth={2.5}
               />
             </Pressable>

packages/app/src/components/message-input.tsx

@@ -315,12 +315,12 @@ function SendButtonContent({
   buttonIconSize: number;
 }) {
   if (isSubmitLoading) {
-    return <ActivityIndicator size="small" color="white" />;
+    return <ThemedActivityIndicator size="small" uniProps={iconAccentForegroundMapping} />;
   }
   if (submitIcon === "return") {
-    return <CornerDownLeft size={buttonIconSize} color="white" />;
+    return <ThemedCornerDownLeft size={buttonIconSize} uniProps={iconAccentForegroundMapping} />;
   }
-  return <ArrowUp size={buttonIconSize} color="white" />;
+  return <ThemedArrowUp size={buttonIconSize} uniProps={iconAccentForegroundMapping} />;
 }
 
 function resolveSubmitAccessibilityLabel(input: {
@@ -1977,10 +1977,14 @@ const styles = StyleSheet.create((theme: Theme) => ({
 const ThemedPlus = withUnistyles(Plus);
 const ThemedMic = withUnistyles(Mic);
 const ThemedMicOff = withUnistyles(MicOff);
+const ThemedArrowUp = withUnistyles(ArrowUp);
+const ThemedCornerDownLeft = withUnistyles(CornerDownLeft);
+const ThemedActivityIndicator = withUnistyles(ActivityIndicator);
 const ThemedTextInput = withUnistyles(TextInput);
 
 const iconForegroundMapping = (theme: Theme) => ({ color: theme.colors.foreground });
 const iconForegroundMutedMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
+const iconAccentForegroundMapping = (theme: Theme) => ({ color: theme.colors.accentForeground });
 const textInputPlaceholderColorMapping = (theme: Theme) => ({
   placeholderTextColor: theme.colors.surface4,
 });

packages/app/src/styles/theme.ts

@@ -235,6 +235,7 @@ interface DarkThemeConfig {
   borderAccent: string;
   accent: string;
   accentBright: string;
+  accentForeground?: string;
   destructive: string;
 }
 
@@ -277,7 +278,7 @@ function buildDarkSemanticColors(tint: DarkThemeConfig) {
 
     accent: tint.accent,
     accentBright: tint.accentBright,
-    accentForeground: "#ffffff",
+    accentForeground: tint.accentForeground ?? "#ffffff",
 
     destructive: tint.destructive,
     destructiveForeground: "#ffffff",
@@ -352,8 +353,9 @@ const zincDarkColors = buildDarkSemanticColors({
   scrollbarHandle: "#71717a",
   border: "#27272a",
   borderAccent: "#303036",
-  accent: "#20744A",
-  accentBright: "#7ccba0",
+  accent: "#e4e4e7",
+  accentBright: "#fafafa",
+  accentForeground: "#18181b", // monochrome zinc accent is near-white — needs dark text
   destructive: "#c44a4a", // neutral red, hue 0 — clearly red without screaming
 });