diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx
index b7a67f3033..cb802f7278 100644
--- a/src/components/Composer/index.tsx
+++ b/src/components/Composer/index.tsx
@@ -101,6 +101,7 @@ export type ComposerProps = Omit<
     undefined
   >['placement']
   disableEmojiFacets?: boolean
+  caretColor?: string
 }
 
 export function Composer({
@@ -117,6 +118,7 @@ export function Composer({
   autocompletePlacement,
   defaultValue,
   disableEmojiFacets = !IS_WEB,
+  caretColor,
   ...rest
 }: ComposerProps) {
   const {theme: t, fonts} = useAlf()
@@ -336,7 +338,7 @@ export function Composer({
               background: 'transparent',
             },
             web({
-              caretColor: textStyle.color ?? 'black',
+              caretColor: caretColor ?? textStyle.color ?? 'black',
               overscrollBehavior: 'none',
               scrollbarWidth: 'thin',
               scrollbarColor: `${t.palette.contrast_200} transparent`,
diff --git a/src/screens/Messages/components/MessageComposer.tsx b/src/screens/Messages/components/MessageComposer.tsx
index b0ec463979..c8dad964f5 100644
--- a/src/screens/Messages/components/MessageComposer.tsx
+++ b/src/screens/Messages/components/MessageComposer.tsx
@@ -173,6 +173,7 @@ export function MessageComposer({
               autoFocus={IS_WEB}
               maxRows={12}
               outerStyle={[a.flex_1]}
+              caretColor={t.palette.primary_500}
               contentTextStyle={[a.text_md, a.leading_snug]}
               contentPaddingStyle={{
                 paddingLeft: 16,
diff --git a/src/screens/Messages/components/MessageInput.web.tsx b/src/screens/Messages/components/MessageInput.web.tsx
index 1ba7619d85..02776c4341 100644
--- a/src/screens/Messages/components/MessageInput.web.tsx
+++ b/src/screens/Messages/components/MessageInput.web.tsx
@@ -11,7 +11,7 @@ import {
   useMessageDraft,
   useSaveMessageDraft,
 } from '#/state/messages/message-drafts'
-import {atoms as a, flatten, useTheme} from '#/alf'
+import {atoms as a, flatten, useTheme, web} from '#/alf'
 import {Button} from '#/components/Button'
 import * as EmojiPicker from '#/components/EmojiPicker'
 import {useSharedInputStyles} from '#/components/forms/TextField'
@@ -190,6 +190,7 @@ export function MessageInput({
               backgroundColor: 'transparent',
               resize: 'none',
             },
+            web({caretColor: t.palette.primary_500}),
           ])}
           maxRows={12}
           placeholder={l`Message`}