chat input: blue caretcolor

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`,

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,

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`}