Dimming images for dark mode

src/components/Account.tsx

@@ -45,6 +45,7 @@ const ComponentAccount: React.FC<PropsWithChildren & Props> = ({ account, props,
                 borderRadius: 8,
                 marginRight: StyleConstants.Spacing.S
               }}
+              dim
             />
             <View style={{ flex: 1 }}>
               <CustomText numberOfLines={1}>

src/components/GracefullyImage.tsx

@@ -38,6 +38,7 @@ export interface Props {
       height: number
     }>
   >
+  dim?: boolean
 }
 
 const GracefullyImage = ({
@@ -50,10 +51,11 @@ const GracefullyImage = ({
   onPress,
   style,
   imageStyle,
-  setImageDimensions
+  setImageDimensions,
+  dim
 }: Props) => {
   const { reduceMotionEnabled } = useAccessibility()
-  const { colors } = useTheme()
+  const { colors, theme } = useTheme()
   const [imageLoaded, setImageLoaded] = useState(false)
 
   const [currentUri, setCurrentUri] = useState<string | undefined>(uri.original || uri.remote)
@@ -111,6 +113,14 @@ const GracefullyImage = ({
         }}
       />
       {blurhashView()}
+      {dim && theme !== 'light' ? (
+        <View
+          style={[
+            styles.placeholder,
+            { backgroundColor: 'black', opacity: theme === 'dark_lighter' ? 0.18 : 0.36 }
+          ]}
+        />
+      ) : null}
     </Pressable>
   )
 }

src/components/Timeline/Conversation.tsx

@@ -88,6 +88,7 @@ const TimelineConversation: React.FC<Props> = ({ conversation, queryKey, highlig
                       : StyleConstants.Avatar.M
                 }}
                 style={{ flex: 1, flexBasis: '50%' }}
+                dim
               />
             ))}
           </View>

src/components/Timeline/Shared/Attachment/Audio.tsx

@@ -83,11 +83,9 @@ const AttachmentAudio: React.FC<Props> = ({ total, index, sensitiveShown, audio
           <>
             {audio.preview_url ? (
               <GracefullyImage
-                uri={{
-                  original: audio.preview_url,
-                  remote: audio.preview_remote_url
-                }}
+                uri={{ original: audio.preview_url, remote: audio.preview_remote_url }}
                 style={styles.background}
+                dim
               />
             ) : null}
             <Button

src/components/Timeline/Shared/Attachment/Image.tsx

@@ -39,6 +39,7 @@ const AttachmentImage = ({
           blurhash={image.blurhash}
           onPress={() => navigateToImagesViewer(image.id)}
           style={{ aspectRatio: aspectRatio({ total, index, ...image.meta?.original }) }}
+          dim
         />
       </View>
       <AttachmentAltText sensitiveShown={sensitiveShown} text={image.description} />

src/components/Timeline/Shared/Avatar.tsx

@@ -31,8 +31,7 @@ const TimelineAvatar: React.FC<Props> = ({ account }) => {
         })
       })}
       onPress={() =>
-        !disableOnPress &&
-        navigation.push('Tab-Shared-Account', { account: actualAccount })
+        !disableOnPress && navigation.push('Tab-Shared-Account', { account: actualAccount })
       }
       uri={{ original: actualAccount.avatar, static: actualAccount.avatar_static }}
       dimension={
@@ -51,6 +50,7 @@ const TimelineAvatar: React.FC<Props> = ({ account }) => {
         overflow: 'hidden',
         marginRight: StyleConstants.Spacing.S
       }}
+      dim
     />
   )
 }

src/components/Timeline/Shared/Card.tsx

@@ -86,6 +86,7 @@ const TimelineCard: React.FC = () => {
             blurhash={status.card.blurhash}
             style={{ flexBasis: StyleConstants.Font.LineHeight.M * 5 }}
             imageStyle={{ borderTopLeftRadius: 6, borderBottomLeftRadius: 6 }}
+            dim
           />
         ) : null}
         <View style={{ flex: 1, padding: StyleConstants.Spacing.S }}>

src/screens/Tabs/Shared/Account/Attachments.tsx

@@ -93,6 +93,7 @@ const AccountAttachments: React.FC = () => {
                 dimension={{ width: width, height: width }}
                 style={{ marginLeft: StyleConstants.Spacing.Global.PagePadding }}
                 onPress={() => navigation.push('Tab-Shared-Toot', { toot: item })}
+                dim
               />
             )
           }

src/screens/Tabs/Shared/Account/Header.tsx

@@ -28,6 +28,7 @@ const AccountHeader: React.FC = () => {
           )
         }
       }}
+      dim
     />
   )
 }

src/screens/Tabs/Shared/Account/Information/Avatar.tsx

@@ -42,6 +42,7 @@ const AccountInformationAvatar: React.FC = () => {
           }
         }
       }}
+      dim
     />
   )
 }

src/screens/Tabs/index.tsx

@@ -89,11 +89,6 @@ const ScreenTabs = () => {
         name='Tab-Me'
         component={TabMe}
         listeners={({ navigation }) => ({
-          tabPress: () => {
-            if (navigation.isFocused()) {
-              navigation.navigate('Tab-Me', { screen: 'Tab-Me-Switch' })
-            }
-          },
           tabLongPress: () => {
             haptics('Light')
             navigation.navigate('Tab-Me', { screen: 'Tab-Me-Root' })