Wrap all <Text> in a helper that ensures black color is applied by default

src/view/com/composer/Autocomplete.tsx

@@ -1,12 +1,12 @@
 import React, {useEffect} from 'react'
 import {
   Animated,
-  Text,
   TouchableOpacity,
   StyleSheet,
   useWindowDimensions,
 } from 'react-native'
 import {useAnimatedValue} from '../../lib/useAnimatedValue'
+import {Text} from '../util/Text'
 import {colors} from '../../lib/styles'
 
 interface AutocompleteItem {

src/view/com/composer/ComposePost.tsx

@@ -7,7 +7,6 @@ import {
   SafeAreaView,
   ScrollView,
   StyleSheet,
-  Text,
   TextInput,
   TouchableOpacity,
   View,
@@ -16,6 +15,7 @@ import LinearGradient from 'react-native-linear-gradient'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {UserAutocompleteViewModel} from '../../../state/models/user-autocomplete-view'
 import {Autocomplete} from './Autocomplete'
+import {Text} from '../util/Text'
 import * as Toast from '../util/Toast'
 // @ts-ignore no type definition -prf
 import ProgressCircle from 'react-native-progress/Circle'
@@ -209,7 +209,7 @@ export const ComposePost = observer(function ComposePost({
         </View>
         {isProcessing ? (
           <View style={styles.processingLine}>
-            <Text>{processingState}</Text>
+            <Text style={s.black}>{processingState}</Text>
           </View>
         ) : undefined}
         {error !== '' && (
@@ -401,6 +401,7 @@ const styles = StyleSheet.create({
     fontSize: 18,
     marginLeft: 8,
     alignSelf: 'flex-start',
+    color: colors.black,
   },
   replyToLayout: {
     flexDirection: 'row',

src/view/com/composer/Prompt.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import {colors} from '../../lib/styles'
 import {useStores} from '../../../state'
 import {UserAvatar} from '../util/UserAvatar'
+import {Text} from '../util/Text'
 
 export function ComposePrompt({
   noAvi = false,

src/view/com/discover/SuggestedFollows.tsx

@@ -3,7 +3,6 @@ import {
   ActivityIndicator,
   FlatList,
   StyleSheet,
-  Text,
   TouchableOpacity,
   View,
 } from 'react-native'
@@ -13,6 +12,7 @@ import {observer} from 'mobx-react-lite'
 import _omit from 'lodash.omit'
 import {ErrorScreen} from '../util/ErrorScreen'
 import {Link} from '../util/Link'
+import {Text} from '../util/Text'
 import {UserAvatar} from '../util/UserAvatar'
 import * as Toast from '../util/Toast'
 import {useStores} from '../../../state'

src/view/com/login/CreateAccount.tsx

@@ -5,7 +5,6 @@ import {
   KeyboardAvoidingView,
   ScrollView,
   StyleSheet,
-  Text,
   TextInput,
   TouchableOpacity,
   View,
@@ -15,6 +14,7 @@ import * as EmailValidator from 'email-validator'
 import {Logo} from './Logo'
 import {Picker} from '../util/Picker'
 import {TextLink} from '../util/Link'
+import {Text} from '../util/Text'
 import {s, colors} from '../../lib/styles'
 import {
   makeValidHandle,

src/view/com/login/Signin.tsx

@@ -4,7 +4,6 @@ import {
   Keyboard,
   KeyboardAvoidingView,
   StyleSheet,
-  Text,
   TextInput,
   TouchableOpacity,
   View,
@@ -12,6 +11,7 @@ import {
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import * as EmailValidator from 'email-validator'
 import {Logo} from './Logo'
+import {Text} from '../util/Text'
 import {s, colors} from '../../lib/styles'
 import {createFullHandle, toNiceDomain} from '../../../lib/strings'
 import {useStores, RootStoreModel, DEFAULT_SERVICE} from '../../../state'

src/view/com/modals/Confirm.tsx

@@ -2,11 +2,11 @@ import React, {useState} from 'react'
 import {
   ActivityIndicator,
   StyleSheet,
-  Text,
   TouchableOpacity,
   View,
 } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
+import {Text} from '../util/Text'
 import {useStores} from '../../../state'
 import {s, colors, gradients} from '../../lib/styles'
 import {ErrorMessage} from '../util/ErrorMessage'

src/view/com/modals/CreateScene.tsx

@@ -3,13 +3,13 @@ import * as Toast from '../util/Toast'
 import {
   ActivityIndicator,
   StyleSheet,
-  Text,
   TouchableOpacity,
   View,
 } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet'
 import {ErrorMessage} from '../util/ErrorMessage'
+import {Text} from '../util/Text'
 import {useStores} from '../../../state'
 import {s, colors, gradients} from '../../lib/styles'
 import {

src/view/com/modals/EditProfile.tsx

@@ -3,13 +3,13 @@ import * as Toast from '../util/Toast'
 import {
   ActivityIndicator,
   StyleSheet,
-  Text,
   TouchableOpacity,
   View,
 } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet'
 import {Image as PickedImage} from 'react-native-image-crop-picker'
+import {Text} from '../util/Text'
 import {ErrorMessage} from '../util/ErrorMessage'
 import {useStores} from '../../../state'
 import {ProfileViewModel} from '../../../state/models/profile-view'

src/view/com/modals/InviteToScene.tsx

@@ -5,7 +5,6 @@ import {
   ActivityIndicator,
   FlatList,
   StyleSheet,
-  Text,
   useWindowDimensions,
   View,
 } from 'react-native'
@@ -21,6 +20,7 @@ import _omit from 'lodash.omit'
 import {AtUri} from '../../../third-party/uri'
 import {ProfileCard} from '../profile/ProfileCard'
 import {ErrorMessage} from '../util/ErrorMessage'
+import {Text} from '../util/Text'
 import {useStores} from '../../../state'
 import * as apilib from '../../../state/lib/api'
 import {ProfileViewModel} from '../../../state/models/profile-view'

src/view/com/modals/ReportAccount.tsx

@@ -2,7 +2,6 @@ import React, {useState} from 'react'
 import {
   ActivityIndicator,
   StyleSheet,
-  Text,
   TouchableOpacity,
   View,
 } from 'react-native'
@@ -10,6 +9,7 @@ import LinearGradient from 'react-native-linear-gradient'
 import {useStores} from '../../../state'
 import {s, colors, gradients} from '../../lib/styles'
 import {RadioGroup, RadioGroupItem} from '../util/forms/RadioGroup'
+import {Text} from '../util/Text'
 import {ErrorMessage} from '../util/ErrorMessage'
 
 const ITEMS: RadioGroupItem[] = [

src/view/com/modals/ReportPost.tsx

@@ -2,7 +2,6 @@ import React, {useState} from 'react'
 import {
   ActivityIndicator,
   StyleSheet,
-  Text,
   TouchableOpacity,
   View,
 } from 'react-native'
@@ -10,6 +9,7 @@ import LinearGradient from 'react-native-linear-gradient'
 import {useStores} from '../../../state'
 import {s, colors, gradients} from '../../lib/styles'
 import {RadioGroup, RadioGroupItem} from '../util/forms/RadioGroup'
+import {Text} from '../util/Text'
 import {ErrorMessage} from '../util/ErrorMessage'
 
 const ITEMS: RadioGroupItem[] = [

src/view/com/modals/ServerInput.tsx

@@ -1,7 +1,8 @@
 import React, {useState} from 'react'
-import {Platform, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {Platform, StyleSheet, TouchableOpacity, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet'
+import {Text} from '../util/Text'
 import {useStores} from '../../../state'
 import {s, colors} from '../../lib/styles'
 import {

src/view/com/notifications/FeedItem.tsx

@@ -1,6 +1,6 @@
 import React, {useMemo} from 'react'
 import {observer} from 'mobx-react-lite'
-import {StyleSheet, Text, View} from 'react-native'
+import {StyleSheet, View} from 'react-native'
 import {AtUri} from '../../../third-party/uri'
 import {FontAwesomeIcon, Props} from '@fortawesome/react-native-fontawesome'
 import {NotificationsViewItemModel} from '../../../state/models/notifications-view'
@@ -8,6 +8,7 @@ import {PostThreadViewModel} from '../../../state/models/post-thread-view'
 import {s, colors} from '../../lib/styles'
 import {ago, pluralize} from '../../../lib/strings'
 import {UpIconSolid} from '../../lib/icons'
+import {Text} from '../util/Text'
 import {UserAvatar} from '../util/UserAvatar'
 import {ErrorMessage} from '../util/ErrorMessage'
 import {Post} from '../post/Post'

src/view/com/notifications/InviteAccepter.tsx

@@ -1,5 +1,5 @@
 import React, {useState} from 'react'
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import * as apilib from '../../../state/lib/api'
@@ -8,6 +8,7 @@ import {ConfirmModal} from '../../../state/models/shell-ui'
 import {useStores} from '../../../state'
 import {ProfileCard} from '../profile/ProfileCard'
 import * as Toast from '../util/Toast'
+import {Text} from '../util/Text'
 import {s, colors, gradients} from '../../lib/styles'
 
 export function InviteAccepter({item}: {item: NotificationsViewItemModel}) {

src/view/com/onboard/FeatureExplainer.tsx

@@ -4,13 +4,13 @@ import {
   Image,
   SafeAreaView,
   StyleSheet,
-  Text,
   TouchableOpacity,
   useWindowDimensions,
   View,
 } from 'react-native'
 import {TabView, SceneMap, Route, TabBarProps} from 'react-native-tab-view'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {Text} from '../util/Text'
 import {UserGroupIcon} from '../../lib/icons'
 import {useStores} from '../../../state'
 import {s} from '../../lib/styles'

src/view/com/onboard/Follows.tsx

@@ -1,13 +1,8 @@
 import React from 'react'
-import {
+import {SafeAreaView, StyleSheet, TouchableOpacity, View} from 'react-native'
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {SuggestedFollows} from '../discover/SuggestedFollows'
+import {Text} from '../util/Text'
 import {useStores} from '../../../state'
 import {s} from '../../lib/styles'
 

src/view/com/post-thread/PostRepostedBy.tsx

@@ -1,6 +1,6 @@
 import React, {useState, useEffect} from 'react'
 import {observer} from 'mobx-react-lite'
-import {ActivityIndicator, FlatList, StyleSheet, Text, View} from 'react-native'
+import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native'
 import {
   RepostedByViewModel,
   RepostedByViewItemModel,
@@ -8,6 +8,7 @@ import {
 import {UserAvatar} from '../util/UserAvatar'
 import {ErrorMessage} from '../util/ErrorMessage'
 import {Link} from '../util/Link'
+import {Text} from '../util/Text'
 import {useStores} from '../../../state'
 import {s, colors} from '../../lib/styles'
 

src/view/com/post-thread/PostThreadItem.tsx

@@ -1,6 +1,6 @@
 import React, {useMemo, useState} from 'react'
 import {observer} from 'mobx-react-lite'
-import {StyleSheet, Text, View} from 'react-native'
+import {StyleSheet, View} from 'react-native'
 import Clipboard from '@react-native-clipboard/clipboard'
 import {AtUri} from '../../../third-party/uri'
 import * as PostType from '../../../third-party/api/src/client/types/app/bsky/feed/post'
@@ -8,6 +8,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {PostThreadViewPostModel} from '../../../state/models/post-thread-view'
 import {Link} from '../util/Link'
 import {RichText} from '../util/RichText'
+import {Text} from '../util/Text'
 import {PostDropdownBtn} from '../util/DropdownBtn'
 import * as Toast from '../util/Toast'
 import {UserAvatar} from '../util/UserAvatar'

src/view/com/post-thread/PostVotedBy.tsx

@@ -1,11 +1,12 @@
 import React, {useState, useEffect} from 'react'
 import {observer} from 'mobx-react-lite'
-import {ActivityIndicator, FlatList, StyleSheet, Text, View} from 'react-native'
+import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native'
 import {
   VotesViewModel,
   VotesViewItemModel,
 } from '../../../state/models/votes-view'
 import {Link} from '../util/Link'
+import {Text} from '../util/Text'
 import {ErrorMessage} from '../util/ErrorMessage'
 import {UserAvatar} from '../util/UserAvatar'
 import {useStores} from '../../../state'

src/view/com/post/Post.tsx

@@ -3,7 +3,6 @@ import {
   ActivityIndicator,
   StyleProp,
   StyleSheet,
-  Text,
   View,
   ViewStyle,
 } from 'react-native'
@@ -18,6 +17,7 @@ import {UserInfoText} from '../util/UserInfoText'
 import {PostMeta} from '../util/PostMeta'
 import {PostEmbeds} from '../util/PostEmbeds'
 import {PostCtrls} from '../util/PostCtrls'
+import {Text} from '../util/Text'
 import {RichText} from '../util/RichText'
 import * as Toast from '../util/Toast'
 import {UserAvatar} from '../util/UserAvatar'

src/view/com/post/PostText.tsx

@@ -1,8 +1,9 @@
 import React, {useState, useEffect} from 'react'
 import {observer} from 'mobx-react-lite'
-import {Text, View} from 'react-native'
+import {View} from 'react-native'
 import {LoadingPlaceholder} from '../util/LoadingPlaceholder'
 import {ErrorMessage} from '../util/ErrorMessage'
+import {Text} from '../util/Text'
 import {PostModel} from '../../../state/models/post'
 import {useStores} from '../../../state'
 

src/view/com/posts/FeedItem.tsx

@@ -1,6 +1,6 @@
 import React, {useMemo, useState} from 'react'
 import {observer} from 'mobx-react-lite'
-import {StyleSheet, Text, View} from 'react-native'
+import {StyleSheet, View} from 'react-native'
 import Clipboard from '@react-native-clipboard/clipboard'
 import Svg, {Circle, Line} from 'react-native-svg'
 import {AtUri} from '../../../third-party/uri'
@@ -8,6 +8,7 @@ import * as PostType from '../../../third-party/api/src/client/types/app/bsky/fe
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {FeedItemModel} from '../../../state/models/feed-view'
 import {Link} from '../util/Link'
+import {Text} from '../util/Text'
 import {UserInfoText} from '../util/UserInfoText'
 import {Post} from '../post/Post'
 import {PostMeta} from '../util/PostMeta'

src/view/com/profile/ProfileCard.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import {Link} from '../util/Link'
+import {Text} from '../util/Text'
 import {UserAvatar} from '../util/UserAvatar'
 import {s, colors} from '../../lib/styles'
 
@@ -35,7 +36,7 @@ export function ProfileCard({
           />
         </View>
         <View style={styles.layoutContent}>
-          <Text style={[s.f16, s.bold]} numberOfLines={1}>
+          <Text style={[s.f16, s.bold, s.black]} numberOfLines={1}>
             {displayName || handle}
           </Text>
           <Text style={[s.f15, s.gray5]} numberOfLines={1}>

src/view/com/profile/ProfileFollowers.tsx

@@ -1,11 +1,12 @@
 import React, {useState, useEffect} from 'react'
 import {observer} from 'mobx-react-lite'
-import {ActivityIndicator, FlatList, StyleSheet, Text, View} from 'react-native'
+import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native'
 import {
   UserFollowersViewModel,
   FollowerItem,
 } from '../../../state/models/user-followers-view'
 import {Link} from '../util/Link'
+import {Text} from '../util/Text'
 import {ErrorMessage} from '../util/ErrorMessage'
 import {UserAvatar} from '../util/UserAvatar'
 import {useStores} from '../../../state'
@@ -96,7 +97,9 @@ const User = ({item}: {item: FollowerItem}) => {
           />
         </View>
         <View style={styles.layoutContent}>
-          <Text style={[s.f15, s.bold]}>{item.displayName || item.handle}</Text>
+          <Text style={[s.f15, s.bold, s.black]}>
+            {item.displayName || item.handle}
+          </Text>
           <Text style={[s.f14, s.gray5]}>@{item.handle}</Text>
         </View>
       </View>

src/view/com/profile/ProfileFollows.tsx

@@ -1,12 +1,13 @@
 import React, {useState, useEffect} from 'react'
 import {observer} from 'mobx-react-lite'
-import {ActivityIndicator, FlatList, StyleSheet, Text, View} from 'react-native'
+import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native'
 import {
   UserFollowsViewModel,
   FollowItem,
 } from '../../../state/models/user-follows-view'
 import {useStores} from '../../../state'
 import {Link} from '../util/Link'
+import {Text} from '../util/Text'
 import {ErrorMessage} from '../util/ErrorMessage'
 import {UserAvatar} from '../util/UserAvatar'
 import {s, colors} from '../../lib/styles'
@@ -96,7 +97,9 @@ const User = ({item}: {item: FollowItem}) => {
           />
         </View>
         <View style={styles.layoutContent}>
-          <Text style={[s.f15, s.bold]}>{item.displayName || item.handle}</Text>
+          <Text style={[s.f15, s.bold, s.black]}>
+            {item.displayName || item.handle}
+          </Text>
           <Text style={[s.f14, s.gray5]}>@{item.handle}</Text>
         </View>
       </View>

src/view/com/profile/ProfileHeader.tsx

@@ -1,6 +1,6 @@
 import React, {useMemo} from 'react'
 import {observer} from 'mobx-react-lite'
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {AtUri} from '../../../third-party/uri'
@@ -19,6 +19,7 @@ import {getGradient} from '../../lib/asset-gen'
 import {DropdownBtn, DropdownItem} from '../util/DropdownBtn'
 import * as Toast from '../util/Toast'
 import {LoadingPlaceholder} from '../util/LoadingPlaceholder'
+import {Text} from '../util/Text'
 import {RichText} from '../util/RichText'
 import {UserAvatar} from '../util/UserAvatar'
 import {UserBanner} from '../util/UserBanner'
@@ -408,6 +409,7 @@ const styles = StyleSheet.create({
     marginBottom: 8,
     fontSize: 16,
     lineHeight: 20.8, // 1.3 of 16px
+    color: colors.black,
   },
 
   relationshipsLine: {

src/view/com/util/DropdownBtn.tsx

@@ -3,7 +3,6 @@ import {
   Share,
   StyleProp,
   StyleSheet,
-  Text,
   TouchableOpacity,
   TouchableWithoutFeedback,
   View,
@@ -12,6 +11,7 @@ import {
 import {IconProp} from '@fortawesome/fontawesome-svg-core'
 import RootSiblings from 'react-native-root-siblings'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {Text} from './Text'
 import {colors} from '../../lib/styles'
 import {toShareUrl} from '../../../lib/strings'
 import {useStores} from '../../../state'

src/view/com/util/EmptyState.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native'
+import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
 import {IconProp} from '@fortawesome/fontawesome-svg-core'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {Text} from './Text'
 import {UserGroupIcon} from '../../lib/icons'
 import {colors} from '../../lib/styles'
 

src/view/com/util/ErrorMessage.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import {
   StyleSheet,
-  Text,
   TouchableOpacity,
   StyleProp,
   View,
@@ -9,6 +8,7 @@ import {
 } from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import LinearGradient from 'react-native-linear-gradient'
+import {Text} from './Text'
 import {colors, gradients} from '../../lib/styles'
 
 export function ErrorMessage({

src/view/com/util/ErrorScreen.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {Text} from './Text'
 import {colors} from '../../lib/styles'
 
 export function ErrorScreen({

src/view/com/util/Link.tsx

@@ -3,13 +3,13 @@ import {observer} from 'mobx-react-lite'
 import {
   Linking,
   StyleProp,
-  Text,
   TouchableWithoutFeedback,
   TouchableOpacity,
   TextStyle,
   View,
   ViewStyle,
 } from 'react-native'
+import {Text} from './Text'
 import {useStores, RootStoreModel} from '../../../state'
 import {convertBskyAppUrlIfNeeded} from '../../../lib/strings'
 

src/view/com/util/Picker.tsx

@@ -2,7 +2,6 @@ import React, {useRef} from 'react'
 import {
   StyleProp,
   StyleSheet,
-  Text,
   TextStyle,
   TouchableOpacity,
   TouchableWithoutFeedback,
@@ -14,6 +13,7 @@ import {
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
 import RootSiblings from 'react-native-root-siblings'
+import {Text} from './Text'
 import {colors} from '../../lib/styles'
 
 interface PickerItem {

src/view/com/util/PostCtrls.tsx

@@ -1,14 +1,8 @@
 import React from 'react'
-import {
+import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
-  Animated,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-  Vibration,
-} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback'
+import {Text} from './Text'
 import {UpIcon, UpIconSolid} from '../../lib/icons'
 import {s, colors} from '../../lib/styles'
 import {useAnimatedValue} from '../../lib/useAnimatedValue'

src/view/com/util/PostEmbeds.tsx

@@ -1,15 +1,9 @@
 import React from 'react'
-import {
+import {ImageStyle, StyleSheet, StyleProp, View, ViewStyle} from 'react-native'
-  ImageStyle,
-  StyleSheet,
-  StyleProp,
-  Text,
-  View,
-  ViewStyle,
-} from 'react-native'
 import * as AppBskyEmbedImages from '../../../third-party/api/src/client/types/app/bsky/embed/images'
 import * as AppBskyEmbedExternal from '../../../third-party/api/src/client/types/app/bsky/embed/external'
 import {Link} from '../util/Link'
+import {Text} from '../util/Text'
 import {colors} from '../../lib/styles'
 import {AutoSizedImage} from './images/AutoSizedImage'
 import {ImagesLightbox} from '../../../state/models/shell-ui'
@@ -152,16 +146,16 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     padding: 10,
   },
-  extImage: {
+  extImage: {},
-    // TODO
-  },
   extTitle: {
     fontSize: 16,
     fontWeight: 'bold',
+    color: colors.black,
   },
   extDescription: {
     marginTop: 4,
     fontSize: 15,
+    color: colors.black,
   },
   extUrl: {
     color: colors.gray4,

src/view/com/util/PostMeta.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import {StyleSheet, Text, View} from 'react-native'
+import {StyleSheet, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {Link} from '../util/Link'
+import {Text} from '../util/Text'
 import {PostDropdownBtn} from '../util/DropdownBtn'
 import {s} from '../../lib/styles'
 import {ago} from '../../../lib/strings'

src/view/com/util/RichText.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import {Text, TextStyle, StyleProp} from 'react-native'
+import {TextStyle, StyleProp} from 'react-native'
 import {TextLink} from './Link'
+import {Text} from './Text'
 import {s} from '../../lib/styles'
 import {toShortUrl} from '../../../lib/strings'
 

src/view/com/util/Selector.tsx

@@ -2,10 +2,10 @@ import React, {createRef, useState, useMemo} from 'react'
 import {
   Animated,
   StyleSheet,
-  Text,
   TouchableWithoutFeedback,
   View,
 } from 'react-native'
+import {Text} from './Text'
 import {colors} from '../../lib/styles'
 
 interface Layout {
@@ -122,6 +122,7 @@ const styles = StyleSheet.create({
   labelSelected: {
     fontWeight: '600',
     fontSize: 16,
+    color: colors.black,
   },
   underline: {
     position: 'absolute',

src/view/com/util/Text.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import {Text as RNText, TextProps} from 'react-native'
+import {s} from '../../lib/styles'
+
+export function Text({
+  children,
+  style,
+  ...props
+}: React.PropsWithChildren<TextProps>) {
+  return (
+    <RNText style={[s.black, style]} {...props}>
+      {children}
+    </RNText>
+  )
+}

src/view/com/util/UserAvatar.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback} from 'react'
-import {StyleSheet, View, TouchableOpacity, Alert, Image} from 'react-native'
+import {Alert, Image, StyleSheet, TouchableOpacity, View} from 'react-native'
 import Svg, {Circle, Text, Defs, LinearGradient, Stop} from 'react-native-svg'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {

src/view/com/util/UserInfoText.tsx

@@ -1,7 +1,8 @@
 import React, {useState, useEffect} from 'react'
 import * as GetProfile from '../../../third-party/api/src/client/types/app/bsky/actor/getProfile'
-import {StyleProp, Text, TextStyle} from 'react-native'
+import {StyleProp, TextStyle} from 'react-native'
 import {Link} from './Link'
+import {Text} from './Text'
 import {LoadingPlaceholder} from './LoadingPlaceholder'
 import {useStores} from '../../../state'
 

src/view/com/util/ViewHeader.tsx

@@ -3,12 +3,12 @@ import {observer} from 'mobx-react-lite'
 import {
   ActivityIndicator,
   StyleSheet,
-  Text,
   TouchableOpacity,
   View,
 } from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {UserAvatar} from './UserAvatar'
+import {Text} from './Text'
 import {s, colors} from '../../lib/styles'
 import {MagnifyingGlassIcon} from '../../lib/icons'
 import {useStores} from '../../../state'

src/view/com/util/forms/RadioButton.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {Text} from '../Text'
 import {colors} from '../../../lib/styles'
 
 export function RadioButton({

src/view/com/util/images/AutoSizedImage.tsx

@@ -5,11 +5,11 @@ import {
   LayoutChangeEvent,
   StyleProp,
   StyleSheet,
-  Text,
   TouchableWithoutFeedback,
   View,
   ViewStyle,
 } from 'react-native'
+import {Text} from '../Text'
 import {colors} from '../../../lib/styles'
 
 const MAX_HEIGHT = 300

src/view/screens/Contacts.tsx

@@ -1,8 +1,9 @@
 import React, {useEffect, useState, useRef} from 'react'
-import {StyleSheet, Text, TextInput, View} from 'react-native'
+import {StyleSheet, TextInput, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows'
 import {Selector} from '../com/util/Selector'
+import {Text} from '../com/util/Text'
 import {colors} from '../lib/styles'
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'

src/view/screens/Home.tsx

@@ -1,13 +1,13 @@
-import React, {useState, useEffect, useMemo} from 'react'
+import React, {useState, useEffect} from 'react'
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import useAppState from 'react-native-appstate-hook'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {Feed} from '../com/posts/Feed'
+import {Text} from '../com/util/Text'
 import {useStores} from '../../state'
-import {FeedModel} from '../../state/models/feed-view'
 import {ScreenParams} from '../routes'
 import {s, colors} from '../lib/styles'
 import {useOnMainScroll} from '../lib/useOnMainScroll'

src/view/screens/Login.tsx

@@ -1,7 +1,6 @@
 import React, {useState} from 'react'
 import {
   StyleSheet,
-  Text,
   TouchableOpacity,
   View,
   useWindowDimensions,
@@ -11,6 +10,7 @@ import {observer} from 'mobx-react-lite'
 import {Signin} from '../com/login/Signin'
 import {Logo} from '../com/login/Logo'
 import {CreateAccount} from '../com/login/CreateAccount'
+import {Text} from '../com/util/Text'
 import {s, colors} from '../lib/styles'
 
 enum ScreenState {

src/view/screens/NotFound.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import {Text, Button, View} from 'react-native'
+import {Button, View} from 'react-native'
 import {ViewHeader} from '../com/util/ViewHeader'
+import {Text} from '../com/util/Text'
 import {useStores} from '../../state'
 
 export const NotFound = () => {

src/view/screens/Profile.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useState, useMemo} from 'react'
-import {ActivityIndicator, StyleSheet, Text, View} from 'react-native'
+import {ActivityIndicator, StyleSheet, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {ViewSelector} from '../com/util/ViewSelector'
@@ -15,6 +15,7 @@ import {PostFeedLoadingPlaceholder} from '../com/util/LoadingPlaceholder'
 import {ErrorScreen} from '../com/util/ErrorScreen'
 import {ErrorMessage} from '../com/util/ErrorMessage'
 import {EmptyState} from '../com/util/EmptyState'
+import {Text} from '../com/util/Text'
 import {ViewHeader} from '../com/util/ViewHeader'
 import * as Toast from '../com/util/Toast'
 import {s, colors} from '../lib/styles'

src/view/screens/Search.tsx

@@ -3,7 +3,6 @@ import {
   Keyboard,
   ScrollView,
   StyleSheet,
-  Text,
   TextInput,
   TouchableOpacity,
   View,
@@ -11,6 +10,7 @@ import {
 import {ViewHeader} from '../com/util/ViewHeader'
 import {SuggestedFollows} from '../com/discover/SuggestedFollows'
 import {UserAvatar} from '../com/util/UserAvatar'
+import {Text} from '../com/util/Text'
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
 import {UserAutocompleteViewModel} from '../../state/models/user-autocomplete-view'

src/view/screens/Settings.tsx

@@ -1,11 +1,12 @@
 import React, {useEffect} from 'react'
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {useStores} from '../../state'
 import {ScreenParams} from '../routes'
 import {s, colors} from '../lib/styles'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {Link} from '../com/util/Link'
+import {Text} from '../com/util/Text'
 import {UserAvatar} from '../com/util/UserAvatar'
 
 export const Settings = observer(function Settings({

src/view/shell/mobile/Menu.tsx

@@ -2,7 +2,6 @@ import React, {useEffect} from 'react'
 import {
   StyleProp,
   StyleSheet,
-  Text,
   TouchableOpacity,
   View,
   ViewStyle,
@@ -18,6 +17,7 @@ import {
   MagnifyingGlassIcon,
 } from '../../lib/icons'
 import {UserAvatar} from '../../com/util/UserAvatar'
+import {Text} from '../../com/util/Text'
 import {CreateSceneModal} from '../../../state/models/shell-ui'
 
 export const Menu = ({

src/view/shell/mobile/TabsSelector.tsx

@@ -5,12 +5,12 @@ import {
   ScrollView,
   Share,
   StyleSheet,
-  Text,
   TouchableWithoutFeedback,
   View,
 } from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {Text} from '../../com/util/Text'
 import Swipeable from 'react-native-gesture-handler/Swipeable'
 import {useStores} from '../../../state'
 import {s, colors} from '../../lib/styles'

src/view/shell/mobile/index.tsx

@@ -7,7 +7,6 @@ import {
   GestureResponderEvent,
   SafeAreaView,
   StyleSheet,
-  Text,
   TouchableOpacity,
   TouchableWithoutFeedback,
   useColorScheme,
@@ -30,6 +29,7 @@ import {Onboard} from '../../screens/Onboard'
 import {HorzSwipe} from '../../com/util/gestures/HorzSwipe'
 import {Modal} from '../../com/modals/Modal'
 import {Lightbox} from '../../com/lightbox/Lightbox'
+import {Text} from '../../com/util/Text'
 import {TabsSelector} from './TabsSelector'
 import {Composer} from './Composer'
 import {s, colors} from '../../lib/styles'