Merge pull request #224 from tooot-app/main

Release v3.4.4

package.json

@@ -4,7 +4,7 @@
     "native": "220206",
     "major": 3,
     "minor": 4,
-    "patch": 3,
+    "patch": 4,
     "expo": "44.0.0"
   },
   "description": "tooot app for Mastodon",

src/Screens.tsx

@@ -26,7 +26,6 @@ import { addScreenshotListener } from 'expo-screen-capture'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Alert, Platform, StatusBar } from 'react-native'
-import { useQueryClient } from 'react-query'
 import { useDispatch, useSelector } from 'react-redux'
 import * as Sentry from 'sentry-expo'
 
@@ -40,7 +39,7 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
   const { t } = useTranslation('screens')
   const dispatch = useDispatch()
   const instanceActive = useSelector(getInstanceActive)
-  const { mode, theme } = useTheme()
+  const { colors, mode, theme } = useTheme()
   enum barStyle {
     light = 'dark-content',
     dark = 'light-content'
@@ -53,7 +52,6 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
     getInstances,
     (prev, next) => prev.length === next.length
   )
-  const queryClient = useQueryClient()
   pushUseConnect({ t, instances })
   pushUseReceive({ instances })
   pushUseRespond({ instances })
@@ -77,8 +75,9 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
           message: t('localCorrupt.message'),
           description: localCorrupt.length ? localCorrupt : undefined,
           type: 'error',
-          mode
+          theme
         })
+        // @ts-ignore
         navigationRef.navigate('Screen-Tabs', {
           screen: 'Tab-Me'
         })
@@ -164,11 +163,11 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
     <>
       <StatusBar
         barStyle={barStyle[mode]}
-        backgroundColor={theme.backgroundDefault}
+        backgroundColor={colors.backgroundDefault}
       />
       <NavigationContainer
         ref={navigationRef}
-        theme={themes[mode]}
+        theme={themes[theme]}
         onReady={navigationContainerOnReady}
         onStateChange={navigationContainerOnStateChange}
       >

src/components/Account.tsx

@@ -20,10 +20,9 @@ const ComponentAccount: React.FC<Props> = ({
   onPress: customOnPress,
   origin
 }) => {
-  const { theme } = useTheme()
+  const { colors } = useTheme()
-  const navigation = useNavigation<
+  const navigation =
-    StackNavigationProp<TabLocalStackParamList>
+    useNavigation<StackNavigationProp<TabLocalStackParamList>>()
-  >()
 
   const onPress = useCallback(() => {
     analytics('search_account_press', { page: origin })
@@ -37,7 +36,7 @@ const ComponentAccount: React.FC<Props> = ({
       onPress={customOnPress || onPress}
     >
       <GracefullyImage
-        uri={{ original: account.avatar_static }}
+        uri={{ original: account.avatar, static: account.avatar_static }}
         style={styles.itemAccountAvatar}
       />
       <View>
@@ -51,7 +50,7 @@ const ComponentAccount: React.FC<Props> = ({
         </Text>
         <Text
           numberOfLines={1}
-          style={[styles.itemAccountAcct, { color: theme.secondary }]}
+          style={[styles.itemAccountAcct, { color: colors.secondary }]}
         >
           @{account.acct}
         </Text>

src/components/Button.tsx

@@ -54,7 +54,7 @@ const Button: React.FC<Props> = ({
   overlay = false,
   onPress
 }) => {
-  const { mode, theme } = useTheme()
+  const { colors, theme } = useTheme()
 
   const mounted = useRef(false)
   useEffect(() => {
@@ -68,35 +68,35 @@ const Button: React.FC<Props> = ({
   const loadingSpinkit = useMemo(
     () => (
       <View style={{ position: 'absolute' }}>
-        <Flow size={StyleConstants.Font.Size[size]} color={theme.secondary} />
+        <Flow size={StyleConstants.Font.Size[size]} color={colors.secondary} />
       </View>
     ),
-    [mode]
+    [theme]
   )
 
   const mainColor = useMemo(() => {
     if (selected) {
-      return theme.blue
+      return colors.blue
     } else if (overlay) {
-      return theme.primaryOverlay
+      return colors.primaryOverlay
     } else if (disabled || loading) {
-      return theme.disabled
+      return colors.disabled
     } else {
       if (destructive) {
-        return theme.red
+        return colors.red
       } else {
-        return theme.primaryDefault
+        return colors.primaryDefault
       }
     }
-  }, [mode, disabled, loading, selected])
+  }, [theme, disabled, loading, selected])
 
   const colorBackground = useMemo(() => {
     if (overlay) {
-      return theme.backgroundOverlayInvert
+      return colors.backgroundOverlayInvert
     } else {
-      return theme.backgroundDefault
+      return colors.backgroundDefault
     }
-  }, [mode])
+  }, [theme])
 
   const children = useMemo(() => {
     switch (type) {
@@ -130,7 +130,7 @@ const Button: React.FC<Props> = ({
           </>
         )
     }
-  }, [mode, content, loading, disabled])
+  }, [theme, content, loading, disabled])
 
   const [layoutHeight, setLayoutHeight] = useState<number | undefined>()
 

src/components/Emojis/Button.tsx

@@ -7,7 +7,7 @@ import EmojisContext from './helpers/EmojisContext'
 
 const EmojisButton = React.memo(
   () => {
-    const { theme } = useTheme()
+    const { colors } = useTheme()
     const { emojisState, emojisDispatch } = useContext(EmojisContext)
 
     return emojisState.enabled ? (
@@ -30,8 +30,8 @@ const EmojisButton = React.memo(
             size={StyleConstants.Font.Size.L}
             color={
               emojisState.emojis && emojisState.emojis.length
-                ? theme.primaryDefault
+                ? colors.primaryDefault
-                : theme.disabled
+                : colors.disabled
             }
           />
         }

src/components/Emojis/List.tsx

@@ -23,11 +23,11 @@ const EmojisList = React.memo(
     const { t } = useTranslation()
 
     const { emojisState, emojisDispatch } = useContext(EmojisContext)
-    const { theme } = useTheme()
+    const { colors } = useTheme()
 
     const listHeader = useCallback(
       ({ section: { title } }) => (
-        <Text style={[styles.group, { color: theme.secondary }]}>{title}</Text>
+        <Text style={[styles.group, { color: colors.secondary }]}>{title}</Text>
       ),
       []
     )

src/components/GracefullyImage.tsx

@@ -1,3 +1,4 @@
+import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useMemo, useState } from 'react'
 import {
@@ -23,7 +24,7 @@ export interface Props {
   accessibilityHint?: AccessibilityProps['accessibilityHint']
 
   hidden?: boolean
-  uri: { preview?: string; original?: string; remote?: string }
+  uri: { preview?: string; original?: string; remote?: string; static?: string }
   blurhash?: string
   dimension?: { width: number; height: number }
   onPress?: () => void
@@ -51,7 +52,8 @@ const GracefullyImage = React.memo(
     imageStyle,
     setImageDimensions
   }: Props) => {
-    const { theme } = useTheme()
+    const { reduceMotionEnabled } = useAccessibility()
+    const { colors } = useTheme()
     const [originalFailed, setOriginalFailed] = useState(false)
     const [imageLoaded, setImageLoaded] = useState(false)
 
@@ -59,7 +61,9 @@ const GracefullyImage = React.memo(
       if (originalFailed) {
         return { uri: uri.remote || undefined }
       } else {
-        return { uri: uri.original }
+        return {
+          uri: reduceMotionEnabled && uri.static ? uri.static : uri.original
+        }
       }
     }, [originalFailed])
 
@@ -85,7 +89,7 @@ const GracefullyImage = React.memo(
             source={{ uri: uri.preview }}
             style={[
               styles.placeholder,
-              { backgroundColor: theme.shimmerDefault }
+              { backgroundColor: colors.shimmerDefault }
             ]}
           />
         ) : null,
@@ -118,7 +122,7 @@ const GracefullyImage = React.memo(
             <View
               style={[
                 styles.placeholder,
-                { backgroundColor: theme.shimmerDefault }
+                { backgroundColor: colors.shimmerDefault }
               ]}
             />
           )
@@ -135,7 +139,7 @@ const GracefullyImage = React.memo(
           : { accessibilityRole: 'image' })}
         accessibilityLabel={accessibilityLabel}
         accessibilityHint={accessibilityHint}
-        style={[style, dimension, { backgroundColor: theme.shimmerDefault }]}
+        style={[style, dimension, { backgroundColor: colors.shimmerDefault }]}
         {...(onPress
           ? hidden
             ? { disabled: true }

src/components/Hashtag.tsx

@@ -17,10 +17,9 @@ const ComponentHashtag: React.FC<Props> = ({
   onPress: customOnPress,
   origin
 }) => {
-  const { theme } = useTheme()
+  const { colors } = useTheme()
-  const navigation = useNavigation<
+  const navigation =
-    StackNavigationProp<Nav.TabLocalStackParamList>
+    useNavigation<StackNavigationProp<Nav.TabLocalStackParamList>>()
-  >()
 
   const onPress = useCallback(() => {
     analytics('search_account_press', { page: origin })
@@ -33,7 +32,7 @@ const ComponentHashtag: React.FC<Props> = ({
       style={styles.itemDefault}
       onPress={customOnPress || onPress}
     >
-      <Text style={[styles.itemHashtag, { color: theme.primaryDefault }]}>
+      <Text style={[styles.itemHashtag, { color: colors.primaryDefault }]}>
         #{hashtag.name}
       </Text>
     </Pressable>

src/components/Header/Center.tsx

@@ -11,13 +11,13 @@ export interface Props {
 // Used for Android mostly
 const HeaderCenter = React.memo(
   ({ content, inverted = false }: Props) => {
-    const { theme } = useTheme()
+    const { colors } = useTheme()
 
     return (
       <Text
         style={[
           styles.text,
-          { color: inverted ? theme.primaryOverlay : theme.primaryDefault }
+          { color: inverted ? colors.primaryOverlay : colors.primaryDefault }
         ]}
         children={content}
       />

src/components/Header/Left.tsx

@@ -20,14 +20,14 @@ const HeaderLeft: React.FC<Props> = ({
   background = false,
   onPress
 }) => {
-  const { theme } = useTheme()
+  const { colors, theme } = useTheme()
 
   const children = useMemo(() => {
     switch (type) {
       case 'icon':
         return (
           <Icon
-            color={theme.primaryDefault}
+            color={colors.primaryDefault}
             name={content || 'ChevronLeft'}
             size={StyleConstants.Spacing.M * 1.25}
           />
@@ -35,7 +35,7 @@ const HeaderLeft: React.FC<Props> = ({
       case 'text':
         return (
           <Text
-            style={[styles.text, { color: theme.primaryDefault }]}
+            style={[styles.text, { color: colors.primaryDefault }]}
             children={content}
           />
         )
@@ -50,7 +50,7 @@ const HeaderLeft: React.FC<Props> = ({
         styles.base,
         {
           backgroundColor: background
-            ? theme.backgroundOverlayDefault
+            ? colors.backgroundOverlayDefault
             : undefined,
           minHeight: 44,
           minWidth: 44,

src/components/Header/Right.tsx

@@ -41,14 +41,14 @@ const HeaderRight: React.FC<Props> = ({
   disabled,
   onPress
 }) => {
-  const { theme } = useTheme()
+  const { colors, theme } = useTheme()
 
   const loadingSpinkit = useMemo(
     () => (
       <View style={{ position: 'absolute' }}>
         <Flow
           size={StyleConstants.Font.Size.M * 1.25}
-          color={theme.secondary}
+          color={colors.secondary}
         />
       </View>
     ),
@@ -64,7 +64,7 @@ const HeaderRight: React.FC<Props> = ({
               name={content}
               style={{ opacity: loading ? 0 : 1 }}
               size={StyleConstants.Spacing.M * 1.25}
-              color={disabled ? theme.secondary : theme.primaryDefault}
+              color={disabled ? colors.secondary : colors.primaryDefault}
             />
             {loading && loadingSpinkit}
           </>
@@ -76,7 +76,7 @@ const HeaderRight: React.FC<Props> = ({
               style={[
                 styles.text,
                 {
-                  color: disabled ? theme.secondary : theme.primaryDefault,
+                  color: disabled ? colors.secondary : colors.primaryDefault,
                   opacity: loading ? 0 : 1
                 }
               ]}
@@ -101,7 +101,7 @@ const HeaderRight: React.FC<Props> = ({
         styles.base,
         {
           backgroundColor: background
-            ? theme.backgroundOverlayDefault
+            ? colors.backgroundOverlayDefault
             : undefined,
           minHeight: 44,
           minWidth: 44,

src/components/Input.tsx

@@ -57,7 +57,7 @@ const Input: React.FC<Props> = ({
   setValue,
   options
 }) => {
-  const { mode, theme } = useTheme()
+  const { colors, mode } = useTheme()
 
   const animateTitle = useAnimatedStyle(() => {
     if (value) {
@@ -66,7 +66,7 @@ const Input: React.FC<Props> = ({
         paddingHorizontal: withTiming(StyleConstants.Spacing.XS),
         left: withTiming(StyleConstants.Spacing.S),
         top: withTiming(-(StyleConstants.Font.Size.S / 2) - 2),
-        backgroundColor: withTiming(theme.backgroundDefault)
+        backgroundColor: withTiming(colors.backgroundDefault)
       }
     } else {
       return {
@@ -74,7 +74,7 @@ const Input: React.FC<Props> = ({
         paddingHorizontal: withTiming(0),
         left: withTiming(StyleConstants.Spacing.S),
         top: withTiming(StyleConstants.Spacing.S + 1),
-        backgroundColor: withTiming(theme.backgroundDefaultTransparent)
+        backgroundColor: withTiming(colors.backgroundDefaultTransparent)
       }
     }
   }, [mode, value])
@@ -109,7 +109,7 @@ const Input: React.FC<Props> = ({
         style={[
           styles.base,
           {
-            borderColor: theme.border,
+            borderColor: colors.border,
             flexDirection: multiline ? 'column' : 'row',
             alignItems: 'stretch'
           }
@@ -127,7 +127,7 @@ const Input: React.FC<Props> = ({
               style={[
                 styles.textInput,
                 {
-                  color: theme.primaryDefault,
+                  color: colors.primaryDefault,
                   minHeight:
                     Platform.OS === 'ios' && multiline
                       ? StyleConstants.Font.LineHeight.M * 5
@@ -149,14 +149,14 @@ const Input: React.FC<Props> = ({
         </EmojisContext.Consumer>
         {title ? (
           <Animated.Text
-            style={[styles.title, animateTitle, { color: theme.secondary }]}
+            style={[styles.title, animateTitle, { color: colors.secondary }]}
           >
             {title}
           </Animated.Text>
         ) : null}
         <View style={{ flexDirection: 'row', alignSelf: 'flex-end' }}>
           {options?.maxLength && value?.length ? (
-            <Text style={[styles.maxLength, { color: theme.secondary }]}>
+            <Text style={[styles.maxLength, { color: colors.secondary }]}>
               {value?.length} / {options.maxLength}
             </Text>
           ) : null}

src/components/Instance.tsx

@@ -39,7 +39,7 @@ const ComponentInstance: React.FC<Props> = ({
   goBack = false
 }) => {
   const { t } = useTranslation('componentInstance')
-  const { mode, theme } = useTheme()
+  const { colors, mode } = useTheme()
   const { screenReaderEnabled } = useAccessibility()
 
   const instances = useSelector(getInstances, () => true)
@@ -149,10 +149,10 @@ const ComponentInstance: React.FC<Props> = ({
             style={[
               styles.prefix,
               {
-                color: theme.primaryDefault,
+                color: colors.primaryDefault,
                 borderBottomColor: instanceQuery.isError
-                  ? theme.red
+                  ? colors.red
-                  : theme.border
+                  : colors.border
               }
             ]}
             editable={false}
@@ -162,10 +162,10 @@ const ComponentInstance: React.FC<Props> = ({
             style={[
               styles.textInput,
               {
-                color: theme.primaryDefault,
+                color: colors.primaryDefault,
                 borderBottomColor: instanceQuery.isError
-                  ? theme.red
+                  ? colors.red
-                  : theme.border
+                  : colors.border
               }
             ]}
             onChangeText={onChangeText}
@@ -175,7 +175,7 @@ const ComponentInstance: React.FC<Props> = ({
             textContentType='URL'
             onSubmitEditing={onSubmitEditing}
             placeholder={' ' + t('server.textInput.placeholder')}
-            placeholderTextColor={theme.secondary}
+            placeholderTextColor={colors.secondary}
             returnKeyType='go'
             keyboardAppearance={mode}
             {...(scrollViewRef && {
@@ -234,11 +234,11 @@ const ComponentInstance: React.FC<Props> = ({
             <Icon
               name='Lock'
               size={StyleConstants.Font.Size.S}
-              color={theme.secondary}
+              color={colors.secondary}
               style={styles.disclaimerIcon}
             />
             <Text
-              style={[styles.disclaimerText, { color: theme.secondary }]}
+              style={[styles.disclaimerText, { color: colors.secondary }]}
               accessibilityRole='link'
               onPress={() => {
                 if (screenReaderEnabled) {
@@ -252,7 +252,7 @@ const ComponentInstance: React.FC<Props> = ({
               {t('server.disclaimer.base')}
               <Text
                 accessible
-                style={{ color: theme.blue }}
+                style={{ color: colors.blue }}
                 onPress={() => {
                   analytics('view_privacy')
                   WebBrowser.openBrowserAsync(

src/components/Instance/Info.tsx

@@ -13,15 +13,15 @@ export interface Props {
 
 const InstanceInfo = React.memo(
   ({ style, header, content, potentialWidth }: Props) => {
-    const { theme } = useTheme()
+    const { colors } = useTheme()
 
     return (
       <View style={[styles.base, style]} accessible>
-        <Text style={[styles.header, { color: theme.primaryDefault }]}>
+        <Text style={[styles.header, { color: colors.primaryDefault }]}>
           {header}
         </Text>
         {content ? (
-          <Text style={[styles.content, { color: theme.primaryDefault }]}>
+          <Text style={[styles.content, { color: colors.primaryDefault }]}>
             {content}
           </Text>
         ) : (
@@ -32,7 +32,7 @@ const InstanceInfo = React.memo(
                 : undefined
             }
             height={StyleConstants.Font.LineHeight.M}
-            color={theme.shimmerDefault}
+            color={colors.shimmerDefault}
             noMargin
             style={{ borderRadius: 0 }}
           />

src/components/Menu/Header.tsx

@@ -8,11 +8,11 @@ export interface Props {
 }
 
 const MenuHeader: React.FC<Props> = ({ heading }) => {
-  const { theme } = useTheme()
+  const { colors } = useTheme()
 
   return (
     <View style={styles.base}>
-      <Text style={[styles.text, { color: theme.secondary }]}>{heading}</Text>
+      <Text style={[styles.text, { color: colors.secondary }]}>{heading}</Text>
     </View>
   )
 }

src/components/Menu/Row.tsx

@@ -43,7 +43,7 @@ const MenuRow: React.FC<Props> = ({
   loading = false,
   onPress
 }) => {
-  const { theme } = useTheme()
+  const { colors, theme } = useTheme()
   const { screenReaderEnabled } = useAccessibility()
 
   const loadingSpinkit = useMemo(
@@ -51,7 +51,7 @@ const MenuRow: React.FC<Props> = ({
       <View style={{ position: 'absolute' }}>
         <Flow
           size={StyleConstants.Font.Size.M * 1.25}
-          color={theme.secondary}
+          color={colors.secondary}
         />
       </View>
     ),
@@ -83,7 +83,7 @@ const MenuRow: React.FC<Props> = ({
                 <Icon
                   name={iconFront}
                   size={StyleConstants.Font.Size.L}
-                  color={theme[iconFrontColor]}
+                  color={colors[iconFrontColor]}
                   style={styles.iconFront}
                 />
               )}
@@ -92,7 +92,7 @@ const MenuRow: React.FC<Props> = ({
                   style={{
                     width: 8,
                     height: 8,
-                    backgroundColor: theme.red,
+                    backgroundColor: colors.red,
                     borderRadius: 8,
                     marginRight: StyleConstants.Spacing.S
                   }}
@@ -100,7 +100,7 @@ const MenuRow: React.FC<Props> = ({
               ) : null}
               <View style={styles.main}>
                 <Text
-                  style={[styles.title, { color: theme.primaryDefault }]}
+                  style={[styles.title, { color: colors.primaryDefault }]}
                   numberOfLines={1}
                 >
                   {title}
@@ -116,7 +116,7 @@ const MenuRow: React.FC<Props> = ({
                       style={[
                         styles.content,
                         {
-                          color: theme.secondary,
+                          color: colors.secondary,
                           opacity: !iconBack && loading ? 0 : 1
                         }
                       ]}
@@ -133,7 +133,7 @@ const MenuRow: React.FC<Props> = ({
                     value={switchValue}
                     onValueChange={switchOnValueChange}
                     disabled={switchDisabled}
-                    trackColor={{ true: theme.blue, false: theme.disabled }}
+                    trackColor={{ true: colors.blue, false: colors.disabled }}
                     style={{ opacity: loading ? 0 : 1 }}
                   />
                 ) : null}
@@ -141,7 +141,7 @@ const MenuRow: React.FC<Props> = ({
                   <Icon
                     name={iconBack}
                     size={StyleConstants.Font.Size.L}
-                    color={theme[iconBackColor]}
+                    color={colors[iconBackColor]}
                     style={[styles.iconBack, { opacity: loading ? 0 : 1 }]}
                   />
                 ) : null}
@@ -150,7 +150,7 @@ const MenuRow: React.FC<Props> = ({
             ) : null}
           </View>
           {description ? (
-            <Text style={[styles.description, { color: theme.secondary }]}>
+            <Text style={[styles.description, { color: colors.secondary }]}>
               {description}
             </Text>
           ) : null}

src/components/Message.tsx

@@ -1,7 +1,7 @@
 import Icon from '@components/Icon'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import { getTheme } from '@utils/styles/themes'
+import { getColors, Theme } from '@utils/styles/themes'
 import React, { RefObject } from 'react'
 import { AccessibilityInfo } from 'react-native'
 import FlashMessage, {
@@ -17,7 +17,7 @@ const displayMessage = ({
   message,
   description,
   onPress,
-  mode,
+  theme,
   type
 }:
   | {
@@ -27,7 +27,7 @@ const displayMessage = ({
       message: string
       description?: string
       onPress?: () => void
-      mode?: undefined
+      theme?: undefined
       type?: undefined
     }
   | {
@@ -37,7 +37,7 @@ const displayMessage = ({
       message: string
       description?: string
       onPress?: () => void
-      mode: 'light' | 'dark'
+      theme: Theme
       type: 'success' | 'error' | 'warning'
     }) => {
   AccessibilityInfo.announceForAccessibility(message + '.' + description)
@@ -64,14 +64,14 @@ const displayMessage = ({
       message,
       description,
       onPress,
-      ...(mode &&
+      ...(theme &&
         type && {
           renderFlashMessageIcon: () => {
             return (
               <Icon
                 name={iconMapping[type]}
                 size={StyleConstants.Font.LineHeight.M}
-                color={getTheme(mode)[colorMapping[type]]}
+                color={getColors(theme)[colorMapping[type]]}
                 style={{ marginRight: StyleConstants.Spacing.S }}
               />
             )
@@ -85,14 +85,14 @@ const displayMessage = ({
       message,
       description,
       onPress,
-      ...(mode &&
+      ...(theme &&
         type && {
           renderFlashMessageIcon: () => {
             return (
               <Icon
                 name={iconMapping[type]}
                 size={StyleConstants.Font.LineHeight.M}
-                color={getTheme(mode)[colorMapping[type]]}
+                color={getColors(theme)[colorMapping[type]]}
                 style={{ marginRight: StyleConstants.Spacing.S }}
               />
             )
@@ -111,7 +111,7 @@ const removeMessage = () => {
 }
 
 const Message = React.forwardRef<FlashMessage>((_, ref) => {
-  const { mode, theme } = useTheme()
+  const { colors, theme } = useTheme()
 
   return (
     <FlashMessage
@@ -120,19 +120,19 @@ const Message = React.forwardRef<FlashMessage>((_, ref) => {
       position='top'
       floating
       style={{
-        backgroundColor: theme.backgroundDefault,
+        backgroundColor: colors.backgroundDefault,
-        shadowColor: theme.primaryDefault,
+        shadowColor: colors.primaryDefault,
         shadowOffset: { width: 0, height: 0 },
-        shadowOpacity: mode === 'light' ? 0.16 : 0.24,
+        shadowOpacity: theme === 'light' ? 0.16 : 0.24,
         shadowRadius: 4
       }}
       titleStyle={{
-        color: theme.primaryDefault,
+        color: colors.primaryDefault,
         ...StyleConstants.FontStyle.M,
         fontWeight: StyleConstants.Font.Weight.Bold
       }}
       textStyle={{
-        color: theme.primaryDefault,
+        color: colors.primaryDefault,
         ...StyleConstants.FontStyle.S
       }}
       // @ts-ignore

src/components/Parse/Emojis.tsx

@@ -39,11 +39,11 @@ const ParseEmojis = React.memo(
       adaptiveSize ? adaptiveFontsize : 0
     )
 
-    const { mode, theme } = useTheme()
+    const { colors, theme } = useTheme()
     const styles = useMemo(() => {
       return StyleSheet.create({
         text: {
-          color: theme.primaryDefault,
+          color: colors.primaryDefault,
           fontSize: adaptedFontsize,
           lineHeight: adaptedLineheight,
           ...(fontBold && { fontWeight: StyleConstants.Font.Weight.Bold })
@@ -54,7 +54,7 @@ const ParseEmojis = React.memo(
           transform: [{ translateY: -2 }]
         }
       })
-    }, [mode, adaptiveFontsize])
+    }, [theme, adaptiveFontsize])
 
     return (
       <Text style={styles.text}>

src/components/Parse/HTML.tsx

@@ -18,7 +18,7 @@ import { useSelector } from 'react-redux'
 // Prevent going to the same hashtag multiple times
 const renderNode = ({
   routeParams,
-  theme,
+  colors,
   node,
   index,
   adaptedFontsize,
@@ -30,7 +30,7 @@ const renderNode = ({
   disableDetails
 }: {
   routeParams?: any
-  theme: any
+  colors: any
   node: any
   index: number
   adaptedFontsize: number
@@ -56,7 +56,7 @@ const renderNode = ({
               accessible
               key={index}
               style={{
-                color: theme.blue,
+                color: colors.blue,
                 fontSize: adaptedFontsize,
                 lineHeight: adaptedLineheight
               }}
@@ -84,7 +84,8 @@ const renderNode = ({
             <Text
               key={index}
               style={{
-                color: accountIndex !== -1 ? theme.blue : theme.primaryDefault,
+                color:
+                  accountIndex !== -1 ? colors.blue : colors.primaryDefault,
                 fontSize: adaptedFontsize,
                 lineHeight: adaptedLineheight
               }}
@@ -114,7 +115,7 @@ const renderNode = ({
           <Text
             key={index}
             style={{
-              color: theme.blue,
+              color: colors.blue,
               alignItems: 'center',
               fontSize: adaptedFontsize,
               lineHeight: adaptedLineheight
@@ -132,7 +133,7 @@ const renderNode = ({
               (showFullLink ? href : domain[1])}
             {!shouldBeTag ? (
               <Icon
-                color={theme.blue}
+                color={colors.blue}
                 name='ExternalLink'
                 size={adaptedFontsize}
                 style={{
@@ -192,11 +193,10 @@ const ParseHTML = React.memo(
       adaptiveSize ? adaptiveFontsize : 0
     )
 
-    const navigation = useNavigation<
+    const navigation =
-      StackNavigationProp<Nav.TabLocalStackParamList>
+      useNavigation<StackNavigationProp<Nav.TabLocalStackParamList>>()
-    >()
     const route = useRoute()
-    const { mode, theme } = useTheme()
+    const { colors, theme } = useTheme()
     const { t, i18n } = useTranslation('componentParse')
     if (!expandHint) {
       expandHint = t('HTML.defaultHint')
@@ -206,7 +206,7 @@ const ParseHTML = React.memo(
       (node, index) =>
         renderNode({
           routeParams: route.params,
-          theme,
+          colors,
           node,
           index,
           adaptedFontsize,
@@ -271,14 +271,14 @@ const ParseHTML = React.memo(
                   justifyContent: 'center',
                   marginTop: expanded ? 0 : -adaptedLineheight,
                   minHeight: 44,
-                  backgroundColor: theme.backgroundDefault
+                  backgroundColor: colors.backgroundDefault
                 }}
               >
                 <Text
                   style={{
                     textAlign: 'center',
                     ...StyleConstants.FontStyle.S,
-                    color: theme.primaryDefault
+                    color: colors.primaryDefault
                   }}
                   children={t(`HTML.expanded.${expanded.toString()}`, {
                     hint: expandHint
@@ -289,7 +289,7 @@ const ParseHTML = React.memo(
           </View>
         )
       },
-      [mode, i18n.language]
+      [theme, i18n.language]
     )
 
     return (

src/components/Relationship/Incoming.tsx

@@ -19,7 +19,7 @@ export interface Props {
 }
 
 const RelationshipIncoming: React.FC<Props> = ({ id }) => {
-  const { mode } = useTheme()
+  const { theme } = useTheme()
   const { t } = useTranslation()
 
   const queryKeyRelationship: QueryKeyRelationship = ['Relationship', { id }]
@@ -40,7 +40,7 @@ const RelationshipIncoming: React.FC<Props> = ({ id }) => {
       haptics('Error')
       displayMessage({
         type: 'error',
-        mode,
+        theme,
         message: t('common:message.error.message', {
           function: t(`relationship:${type}.function`)
         }),

src/components/Relationship/Outgoing.tsx

@@ -19,7 +19,7 @@ export interface Props {
 
 const RelationshipOutgoing = React.memo(
   ({ id }: Props) => {
-    const { mode } = useTheme()
+    const { theme } = useTheme()
     const { t } = useTranslation('componentRelationship')
 
     const query = useRelationshipQuery({ id })
@@ -40,7 +40,7 @@ const RelationshipOutgoing = React.memo(
       },
       onError: (err: any, { payload: { action } }) => {
         displayMessage({
-          mode,
+          theme,
           type: 'error',
           message: t('common:message.error.message', {
             function: t(`${action}.function`)

src/components/Separator.tsx

@@ -10,13 +10,13 @@ export interface Props {
 
 const ComponentSeparator = React.memo(
   ({ extraMarginLeft = 0, extraMarginRight = 0 }: Props) => {
-    const { theme } = useTheme()
+    const { colors } = useTheme()
 
     return (
       <View
         style={{
-          backgroundColor: theme.backgroundDefault,
+          backgroundColor: colors.backgroundDefault,
-          borderTopColor: theme.border,
+          borderTopColor: colors.border,
           borderTopWidth: StyleSheet.hairlineWidth,
           marginLeft:
             StyleConstants.Spacing.Global.PagePadding + extraMarginLeft,

src/components/Timeline.tsx

@@ -48,7 +48,7 @@ const Timeline: React.FC<Props> = ({
   lookback,
   customProps
 }) => {
-  const { theme } = useTheme()
+  const { colors } = useTheme()
 
   const {
     data,
@@ -118,8 +118,8 @@ const Timeline: React.FC<Props> = ({
       refreshControl: (
         <RefreshControl
           enabled
-          colors={[theme.primaryDefault]}
+          colors={[colors.primaryDefault]}
-          progressBackgroundColor={theme.backgroundDefault}
+          progressBackgroundColor={colors.backgroundDefault}
           refreshing={isFetching || isLoading}
           onRefresh={() => refetch()}
         />

src/components/Timeline/Conversation.tsx

@@ -32,7 +32,7 @@ const Avatars: React.FC<{ accounts: Mastodon.Account[] }> = ({ accounts }) => {
       {accounts.slice(0, 4).map(account => (
         <GracefullyImage
           key={account.id}
-          uri={{ original: account.avatar_static }}
+          uri={{ original: account.avatar, static: account.avatar_static }}
           dimension={{
             width: StyleConstants.Avatar.M,
             height:
@@ -62,7 +62,7 @@ const TimelineConversation: React.FC<Props> = ({
     getInstanceAccount,
     (prev, next) => prev?.id === next?.id
   )
-  const { theme } = useTheme()
+  const { colors } = useTheme()
 
   const queryClient = useQueryClient()
   const fireMutation = useCallback(() => {
@@ -77,9 +77,8 @@ const TimelineConversation: React.FC<Props> = ({
     }
   })
 
-  const navigation = useNavigation<
+  const navigation =
-    StackNavigationProp<Nav.TabLocalStackParamList>
+    useNavigation<StackNavigationProp<Nav.TabLocalStackParamList>>()
-  >()
   const onPress = useCallback(() => {
     analytics('timeline_conversation_press')
     if (conversation.last_status) {
@@ -95,10 +94,10 @@ const TimelineConversation: React.FC<Props> = ({
     <Pressable
       style={[
         styles.base,
-        { backgroundColor: theme.backgroundDefault },
+        { backgroundColor: colors.backgroundDefault },
         conversation.unread && {
           borderLeftWidth: StyleConstants.Spacing.XS,
-          borderLeftColor: theme.blue,
+          borderLeftColor: colors.blue,
           paddingLeft:
             StyleConstants.Spacing.Global.PagePadding -
             StyleConstants.Spacing.XS

src/components/Timeline/Default.tsx

@@ -42,11 +42,10 @@ const TimelineDefault: React.FC<Props> = ({
   disableDetails = false,
   disableOnPress = false
 }) => {
-  const { theme } = useTheme()
+  const { colors } = useTheme()
   const instanceAccount = useSelector(getInstanceAccount, () => true)
-  const navigation = useNavigation<
+  const navigation =
-    StackNavigationProp<Nav.TabLocalStackParamList>
+    useNavigation<StackNavigationProp<Nav.TabLocalStackParamList>>()
-  >()
 
   const actualStatus = item.reblog ? item.reblog : item
 
@@ -78,7 +77,7 @@ const TimelineDefault: React.FC<Props> = ({
       style={[
         styles.statusView,
         {
-          backgroundColor: theme.backgroundDefault,
+          backgroundColor: colors.backgroundDefault,
           paddingBottom:
             disableDetails && disableOnPress
               ? StyleConstants.Spacing.Global.PagePadding

src/components/Timeline/Empty.tsx

@@ -20,14 +20,17 @@ const TimelineEmpty = React.memo(
       options: { notifyOnChangeProps: ['status'] }
     })
 
-    const { mode, theme } = useTheme()
+    const { colors, theme } = useTheme()
     const { t, i18n } = useTranslation('componentTimeline')
 
     const children = useMemo(() => {
       switch (status) {
         case 'loading':
           return (
-            <Circle size={StyleConstants.Font.Size.L} color={theme.secondary} />
+            <Circle
+              size={StyleConstants.Font.Size.L}
+              color={colors.secondary}
+            />
           )
         case 'error':
           return (
@@ -35,9 +38,9 @@ const TimelineEmpty = React.memo(
               <Icon
                 name='Frown'
                 size={StyleConstants.Font.Size.L}
-                color={theme.primaryDefault}
+                color={colors.primaryDefault}
               />
-              <Text style={[styles.error, { color: theme.primaryDefault }]}>
+              <Text style={[styles.error, { color: colors.primaryDefault }]}>
                 {t('empty.error.message')}
               </Text>
               <Button
@@ -56,18 +59,18 @@ const TimelineEmpty = React.memo(
               <Icon
                 name='Smartphone'
                 size={StyleConstants.Font.Size.L}
-                color={theme.primaryDefault}
+                color={colors.primaryDefault}
               />
-              <Text style={[styles.error, { color: theme.primaryDefault }]}>
+              <Text style={[styles.error, { color: colors.primaryDefault }]}>
                 {t('empty.success.message')}
               </Text>
             </>
           )
       }
-    }, [mode, i18n.language, status])
+    }, [theme, i18n.language, status])
     return (
       <View
-        style={[styles.base, { backgroundColor: theme.backgroundDefault }]}
+        style={[styles.base, { backgroundColor: colors.backgroundDefault }]}
         children={children}
       />
     )

src/components/Timeline/Footer.tsx

@@ -24,21 +24,21 @@ const TimelineFooter = React.memo(
       }
     })
 
-    const { theme } = useTheme()
+    const { colors } = useTheme()
 
     return (
       <View style={styles.base}>
         {!disableInfinity && hasNextPage ? (
-          <Circle size={StyleConstants.Font.Size.L} color={theme.secondary} />
+          <Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
         ) : (
-          <Text style={[styles.text, { color: theme.secondary }]}>
+          <Text style={[styles.text, { color: colors.secondary }]}>
             <Trans
               i18nKey='componentTimeline:end.message'
               components={[
                 <Icon
                   name='Coffee'
                   size={StyleConstants.Font.Size.S}
-                  color={theme.secondary}
+                  color={colors.secondary}
                 />
               ]}
             />

src/components/Timeline/Lookback.tsx

@@ -7,12 +7,14 @@ import { StyleSheet, Text, View } from 'react-native'
 const TimelineLookback = React.memo(
   () => {
     const { t } = useTranslation('componentTimeline')
-    const { theme } = useTheme()
+    const { colors } = useTheme()
 
     return (
-      <View style={[styles.base, { backgroundColor: theme.backgroundDefault }]}>
+      <View
+        style={[styles.base, { backgroundColor: colors.backgroundDefault }]}
+      >
         <Text
-          style={[StyleConstants.FontStyle.S, { color: theme.primaryDefault }]}
+          style={[StyleConstants.FontStyle.S, { color: colors.primaryDefault }]}
         >
           {t('lookback.message')}
         </Text>

src/components/Timeline/Notifications.tsx

@@ -38,14 +38,13 @@ const TimelineNotifications: React.FC<Props> = ({
     return <TimelineFiltered />
   }
 
-  const { theme } = useTheme()
+  const { colors } = useTheme()
   const instanceAccount = useSelector(
     getInstanceAccount,
     (prev, next) => prev?.id === next?.id
   )
-  const navigation = useNavigation<
+  const navigation =
-    StackNavigationProp<Nav.TabLocalStackParamList>
+    useNavigation<StackNavigationProp<Nav.TabLocalStackParamList>>()
-  >()
 
   const actualAccount = notification.status
     ? notification.status.account
@@ -65,7 +64,7 @@ const TimelineNotifications: React.FC<Props> = ({
       style={[
         styles.notificationView,
         {
-          backgroundColor: theme.backgroundDefault,
+          backgroundColor: colors.backgroundDefault,
           paddingBottom: notification.status
             ? 0
             : StyleConstants.Spacing.Global.PagePadding
@@ -148,8 +147,10 @@ const TimelineNotifications: React.FC<Props> = ({
           status={notification.status}
           highlighted={highlighted}
           accts={uniqBy(
-            ([notification.status.account] as Mastodon.Account[] &
+            (
-              Mastodon.Mention[])
+              [notification.status.account] as Mastodon.Account[] &
+                Mastodon.Mention[]
+            )
               .concat(notification.status.mentions)
               .filter(d => d?.id !== instanceAccount?.id),
             d => d?.id

src/components/Timeline/Refresh.tsx

@@ -101,7 +101,7 @@ const TimelineRefresh: React.FC<Props> = ({
   })
 
   const { t } = useTranslation('componentTimeline')
-  const { theme } = useTheme()
+  const { colors } = useTheme()
 
   const queryClient = useQueryClient()
   const clearFirstPage = () => {
@@ -254,13 +254,16 @@ const TimelineRefresh: React.FC<Props> = ({
       <View style={styles.base}>
         {isFetching ? (
           <View style={styles.container2}>
-            <Circle size={StyleConstants.Font.Size.L} color={theme.secondary} />
+            <Circle
+              size={StyleConstants.Font.Size.L}
+              color={colors.secondary}
+            />
           </View>
         ) : (
           <>
             <View style={styles.container1}>
               <Text
-                style={[styles.explanation, { color: theme.primaryDefault }]}
+                style={[styles.explanation, { color: colors.primaryDefault }]}
                 onLayout={onLayout}
                 children={t('refresh.fetchPreviousPage')}
               />
@@ -277,14 +280,14 @@ const TimelineRefresh: React.FC<Props> = ({
                   <Icon
                     name='ArrowLeft'
                     size={StyleConstants.Font.Size.M}
-                    color={theme.primaryDefault}
+                    color={colors.primaryDefault}
                   />
                 }
               />
             </View>
             <View style={styles.container2}>
               <Text
-                style={[styles.explanation, { color: theme.primaryDefault }]}
+                style={[styles.explanation, { color: colors.primaryDefault }]}
                 onLayout={onLayout}
                 children={t('refresh.refetch')}
               />

src/components/Timeline/Shared/Actioned.tsx

@@ -18,12 +18,11 @@ export interface Props {
 const TimelineActioned = React.memo(
   ({ account, action, notification = false }: Props) => {
     const { t } = useTranslation('componentTimeline')
-    const { theme } = useTheme()
+    const { colors } = useTheme()
-    const navigation = useNavigation<
+    const navigation =
-      StackNavigationProp<Nav.TabLocalStackParamList>
+      useNavigation<StackNavigationProp<Nav.TabLocalStackParamList>>()
-    >()
     const name = account.display_name || account.username
-    const iconColor = theme.primaryDefault
+    const iconColor = colors.primaryDefault
 
     const content = (content: string) => (
       <ParseEmojis content={content} emojis={account.emojis} size='S' />

src/components/Timeline/Shared/Actions.tsx

@@ -33,8 +33,8 @@ const TimelineActions: React.FC<Props> = ({
 }) => {
   const navigation = useNavigation()
   const { t } = useTranslation('componentTimeline')
-  const { mode, theme } = useTheme()
+  const { colors, theme } = useTheme()
-  const iconColor = theme.secondary
+  const iconColor = colors.secondary
 
   const queryClient = useQueryClient()
   const mutation = useTimelineMutation({
@@ -83,7 +83,7 @@ const TimelineActions: React.FC<Props> = ({
     onError: (err: any, params, oldData) => {
       const correctParam = params as MutationVarsTimelineUpdateStatusProperty
       displayMessage({
-        mode,
+        theme,
         type: 'error',
         message: t('common:message.error.message', {
           function: t(
@@ -185,7 +185,7 @@ const TimelineActions: React.FC<Props> = ({
         {status.replies_count > 0 ? (
           <Text
             style={{
-              color: theme.secondary,
+              color: colors.secondary,
               fontSize: StyleConstants.Font.Size.M,
               marginLeft: StyleConstants.Spacing.XS
             }}
@@ -198,14 +198,14 @@ const TimelineActions: React.FC<Props> = ({
     [status.replies_count]
   )
   const childrenReblog = useMemo(() => {
-    const color = (state: boolean) => (state ? theme.green : theme.secondary)
+    const color = (state: boolean) => (state ? colors.green : colors.secondary)
     return (
       <>
         <Icon
           name='Repeat'
           color={
             status.visibility === 'private' || status.visibility === 'direct'
-              ? theme.disabled
+              ? colors.disabled
               : color(status.reblogged)
           }
           size={StyleConstants.Font.Size.L}
@@ -225,7 +225,7 @@ const TimelineActions: React.FC<Props> = ({
     )
   }, [status.reblogged, status.reblogs_count])
   const childrenFavourite = useMemo(() => {
-    const color = (state: boolean) => (state ? theme.red : theme.secondary)
+    const color = (state: boolean) => (state ? colors.red : colors.secondary)
     return (
       <>
         <Icon
@@ -249,7 +249,7 @@ const TimelineActions: React.FC<Props> = ({
     )
   }, [status.favourited, status.favourites_count])
   const childrenBookmark = useMemo(() => {
-    const color = (state: boolean) => (state ? theme.yellow : theme.secondary)
+    const color = (state: boolean) => (state ? colors.yellow : colors.secondary)
     return (
       <Icon
         name='Bookmark'

src/components/Timeline/Shared/ActionsUsers.tsx

@@ -19,10 +19,9 @@ const TimelineActionsUsers = React.memo(
     }
 
     const { t } = useTranslation('componentTimeline')
-    const { theme } = useTheme()
+    const { colors } = useTheme()
-    const navigation = useNavigation<
+    const navigation =
-      StackNavigationProp<Nav.TabLocalStackParamList>
+      useNavigation<StackNavigationProp<Nav.TabLocalStackParamList>>()
-    >()
 
     return (
       <View style={styles.base}>
@@ -38,7 +37,7 @@ const TimelineActionsUsers = React.memo(
               'shared.actionsUsers.reblogged_by.accessibilityHint'
             )}
             accessibilityRole='button'
-            style={[styles.text, { color: theme.blue }]}
+            style={[styles.text, { color: colors.blue }]}
             onPress={() => {
               analytics('timeline_shared_actionsusers_press_boosted', {
                 count: status.reblogs_count
@@ -68,7 +67,7 @@ const TimelineActionsUsers = React.memo(
               'shared.actionsUsers.favourited_by.accessibilityHint'
             )}
             accessibilityRole='button'
-            style={[styles.text, { color: theme.blue }]}
+            style={[styles.text, { color: colors.blue }]}
             onPress={() => {
               analytics('timeline_shared_actionsusers_press_boosted', {
                 count: status.favourites_count

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

@@ -23,7 +23,7 @@ const AttachmentAudio: React.FC<Props> = ({
   sensitiveShown,
   audio
 }) => {
-  const { theme } = useTheme()
+  const { colors } = useTheme()
 
   const [audioPlayer, setAudioPlayer] = useState<Audio.Sound>()
   const [audioPlaying, setAudioPlaying] = useState(false)
@@ -56,7 +56,7 @@ const AttachmentAudio: React.FC<Props> = ({
       style={[
         styles.base,
         {
-          backgroundColor: theme.disabled,
+          backgroundColor: colors.disabled,
           aspectRatio: attachmentAspectRatio({ total, index })
         }
       ]}
@@ -102,7 +102,7 @@ const AttachmentAudio: React.FC<Props> = ({
             alignSelf: 'flex-end',
             width: '100%',
             height: StyleConstants.Spacing.M + StyleConstants.Spacing.S * 2,
-            backgroundColor: theme.backgroundOverlayInvert,
+            backgroundColor: colors.backgroundOverlayInvert,
             paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
             borderRadius: 100,
             opacity: sensitiveShown ? 0.35 : undefined
@@ -112,8 +112,8 @@ const AttachmentAudio: React.FC<Props> = ({
             minimumValue={0}
             maximumValue={audio.meta.original.duration * 1000}
             value={audioPosition}
-            minimumTrackTintColor={theme.secondary}
+            minimumTrackTintColor={colors.secondary}
-            maximumTrackTintColor={theme.disabled}
+            maximumTrackTintColor={colors.disabled}
             // onSlidingStart={() => {
             //   audioPlayer?.pauseAsync()
             //   setAudioPlaying(false)
@@ -123,7 +123,7 @@ const AttachmentAudio: React.FC<Props> = ({
             // }}
             enabled={false} // Bug in above sliding actions
             thumbSize={StyleConstants.Spacing.M}
-            thumbTintColor={theme.primaryOverlay}
+            thumbTintColor={colors.primaryOverlay}
           />
         </View>
       ) : null}

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

@@ -28,7 +28,17 @@ const AttachmentImage = React.memo(
           uri={{ original: image.preview_url, remote: image.remote_url }}
           blurhash={image.blurhash}
           onPress={onPress}
-          style={[{ aspectRatio: attachmentAspectRatio({ total, index }) }]}
+          style={[
+            {
+              aspectRatio:
+                total > 1 ||
+                !image.meta?.original?.width ||
+                !image.meta?.original?.height ||
+                image.meta.original.width / image.meta.original.height > 2
+                  ? attachmentAspectRatio({ total, index })
+                  : image.meta.original.width / image.meta.original.height
+            }
+          ]}
         />
       </View>
     )

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

@@ -23,7 +23,7 @@ const AttachmentUnsupported: React.FC<Props> = ({
   attachment
 }) => {
   const { t } = useTranslation('componentTimeline')
-  const { theme } = useTheme()
+  const { colors } = useTheme()
 
   return (
     <View
@@ -49,8 +49,8 @@ const AttachmentUnsupported: React.FC<Props> = ({
               styles.text,
               {
                 color: attachment.blurhash
-                  ? theme.backgroundDefault
+                  ? colors.backgroundDefault
-                  : theme.primaryDefault
+                  : colors.primaryDefault
               }
             ]}
           >

src/components/Timeline/Shared/Avatar.tsx

@@ -16,9 +16,8 @@ export interface Props {
 const TimelineAvatar = React.memo(
   ({ queryKey, account, highlighted }: Props) => {
     const { t } = useTranslation('componentTimeline')
-    const navigation = useNavigation<
+    const navigation =
-      StackNavigationProp<Nav.TabLocalStackParamList>
+      useNavigation<StackNavigationProp<Nav.TabLocalStackParamList>>()
-    >()
     // Need to fix go back root
     const onPress = useCallback(() => {
       analytics('timeline_shared_avatar_press', {
@@ -38,7 +37,7 @@ const TimelineAvatar = React.memo(
           })
         })}
         onPress={onPress}
-        uri={{ original: account.avatar_static }}
+        uri={{ original: account.avatar, static: account.avatar_static }}
         dimension={{
           width: StyleConstants.Avatar.M,
           height: StyleConstants.Avatar.M

src/components/Timeline/Shared/Card.tsx

@@ -13,14 +13,14 @@ export interface Props {
 
 const TimelineCard = React.memo(
   ({ card }: Props) => {
-    const { theme } = useTheme()
+    const { colors } = useTheme()
     const navigation = useNavigation()
 
     return (
       <Pressable
         accessible
         accessibilityRole='link'
-        style={[styles.card, { borderColor: theme.border }]}
+        style={[styles.card, { borderColor: colors.border }]}
         onPress={async () => {
           analytics('timeline_shared_card_press')
           await openLink(card.url, navigation)
@@ -38,7 +38,7 @@ const TimelineCard = React.memo(
         <View style={styles.right}>
           <Text
             numberOfLines={2}
-            style={[styles.rightTitle, { color: theme.primaryDefault }]}
+            style={[styles.rightTitle, { color: colors.primaryDefault }]}
             testID='title'
           >
             {card.title}
@@ -46,7 +46,10 @@ const TimelineCard = React.memo(
           {card.description ? (
             <Text
               numberOfLines={1}
-              style={[styles.rightDescription, { color: theme.primaryDefault }]}
+              style={[
+                styles.rightDescription,
+                { color: colors.primaryDefault }
+              ]}
               testID='description'
             >
               {card.description}
@@ -54,7 +57,7 @@ const TimelineCard = React.memo(
           ) : null}
           <Text
             numberOfLines={1}
-            style={[styles.rightLink, { color: theme.secondary }]}
+            style={[styles.rightLink, { color: colors.secondary }]}
           >
             {card.url}
           </Text>

src/components/Timeline/Shared/Filtered.tsx

@@ -10,15 +10,15 @@ import { Text, View } from 'react-native'
 
 const TimelineFiltered = React.memo(
   () => {
-    const { theme } = useTheme()
+    const { colors } = useTheme()
     const { t } = useTranslation('componentTimeline')
 
     return (
-      <View style={{ backgroundColor: theme.backgroundDefault }}>
+      <View style={{ backgroundColor: colors.backgroundDefault }}>
         <Text
           style={{
             ...StyleConstants.FontStyle.S,
-            color: theme.secondary,
+            color: colors.secondary,
             textAlign: 'center',
             paddingVertical: StyleConstants.Spacing.S,
             paddingLeft: StyleConstants.Avatar.M + StyleConstants.Spacing.S

src/components/Timeline/Shared/FullConversation.tsx

@@ -13,7 +13,7 @@ export interface Props {
 const TimelineFullConversation = React.memo(
   ({ queryKey, status }: Props) => {
     const { t } = useTranslation('componentTimeline')
-    const { theme } = useTheme()
+    const { colors } = useTheme()
 
     return queryKey &&
       queryKey[1].page !== 'Toot' &&
@@ -25,7 +25,7 @@ const TimelineFullConversation = React.memo(
       <Text
         style={{
           ...StyleConstants.FontStyle.S,
-          color: theme.blue,
+          color: colors.blue,
           marginTop: StyleConstants.Spacing.S
         }}
       >

src/components/Timeline/Shared/HeaderConversation.tsx

@@ -18,12 +18,12 @@ import HeaderSharedMuted from './HeaderShared/Muted'
 const Names = React.memo(
   ({ accounts }: { accounts: Mastodon.Account[] }) => {
     const { t } = useTranslation('componentTimeline')
-    const { theme } = useTheme()
+    const { colors } = useTheme()
 
     return (
       <Text
         numberOfLines={1}
-        style={[styles.namesLeading, { color: theme.secondary }]}
+        style={[styles.namesLeading, { color: colors.secondary }]}
       >
         <Text>{t('shared.header.conversation.withAccounts')}</Text>
         {accounts.map((account, index) => (
@@ -49,7 +49,7 @@ export interface Props {
 
 const HeaderConversation = React.memo(
   ({ queryKey, conversation }: Props) => {
-    const { mode } = useTheme()
+    const { colors, theme } = useTheme()
     const { t } = useTranslation('componentTimeline')
 
     const queryClient = useQueryClient()
@@ -57,7 +57,7 @@ const HeaderConversation = React.memo(
       onMutate: true,
       onError: (err: any, _, oldData) => {
         displayMessage({
-          mode,
+          theme,
           type: 'error',
           message: t('common:message.error.message', {
             function: t(`shared.header.conversation.delete.function`)
@@ -74,8 +74,6 @@ const HeaderConversation = React.memo(
       }
     })
 
-    const { theme } = useTheme()
-
     const actionOnPress = useCallback(() => {
       analytics('timeline_conversation_delete_press')
       mutation.mutate({
@@ -90,7 +88,7 @@ const HeaderConversation = React.memo(
       () => (
         <Icon
           name='Trash'
-          color={theme.secondary}
+          color={colors.secondary}
           size={StyleConstants.Font.Size.L}
         />
       ),

src/components/Timeline/Shared/HeaderDefault.tsx

@@ -22,7 +22,7 @@ const TimelineHeaderDefault = React.memo(
   ({ queryKey, rootQueryKey, status }: Props) => {
     const { t } = useTranslation('componentTimeline')
     const navigation = useNavigation()
-    const { theme } = useTheme()
+    const { colors } = useTheme()
 
     return (
       <View style={styles.base}>
@@ -52,7 +52,7 @@ const TimelineHeaderDefault = React.memo(
             children={
               <Icon
                 name='MoreHorizontal'
-                color={theme.secondary}
+                color={colors.secondary}
                 size={StyleConstants.Font.Size.L}
               />
             }

src/components/Timeline/Shared/HeaderNotification.tsx

@@ -23,7 +23,7 @@ export interface Props {
 const TimelineHeaderNotification = React.memo(
   ({ queryKey, notification }: Props) => {
     const navigation = useNavigation()
-    const { theme } = useTheme()
+    const { colors } = useTheme()
 
     const actions = useMemo(() => {
       switch (notification.type) {
@@ -52,7 +52,7 @@ const TimelineHeaderNotification = React.memo(
                 children={
                   <Icon
                     name='MoreHorizontal'
-                    color={theme.secondary}
+                    color={colors.secondary}
                     size={StyleConstants.Font.Size.L}
                   />
                 }

src/components/Timeline/Shared/HeaderShared/Account.tsx

@@ -13,7 +13,7 @@ export interface Props {
 const HeaderSharedAccount = React.memo(
   ({ account, withoutName = false }: Props) => {
     const { t } = useTranslation('componentTimeline')
-    const { theme } = useTheme()
+    const { colors } = useTheme()
 
     return (
       <View style={styles.base}>
@@ -36,7 +36,7 @@ const HeaderSharedAccount = React.memo(
           accessibilityHint={t(
             'shared.header.shared.account.account.accessibilityHint'
           )}
-          style={[styles.acct, { color: theme.secondary }]}
+          style={[styles.acct, { color: colors.secondary }]}
           numberOfLines={1}
         >
           @{account.acct}

src/components/Timeline/Shared/HeaderShared/Application.tsx

@@ -12,7 +12,7 @@ export interface Props {
 
 const HeaderSharedApplication = React.memo(
   ({ application }: Props) => {
-    const { theme } = useTheme()
+    const { colors } = useTheme()
     const { t } = useTranslation('componentTimeline')
 
     return application && application.name !== 'Web' ? (
@@ -24,7 +24,7 @@ const HeaderSharedApplication = React.memo(
           })
           application.website && (await openLink(application.website))
         }}
-        style={[styles.application, { color: theme.secondary }]}
+        style={[styles.application, { color: colors.secondary }]}
         numberOfLines={1}
       >
         {t('shared.header.shared.application', {

src/components/Timeline/Shared/HeaderShared/Created.tsx

@@ -10,10 +10,10 @@ export interface Props {
 
 const HeaderSharedCreated = React.memo(
   ({ created_at }: Props) => {
-    const { theme } = useTheme()
+    const { colors } = useTheme()
 
     return (
-      <Text style={[styles.created_at, { color: theme.secondary }]}>
+      <Text style={[styles.created_at, { color: colors.secondary }]}>
         <RelativeTime date={created_at} />
       </Text>
     )

src/components/Timeline/Shared/HeaderShared/Muted.tsx

@@ -12,14 +12,14 @@ export interface Props {
 const HeaderSharedMuted = React.memo(
   ({ muted }: Props) => {
     const { t } = useTranslation('componentTimeline')
-    const { theme } = useTheme()
+    const { colors } = useTheme()
 
     return muted ? (
       <Icon
         accessibilityLabel={t('shared.header.shared.muted.accessibilityLabel')}
         name='VolumeX'
         size={StyleConstants.Font.Size.S}
-        color={theme.secondary}
+        color={colors.secondary}
         style={styles.visibility}
       />
     ) : null

src/components/Timeline/Shared/HeaderShared/Visibility.tsx

@@ -12,7 +12,7 @@ export interface Props {
 const HeaderSharedVisibility = React.memo(
   ({ visibility }: Props) => {
     const { t } = useTranslation('componentTimeline')
-    const { theme } = useTheme()
+    const { colors } = useTheme()
 
     switch (visibility) {
       case 'private':
@@ -23,7 +23,7 @@ const HeaderSharedVisibility = React.memo(
             )}
             name='Lock'
             size={StyleConstants.Font.Size.S}
-            color={theme.secondary}
+            color={colors.secondary}
             style={styles.visibility}
           />
         )
@@ -35,7 +35,7 @@ const HeaderSharedVisibility = React.memo(
             )}
             name='Mail'
             size={StyleConstants.Font.Size.S}
-            color={theme.secondary}
+            color={colors.secondary}
             style={styles.visibility}
           />
         )

src/components/Timeline/Shared/Poll.tsx

@@ -36,7 +36,7 @@ const TimelinePoll: React.FC<Props> = ({
   reblog,
   sameAccount
 }) => {
-  const { mode, theme } = useTheme()
+  const { colors, theme } = useTheme()
   const { t, i18n } = useTranslation('componentTimeline')
 
   const [allOptions, setAllOptions] = useState(
@@ -53,7 +53,7 @@ const TimelinePoll: React.FC<Props> = ({
       haptics('Success')
       switch (theParams.payload.property) {
         case 'poll':
-          theParams.payload.data = (body as unknown) as Mastodon.Poll
+          theParams.payload.data = body as unknown as Mastodon.Poll
           updateStatusProperty(theParams)
           break
       }
@@ -61,7 +61,7 @@ const TimelinePoll: React.FC<Props> = ({
     onError: (err: any, params) => {
       const theParams = params as MutationVarsTimelineUpdateStatusProperty
       displayMessage({
-        mode,
+        theme,
         type: 'error',
         message: t('common:message.error.message', {
           // @ts-ignore
@@ -136,7 +136,7 @@ const TimelinePoll: React.FC<Props> = ({
       }
     }
   }, [
-    mode,
+    theme,
     i18n.language,
     poll.expired,
     poll.voted,
@@ -147,14 +147,14 @@ const TimelinePoll: React.FC<Props> = ({
   const pollExpiration = useMemo(() => {
     if (poll.expired) {
       return (
-        <Text style={[styles.expiration, { color: theme.secondary }]}>
+        <Text style={[styles.expiration, { color: colors.secondary }]}>
           {t('shared.poll.meta.expiration.expired')}
         </Text>
       )
     } else {
       if (poll.expires_at) {
         return (
-          <Text style={[styles.expiration, { color: theme.secondary }]}>
+          <Text style={[styles.expiration, { color: colors.secondary }]}>
             <Trans
               i18nKey='componentTimeline:shared.poll.meta.expiration.until'
               components={[<RelativeTime date={poll.expires_at} />]}
@@ -163,7 +163,7 @@ const TimelinePoll: React.FC<Props> = ({
         )
       }
     }
-  }, [mode, i18n.language, poll.expired, poll.expires_at])
+  }, [theme, i18n.language, poll.expired, poll.expires_at])
 
   const isSelected = useCallback(
     (index: number): string =>
@@ -174,8 +174,10 @@ const TimelinePoll: React.FC<Props> = ({
   )
 
   const pollBodyDisallow = useMemo(() => {
-    const maxValue = maxBy(poll.options, option => option.votes_count)
+    const maxValue = maxBy(
-      ?.votes_count
+      poll.options,
+      option => option.votes_count
+    )?.votes_count
     return poll.options.map((option, index) => (
       <View key={index} style={styles.optionContainer}>
         <View style={styles.optionContent}>
@@ -188,14 +190,14 @@ const TimelinePoll: React.FC<Props> = ({
             }
             size={StyleConstants.Font.Size.M}
             color={
-              poll.own_votes?.includes(index) ? theme.blue : theme.disabled
+              poll.own_votes?.includes(index) ? colors.blue : colors.disabled
             }
           />
           <Text style={styles.optionText}>
             <ParseEmojis content={option.title} emojis={poll.emojis} />
           </Text>
           <Text
-            style={[styles.optionPercentage, { color: theme.primaryDefault }]}
+            style={[styles.optionPercentage, { color: colors.primaryDefault }]}
           >
             {poll.votes_count
               ? Math.round(
@@ -217,13 +219,13 @@ const TimelinePoll: React.FC<Props> = ({
                   100
               )}%`,
               backgroundColor:
-                option.votes_count === maxValue ? theme.blue : theme.disabled
+                option.votes_count === maxValue ? colors.blue : colors.disabled
             }
           ]}
         />
       </View>
     ))
-  }, [mode, poll.options])
+  }, [theme, poll.options])
   const pollBodyAllow = useMemo(() => {
     return poll.options.map((option, index) => (
       <Pressable
@@ -256,7 +258,7 @@ const TimelinePoll: React.FC<Props> = ({
             style={styles.optionSelection}
             name={isSelected(index)}
             size={StyleConstants.Font.Size.M}
-            color={theme.primaryDefault}
+            color={colors.primaryDefault}
           />
           <Text style={styles.optionText}>
             <ParseEmojis content={option.title} emojis={poll.emojis} />
@@ -264,19 +266,19 @@ const TimelinePoll: React.FC<Props> = ({
         </View>
       </Pressable>
     ))
-  }, [mode, allOptions])
+  }, [theme, allOptions])
 
   const pollVoteCounts = useMemo(() => {
     if (poll.voters_count !== null) {
       return (
-        <Text style={[styles.votes, { color: theme.secondary }]}>
+        <Text style={[styles.votes, { color: colors.secondary }]}>
           {t('shared.poll.meta.count.voters', { count: poll.voters_count })}
           {' • '}
         </Text>
       )
     } else if (poll.votes_count !== null) {
       return (
-        <Text style={[styles.votes, { color: theme.secondary }]}>
+        <Text style={[styles.votes, { color: colors.secondary }]}>
           {t('shared.poll.meta.count.votes', { count: poll.votes_count })}
           {' • '}
         </Text>

src/components/Timeline/Shared/Translate.tsx

@@ -26,7 +26,7 @@ const TimelineTranslate = React.memo(
     }
 
     const { t } = useTranslation('componentTimeline')
-    const { theme } = useTheme()
+    const { colors } = useTheme()
 
     const tootLanguage = status.language.slice(0, 2)
 
@@ -82,10 +82,10 @@ const TimelineTranslate = React.memo(
               ...StyleConstants.FontStyle.M,
               color:
                 isLoading || isSuccess
-                  ? theme.secondary
+                  ? colors.secondary
                   : isError
-                  ? theme.red
+                  ? colors.red
-                  : theme.blue
+                  : colors.blue
             }}
           >
             {isError
@@ -109,7 +109,7 @@ const TimelineTranslate = React.memo(
           {isLoading ? (
             <Circle
               size={StyleConstants.Font.Size.M}
-              color={theme.disabled}
+              color={colors.disabled}
               style={{ marginLeft: StyleConstants.Spacing.S }}
             />
           ) : null}

src/i18n/en/screens/tabs.json

@@ -232,6 +232,14 @@
           "cancel": "$t(common:buttons.cancel)"
         }
       },
+      "darkTheme": {
+        "heading": "Dark theme",
+        "options": {
+          "lighter": "Lighter",
+          "darker": "Darker",
+          "cancel": "$t(common:buttons.cancel)"
+        }
+      },
       "browser": {
         "heading": "Opening Link",
         "options": {

src/i18n/vi/screens/actions.json

@@ -5,7 +5,7 @@
       "cancel": "$t(common:buttons.cancel)"
     },
     "notificationsFilter": {
-      "heading": "Chỉ hiện thông báo",
+      "heading": "Những kiểu thông báo cho phép",
       "content": {
         "follow": "$t(screenTabs:me.push.follow.heading)",
         "favourite": "$t(screenTabs:me.push.favourite.heading)",

src/i18n/vi/screens/compose.json

@@ -13,10 +13,10 @@
     },
     "right": {
       "button": {
-        "default": "Tút",
+        "default": "Đăng",
         "conversation": "Tin nhắn",
         "reply": "Trả lời",
-        "edit": "Tút"
+        "edit": "Sửa"
       },
       "alert": {
         "default": {

src/i18n/vi/screens/tabs.json

@@ -150,11 +150,11 @@
         "settings": "Bật trong cài đặt"
       },
       "global": {
-        "heading": "Bật khi {{acct}}",
+        "heading": "Bật cho {{acct}}",
         "description": "Thông báo được truyền qua máy chủ tooot"
       },
       "decode": {
-        "heading": "Chi tiết thông báo",
+        "heading": "Hiện chi tiết thông báo",
         "description": "Theo mặc định, thông báo truyền qua máy chủ tooot sẽ được mã hóa, nhưng bạn cũng có thể chọn không mã hóa. Máy chủ của chúng tôi luôn công khai mã nguồn và không lưu lại bất cứ gì."
       },
       "default": {
@@ -240,6 +240,9 @@
           "cancel": "$t(common:buttons.cancel)"
         }
       },
+      "feedback": {
+        "heading": "Yêu cầu tính năng"
+      },
       "support": {
         "heading": "Ủng hộ tooot"
       },
@@ -310,7 +313,7 @@
     },
     "users": {
       "accounts": {
-        "following": "{{count}} Theo dõi",
+        "following": "{{count}} theo dõi",
         "followers": "{{count}} người theo dõi"
       },
       "statuses": {

src/screens/Actions.tsx

@@ -68,7 +68,7 @@ const ScreenActions = React.memo(
         break
     }
 
-    const { theme } = useTheme()
+    const { colors } = useTheme()
     const insets = useSafeAreaInsets()
 
     const DEFAULT_VALUE = 350
@@ -189,7 +189,7 @@ const ScreenActions = React.memo(
             <Animated.View
               style={[
                 styles.overlay,
-                { backgroundColor: theme.backgroundOverlayInvert }
+                { backgroundColor: colors.backgroundOverlayInvert }
               ]}
             >
               <PanGestureHandler onGestureEvent={onGestureEvent}>
@@ -198,7 +198,7 @@ const ScreenActions = React.memo(
                     styles.container,
                     styleTop,
                     {
-                      backgroundColor: theme.backgroundDefault,
+                      backgroundColor: colors.backgroundDefault,
                       paddingBottom: insets.bottom || StyleConstants.Spacing.L
                     }
                   ]}
@@ -206,7 +206,7 @@ const ScreenActions = React.memo(
                   <View
                     style={[
                       styles.handle,
-                      { backgroundColor: theme.primaryOverlay }
+                      { backgroundColor: colors.primaryOverlay }
                     ]}
                   />
                   {actions}

src/screens/Actions/Account.tsx

@@ -24,7 +24,7 @@ const ActionsAccount: React.FC<Props> = ({
   account,
   dismiss
 }) => {
-  const { mode } = useTheme()
+  const { theme } = useTheme()
   const { t } = useTranslation('componentTimeline')
 
   const queryClient = useQueryClient()
@@ -32,7 +32,7 @@ const ActionsAccount: React.FC<Props> = ({
     onSuccess: (_, params) => {
       const theParams = params as MutationVarsTimelineUpdateAccountProperty
       displayMessage({
-        mode,
+        theme,
         type: 'success',
         message: t('common:message.success.message', {
           function: t(
@@ -47,7 +47,7 @@ const ActionsAccount: React.FC<Props> = ({
     onError: (err: any, params) => {
       const theParams = params as MutationVarsTimelineUpdateAccountProperty
       displayMessage({
-        mode,
+        theme,
         type: 'error',
         message: t('common:message.error.message', {
           function: t(

src/screens/Actions/Domain.tsx

@@ -26,13 +26,13 @@ const ActionsDomain: React.FC<Props> = ({
   domain,
   dismiss
 }) => {
-  const { mode } = useTheme()
+  const { theme } = useTheme()
   const { t } = useTranslation('componentTimeline')
   const queryClient = useQueryClient()
   const mutation = useTimelineMutation({
     onSettled: () => {
       displayMessage({
-        mode,
+        theme,
         type: 'success',
         message: t('common:message.success.message', {
           function: t(`shared.header.actions.domain.block.function`)

src/screens/Actions/Status.tsx

@@ -30,7 +30,7 @@ const ActionsStatus: React.FC<Props> = ({
   status,
   dismiss
 }) => {
-  const { mode } = useTheme()
+  const { theme } = useTheme()
   const { t } = useTranslation('componentTimeline')
 
   const queryClient = useQueryClient()
@@ -42,7 +42,7 @@ const ActionsStatus: React.FC<Props> = ({
         ? (params as MutationVarsTimelineUpdateStatusProperty).payload.property
         : 'delete'
       displayMessage({
-        mode,
+        theme,
         type: 'error',
         message: t('common:message.error.message', {
           function: t(`shared.header.actions.status.${theFunction}.function`)

src/screens/Announcements.tsx

@@ -36,7 +36,7 @@ const ScreenAnnouncements: React.FC<
   navigation
 }) => {
   const { reduceMotionEnabled } = useAccessibility()
-  const { mode, theme } = useTheme()
+  const { colors, mode } = useTheme()
   const [index, setIndex] = useState(0)
   const { t } = useTranslation('screenAnnouncements')
 
@@ -73,12 +73,12 @@ const ScreenAnnouncements: React.FC<
           style={[
             styles.announcement,
             {
-              borderColor: theme.primaryDefault,
+              borderColor: colors.primaryDefault,
-              backgroundColor: theme.backgroundDefault
+              backgroundColor: colors.backgroundDefault
             }
           ]}
         >
-          <Text style={[styles.published, { color: theme.secondary }]}>
+          <Text style={[styles.published, { color: colors.secondary }]}>
             <Trans
               i18nKey='screenAnnouncements:content.published'
               components={[<RelativeTime date={item.published_at} />]}
@@ -103,11 +103,11 @@ const ScreenAnnouncements: React.FC<
                     styles.reaction,
                     {
                       borderColor: reaction.me
-                        ? theme.disabled
+                        ? colors.disabled
-                        : theme.primaryDefault,
+                        : colors.primaryDefault,
                       backgroundColor: reaction.me
-                        ? theme.disabled
+                        ? colors.disabled
-                        : theme.backgroundDefault
+                        : colors.backgroundDefault
                     }
                   ]}
                   onPress={() => {
@@ -138,7 +138,7 @@ const ScreenAnnouncements: React.FC<
                     <Text
                       style={[
                         styles.reactionCount,
-                        { color: theme.primaryDefault }
+                        { color: colors.primaryDefault }
                       ]}
                     >
                       {reaction.count}
@@ -147,13 +147,13 @@ const ScreenAnnouncements: React.FC<
                 </Pressable>
               ))}
               {/* <Pressable
-                style={[styles.reaction, { borderColor: theme.primaryDefault }]}
+                style={[styles.reaction, { borderColor: colors.primaryDefault }]}
                 onPress={() => invisibleTextInputRef.current?.focus()}
               >
                 <Icon
                   name='Plus'
                   size={StyleConstants.Font.Size.M}
-                  color={theme.primaryDefault}
+                  color={colors.primaryDefault}
                 />
               </Pressable> */}
             </View>
@@ -177,7 +177,7 @@ const ScreenAnnouncements: React.FC<
         </View>
       </View>
     ),
-    [theme]
+    [mode]
   )
 
   const onMomentumScrollEnd = useCallback(
@@ -201,7 +201,7 @@ const ScreenAnnouncements: React.FC<
           alignItems: 'center'
         }}
       >
-        <Circle size={StyleConstants.Font.Size.L} color={theme.secondary} />
+        <Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
       </View>
     )
   }, [])
@@ -211,7 +211,7 @@ const ScreenAnnouncements: React.FC<
       blurType={mode}
       blurAmount={20}
       style={styles.base}
-      reducedTransparencyFallbackColor={theme.backgroundDefault}
+      reducedTransparencyFallbackColor={colors.backgroundDefault}
     >
       <SafeAreaView style={styles.base}>
         <FlatList
@@ -232,9 +232,9 @@ const ScreenAnnouncements: React.FC<
                   style={[
                     styles.indicator,
                     {
-                      borderColor: theme.primaryDefault,
+                      borderColor: colors.primaryDefault,
                       backgroundColor:
-                        i === index ? theme.primaryDefault : undefined,
+                        i === index ? colors.primaryDefault : undefined,
                       marginLeft:
                         i === query.data.length ? 0 : StyleConstants.Spacing.S
                     }
@@ -248,7 +248,7 @@ const ScreenAnnouncements: React.FC<
     </BlurView>
   ) : (
     <SafeAreaView
-      style={[styles.base, { backgroundColor: theme.backgroundDefault }]}
+      style={[styles.base, { backgroundColor: colors.backgroundDefault }]}
     >
       <FlatList
         horizontal
@@ -268,9 +268,9 @@ const ScreenAnnouncements: React.FC<
                 style={[
                   styles.indicator,
                   {
-                    borderColor: theme.primaryDefault,
+                    borderColor: colors.primaryDefault,
                     backgroundColor:
-                      i === index ? theme.primaryDefault : undefined,
+                      i === index ? colors.primaryDefault : undefined,
                     marginLeft:
                       i === query.data.length ? 0 : StyleConstants.Spacing.S
                   }

src/screens/Compose.tsx

@@ -50,7 +50,7 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
   navigation
 }) => {
   const { t } = useTranslation('screenCompose')
-  const { theme } = useTheme()
+  const { colors } = useTheme()
   const queryClient = useQueryClient()
 
   const [hasKeyboard, setHasKeyboard] = useState(false)
@@ -373,7 +373,7 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
               component={ComposeRoot}
               options={{
                 title: headerContent,
-                titleStyle: {
+                headerTitleStyle: {
                   fontWeight:
                     totalTextCount > maxTootChars
                       ? StyleConstants.Font.Weight.Bold
@@ -381,7 +381,7 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
                   fontSize: StyleConstants.Font.Size.M
                 },
                 headerTintColor:
-                  totalTextCount > maxTootChars ? theme.red : theme.secondary,
+                  totalTextCount > maxTootChars ? colors.red : colors.secondary,
                 headerLeft,
                 headerRight
               }}

src/screens/Compose/DraftsList/Root.tsx

@@ -37,7 +37,7 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
   const { t } = useTranslation('screenCompose')
   const navigation = useNavigation()
   const dispatch = useDispatch()
-  const { mode, theme } = useTheme()
+  const { colors, theme } = useTheme()
   const instanceDrafts = useSelector(getInstanceDrafts)?.filter(
     draft => draft.timestamp !== timestamp
   )
@@ -56,7 +56,7 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
       return (
         <Pressable
           accessibilityHint={t('content.draftsList.content.accessibilityHint')}
-          style={[styles.draft, { backgroundColor: theme.backgroundDefault }]}
+          style={[styles.draft, { backgroundColor: colors.backgroundDefault }]}
           onPress={async () => {
             setCheckingAttachments(true)
             let tempDraft = item
@@ -104,7 +104,7 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
             <HeaderSharedCreated created_at={item.timestamp} />
             <Text
               numberOfLines={2}
-              style={[styles.text, { color: theme.primaryDefault }]}
+              style={[styles.text, { color: colors.primaryDefault }]}
             >
               {item.text ||
                 item.spoiler ||
@@ -132,12 +132,12 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
         </Pressable>
       )
     },
-    [mode]
+    [theme]
   )
   const renderHiddenItem = useCallback(
     ({ item }) => (
       <View
-        style={[styles.hiddenBase, { backgroundColor: theme.red }]}
+        style={[styles.hiddenBase, { backgroundColor: colors.red }]}
         children={
           <Pressable
             style={styles.action}
@@ -146,14 +146,14 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
               <Icon
                 name='Trash'
                 size={StyleConstants.Font.Size.L}
-                color={theme.primaryOverlay}
+                color={colors.primaryOverlay}
               />
             }
           />
         }
       />
     ),
-    [mode]
+    [theme]
   )
 
   return (
@@ -184,14 +184,14 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
           <View
             style={[
               styles.modal,
-              { backgroundColor: theme.backgroundOverlayInvert }
+              { backgroundColor: colors.backgroundOverlayInvert }
             ]}
             children={
               <Text
                 children='检查附件在服务器的状态…'
                 style={{
                   ...StyleConstants.FontStyle.M,
-                  color: theme.primaryOverlay
+                  color: colors.primaryOverlay
                 }}
               />
             }

src/screens/Compose/EditAttachment/Image.tsx

@@ -22,7 +22,7 @@ export interface Props {
 
 const ComposeEditAttachmentImage: React.FC<Props> = ({ index }) => {
   const { t } = useTranslation('screenCompose')
-  const { theme } = useTheme()
+  const { colors } = useTheme()
   const { screenReaderEnabled } = useAccessibility()
 
   const { composeState, composeDispatch } = useContext(ComposeContext)
@@ -146,16 +146,21 @@ const ComposeEditAttachmentImage: React.FC<Props> = ({ index }) => {
                 <G>
                   <Path
                     d='M1000,0 L1000,1000 L0,1000 L0,0 L1000,0 Z M500,475 C486.192881,475 475,486.192881 475,500 C475,513.807119 486.192881,525 500,525 C513.807119,525 525,513.807119 525,500 C525,486.192881 513.807119,475 500,475 Z'
-                    fill={theme.backgroundOverlayInvert}
+                    fill={colors.backgroundOverlayInvert}
                   />
                   <Circle
-                    stroke={theme.primaryOverlay}
+                    stroke={colors.primaryOverlay}
                     stroke-width='2'
                     cx='500'
                     cy='500'
                     r='24'
                   />
-                  <Circle fill={theme.primaryOverlay} cx='500' cy='500' r='2' />
+                  <Circle
+                    fill={colors.primaryOverlay}
+                    cx='500'
+                    cy='500'
+                    r='2'
+                  />
                 </G>
               </G>
             </Svg>
@@ -163,7 +168,7 @@ const ComposeEditAttachmentImage: React.FC<Props> = ({ index }) => {
         </PanGestureHandler>
       </View>
       {screenReaderEnabled ? null : (
-        <Text style={[styles.imageFocusText, { color: theme.primaryDefault }]}>
+        <Text style={[styles.imageFocusText, { color: colors.primaryDefault }]}>
           {t('content.editAttachment.content.imageFocus')}
         </Text>
       )}

src/screens/Compose/EditAttachment/Root.tsx

@@ -13,7 +13,7 @@ export interface Props {
 
 const ComposeEditAttachmentRoot: React.FC<Props> = ({ index }) => {
   const { t } = useTranslation('screenCompose')
-  const { mode, theme } = useTheme()
+  const { colors, mode } = useTheme()
   const { composeState, composeDispatch } = useContext(ComposeContext)
   const theAttachment = composeState.attachments.uploads[index].remote!
 
@@ -61,13 +61,15 @@ const ComposeEditAttachmentRoot: React.FC<Props> = ({ index }) => {
     <ScrollView ref={scrollViewRef}>
       {mediaDisplay}
       <View style={styles.altTextContainer}>
-        <Text style={[styles.altTextInputHeading, { color: theme.primaryDefault }]}>
+        <Text
+          style={[styles.altTextInputHeading, { color: colors.primaryDefault }]}
+        >
           {t('content.editAttachment.content.altText.heading')}
         </Text>
         <TextInput
           style={[
             styles.altTextInput,
-            { borderColor: theme.border, color: theme.primaryDefault }
+            { borderColor: colors.border, color: colors.primaryDefault }
           ]}
           onFocus={() => scrollViewRef.current?.scrollToEnd()}
           autoCapitalize='none'
@@ -76,12 +78,12 @@ const ComposeEditAttachmentRoot: React.FC<Props> = ({ index }) => {
           multiline
           onChangeText={onChangeText}
           placeholder={t('content.editAttachment.content.altText.placeholder')}
-          placeholderTextColor={theme.secondary}
+          placeholderTextColor={colors.secondary}
           scrollEnabled
           value={theAttachment.description}
           keyboardAppearance={mode}
         />
-        <Text style={[styles.altTextLength, { color: theme.secondary }]}>
+        <Text style={[styles.altTextLength, { color: colors.secondary }]}>
           {theAttachment.description?.length || 0} / 1500
         </Text>
       </View>

src/screens/Compose/Posting.tsx

@@ -6,7 +6,7 @@ import ComposeContext from './utils/createContext'
 const ComposePosting = React.memo(
   () => {
     const { composeState } = useContext(ComposeContext)
-    const { theme } = useTheme()
+    const { colors } = useTheme()
 
     return (
       <Modal
@@ -14,7 +14,9 @@ const ComposePosting = React.memo(
         animationType='fade'
         visible={composeState.posting}
         children={
-          <View style={{ flex: 1, backgroundColor: theme.backgroundOverlayInvert }} />
+          <View
+            style={{ flex: 1, backgroundColor: colors.backgroundOverlayInvert }}
+          />
         }
       />
     )

src/screens/Compose/Root.tsx

@@ -61,7 +61,7 @@ export let instanceConfigurationStatusCharsURL = 23
 const ComposeRoot = React.memo(
   () => {
     const { reduceMotionEnabled } = useAccessibility()
-    const { theme } = useTheme()
+    const { colors } = useTheme()
 
     instanceConfigurationStatusCharsURL = useSelector(
       getInstanceConfigurationStatusCharsURL,
@@ -122,7 +122,7 @@ const ComposeRoot = React.memo(
           <View key='listEmpty' style={styles.loading}>
             <Circle
               size={StyleConstants.Font.Size.M * 1.25}
-              color={theme.secondary}
+              color={colors.secondary}
             />
           </View>
         )

src/screens/Compose/Root/Actions.tsx

@@ -16,19 +16,19 @@ const ComposeActions: React.FC = () => {
   const { showActionSheetWithOptions } = useActionSheet()
   const { composeState, composeDispatch } = useContext(ComposeContext)
   const { t } = useTranslation('screenCompose')
-  const { theme } = useTheme()
+  const { colors, mode } = useTheme()
   const instanceConfigurationStatusMaxAttachments = useSelector(
     getInstanceConfigurationStatusMaxAttachments,
     () => true
   )
 
   const attachmentColor = useMemo(() => {
-    if (composeState.poll.active) return theme.disabled
+    if (composeState.poll.active) return colors.disabled
 
     if (composeState.attachments.uploads.length) {
-      return theme.primaryDefault
+      return colors.primaryDefault
     } else {
-      return theme.secondary
+      return colors.secondary
     }
   }, [composeState.poll.active, composeState.attachments.uploads])
   const attachmentOnPress = useCallback(async () => {
@@ -49,12 +49,12 @@ const ComposeActions: React.FC = () => {
   }, [composeState.poll.active, composeState.attachments.uploads])
 
   const pollColor = useMemo(() => {
-    if (composeState.attachments.uploads.length) return theme.disabled
+    if (composeState.attachments.uploads.length) return colors.disabled
 
     if (composeState.poll.active) {
-      return theme.primaryDefault
+      return colors.primaryDefault
     } else {
-      return theme.secondary
+      return colors.secondary
     }
   }, [composeState.poll.active, composeState.attachments.uploads])
   const pollOnPress = useCallback(() => {
@@ -97,7 +97,8 @@ const ComposeActions: React.FC = () => {
             t('content.root.actions.visibility.options.direct'),
             t('content.root.actions.visibility.options.cancel')
           ],
-          cancelButtonIndex: 4
+          cancelButtonIndex: 4,
+          userInterfaceStyle: mode
         },
         buttonIndex => {
           switch (buttonIndex) {
@@ -150,12 +151,12 @@ const ComposeActions: React.FC = () => {
   }, [composeState.spoiler.active, composeState.textInputFocus])
 
   const emojiColor = useMemo(() => {
-    if (!composeState.emoji.emojis) return theme.disabled
+    if (!composeState.emoji.emojis) return colors.disabled
 
     if (composeState.emoji.active) {
-      return theme.primaryDefault
+      return colors.primaryDefault
     } else {
-      return theme.secondary
+      return colors.secondary
     }
   }, [composeState.emoji.active, composeState.emoji.emojis])
   const emojiOnPress = useCallback(() => {
@@ -177,8 +178,8 @@ const ComposeActions: React.FC = () => {
       style={[
         styles.additions,
         {
-          backgroundColor: theme.backgroundDefault,
+          backgroundColor: colors.backgroundDefault,
-          borderTopColor: theme.border
+          borderTopColor: colors.border
         }
       ]}
     >
@@ -223,7 +224,7 @@ const ComposeActions: React.FC = () => {
             name={visibilityIcon}
             size={24}
             color={
-              composeState.visibilityLock ? theme.disabled : theme.secondary
+              composeState.visibilityLock ? colors.disabled : colors.secondary
             }
           />
         }
@@ -242,8 +243,8 @@ const ComposeActions: React.FC = () => {
             size={24}
             color={
               composeState.spoiler.active
-                ? theme.primaryDefault
+                ? colors.primaryDefault
-                : theme.secondary
+                : colors.secondary
             }
           />
         }

src/screens/Compose/Root/Footer/Attachments.tsx

@@ -39,7 +39,7 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
   const { showActionSheetWithOptions } = useActionSheet()
   const { composeState, composeDispatch } = useContext(ComposeContext)
   const { t } = useTranslation('screenCompose')
-  const { theme } = useTheme()
+  const { colors, mode } = useTheme()
   const navigation = useNavigation<any>()
 
   const flatListRef = useRef<FlatList>(null)
@@ -135,8 +135,8 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
               style={[
                 styles.duration,
                 {
-                  color: theme.backgroundDefault,
+                  color: colors.backgroundDefault,
-                  backgroundColor: theme.backgroundOverlayInvert
+                  backgroundColor: colors.backgroundOverlayInvert
                 }
               ]}
             >
@@ -147,12 +147,12 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
             <View
               style={[
                 styles.uploading,
-                { backgroundColor: theme.backgroundOverlayInvert }
+                { backgroundColor: colors.backgroundOverlayInvert }
               ]}
             >
               <Circle
                 size={StyleConstants.Font.Size.L}
-                color={theme.primaryOverlay}
+                color={colors.primaryOverlay}
               />
             </View>
           ) : (
@@ -213,7 +213,7 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
           styles.container,
           {
             width: DEFAULT_HEIGHT,
-            backgroundColor: theme.backgroundOverlayInvert
+            backgroundColor: colors.backgroundOverlayInvert
           }
         ]}
         onPress={async () => {
@@ -255,9 +255,9 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
         <Icon
           name={composeState.attachments.sensitive ? 'CheckCircle' : 'Circle'}
           size={StyleConstants.Font.Size.L}
-          color={theme.primaryDefault}
+          color={colors.primaryDefault}
         />
-        <Text style={[styles.sensitiveText, { color: theme.primaryDefault }]}>
+        <Text style={[styles.sensitiveText, { color: colors.primaryDefault }]}>
           {t('content.root.footer.attachments.sensitive')}
         </Text>
       </Pressable>

src/screens/Compose/Root/Footer/Emojis.tsx

@@ -25,7 +25,7 @@ export interface Props {
 const ComposeEmojis: React.FC<Props> = ({ accessibleRefEmojis }) => {
   const { composeState, composeDispatch } = useContext(ComposeContext)
   const { reduceMotionEnabled } = useAccessibility()
-  const { theme } = useTheme()
+  const { colors } = useTheme()
   const { t } = useTranslation()
 
   useEffect(() => {
@@ -37,7 +37,7 @@ const ComposeEmojis: React.FC<Props> = ({ accessibleRefEmojis }) => {
 
   const listHeader = useCallback(
     ({ section: { title } }) => (
-      <Text style={[styles.group, { color: theme.secondary }]}>{title}</Text>
+      <Text style={[styles.group, { color: colors.secondary }]}>{title}</Text>
     ),
     []
   )

src/screens/Compose/Root/Footer/Poll.tsx

@@ -21,7 +21,7 @@ const ComposePoll: React.FC = () => {
     composeDispatch
   } = useContext(ComposeContext)
   const { t } = useTranslation('screenCompose')
-  const { mode, theme } = useTheme()
+  const { colors, mode } = useTheme()
 
   const instanceConfigurationPoll = useSelector(
     getInstanceConfigurationPoll,
@@ -39,7 +39,7 @@ const ComposePoll: React.FC = () => {
   }, [])
 
   return (
-    <View style={[styles.base, { borderColor: theme.border }]}>
+    <View style={[styles.base, { borderColor: colors.border }]}>
       <View style={styles.options}>
         {[...Array(total)].map((e, i) => {
           const restOptions = Object.keys(options).filter(
@@ -57,7 +57,7 @@ const ComposePoll: React.FC = () => {
               <Icon
                 name={multiple ? 'Square' : 'Circle'}
                 size={StyleConstants.Font.Size.L}
-                color={theme.secondary}
+                color={colors.secondary}
               />
               <TextInput
                 accessibilityLabel={t(
@@ -69,8 +69,8 @@ const ComposePoll: React.FC = () => {
                 style={[
                   styles.textInput,
                   {
-                    borderColor: theme.border,
+                    borderColor: colors.border,
-                    color: hasConflict ? theme.red : theme.primaryDefault
+                    color: hasConflict ? colors.red : colors.primaryDefault
                   }
                 ]}
                 placeholder={
@@ -78,7 +78,7 @@ const ComposePoll: React.FC = () => {
                     ? t('content.root.footer.poll.option.placeholder.multiple')
                     : t('content.root.footer.poll.option.placeholder.single')
                 }
-                placeholderTextColor={theme.disabled}
+                placeholderTextColor={colors.disabled}
                 maxLength={MAX_CHARS_PER_OPTION}
                 // @ts-ignore
                 value={options[i]}
@@ -168,7 +168,8 @@ const ComposePoll: React.FC = () => {
                   t('content.root.footer.poll.multiple.options.multiple'),
                   t('content.root.footer.poll.multiple.options.cancel')
                 ],
-                cancelButtonIndex: 2
+                cancelButtonIndex: 2,
+                userInterfaceStyle: mode
               },
               index => {
                 if (index && index < 2) {
@@ -211,7 +212,8 @@ const ComposePoll: React.FC = () => {
                   ),
                   t('content.root.footer.poll.expiration.options.cancel')
                 ],
-                cancelButtonIndex: expirations.length
+                cancelButtonIndex: expirations.length,
+                userInterfaceStyle: mode
               },
               index => {
                 if (index && index < expirations.length) {

src/screens/Compose/Root/Footer/Reply.tsx

@@ -8,10 +8,10 @@ const ComposeReply: React.FC = () => {
   const {
     composeState: { replyToStatus }
   } = useContext(ComposeContext)
-  const { theme } = useTheme()
+  const { colors } = useTheme()
 
   return (
-    <View style={[styles.base, { borderTopColor: theme.border }]}>
+    <View style={[styles.base, { borderTopColor: colors.border }]}>
       <TimelineDefault item={replyToStatus!} disableDetails disableOnPress />
     </View>
   )

src/screens/Compose/Root/Header/PostingAs.tsx

@@ -12,7 +12,7 @@ import { useSelector } from 'react-redux'
 const ComposePostingAs = React.memo(
   () => {
     const { t } = useTranslation('screenCompose')
-    const { theme } = useTheme()
+    const { colors } = useTheme()
 
     const instanceAccount = useSelector(
       getInstanceAccount,
@@ -21,7 +21,7 @@ const ComposePostingAs = React.memo(
     const instanceUri = useSelector(getInstanceUri)
 
     return (
-      <Text style={[styles.text, { color: theme.secondary }]}>
+      <Text style={[styles.text, { color: colors.secondary }]}>
         {t('content.root.header.postingAs', {
           acct: instanceAccount?.acct,
           domain: instanceUri

src/screens/Compose/Root/Header/SpoilerInput.tsx

@@ -9,7 +9,7 @@ import ComposeContext from '../../utils/createContext'
 const ComposeSpoilerInput: React.FC = () => {
   const { composeState, composeDispatch } = useContext(ComposeContext)
   const { t } = useTranslation('screenCompose')
-  const { mode, theme } = useTheme()
+  const { colors, mode } = useTheme()
 
   return (
     <TextInput
@@ -17,8 +17,8 @@ const ComposeSpoilerInput: React.FC = () => {
       style={[
         styles.spoilerInput,
         {
-          color: theme.primaryDefault,
+          color: colors.primaryDefault,
-          borderBottomColor: theme.border
+          borderBottomColor: colors.border
         }
       ]}
       autoCapitalize='none'
@@ -27,7 +27,7 @@ const ComposeSpoilerInput: React.FC = () => {
       enablesReturnKeyAutomatically
       multiline
       placeholder={t('content.root.header.spoilerInput.placeholder')}
-      placeholderTextColor={theme.secondary}
+      placeholderTextColor={colors.secondary}
       onChangeText={content =>
         formatText({
           textInput: 'spoiler',

src/screens/Compose/Root/Header/TextInput.tsx

@@ -9,7 +9,7 @@ import ComposeContext from '../../utils/createContext'
 const ComposeTextInput: React.FC = () => {
   const { composeState, composeDispatch } = useContext(ComposeContext)
   const { t } = useTranslation('screenCompose')
-  const { mode, theme } = useTheme()
+  const { colors, mode } = useTheme()
 
   return (
     <TextInput
@@ -17,15 +17,15 @@ const ComposeTextInput: React.FC = () => {
       style={[
         styles.textInput,
         {
-          color: theme.primaryDefault,
+          color: colors.primaryDefault,
-          borderBottomColor: theme.border
+          borderBottomColor: colors.border
         }
       ]}
       autoFocus
       enablesReturnKeyAutomatically
       multiline
       placeholder={t('content.root.header.textInput.placeholder')}
-      placeholderTextColor={theme.secondary}
+      placeholderTextColor={colors.secondary}
       onChangeText={content =>
         formatText({
           textInput: 'text',

src/screens/Compose/formatText.tsx

@@ -16,9 +16,9 @@ export interface Params {
 }
 
 const TagText = ({ text }: { text: string }) => {
-  const { theme } = useTheme()
+  const { colors } = useTheme()
 
-  return <Text style={{ color: theme.blue }}>{text}</Text>
+  return <Text style={{ color: colors.blue }}>{text}</Text>
 }
 
 const debouncedSuggestions = debounce(

src/screens/ImageViewer/save.ts

@@ -2,6 +2,7 @@ import haptics from '@components/haptics'
 import { displayMessage } from '@components/Message'
 import CameraRoll from '@react-native-community/cameraroll'
 import { RootStackParamList } from '@utils/navigation/navigators'
+import { Theme } from '@utils/styles/themes'
 import * as FileSystem from 'expo-file-system'
 import i18next from 'i18next'
 import { RefObject } from 'react'
@@ -10,17 +11,17 @@ import FlashMessage from 'react-native-flash-message'
 
 type CommonProps = {
   messageRef: RefObject<FlashMessage>
-  mode: 'light' | 'dark'
+  theme: Theme
   image: RootStackParamList['Screen-ImagesViewer']['imageUrls'][0]
 }
 
-const saveIos = async ({ messageRef, mode, image }: CommonProps) => {
+const saveIos = async ({ messageRef, theme, image }: CommonProps) => {
   CameraRoll.save(image.url)
     .then(() => {
       haptics('Success')
       displayMessage({
         ref: messageRef,
-        mode,
+        theme,
         type: 'success',
         message: i18next.t('screenImageViewer:content.save.succeed')
       })
@@ -32,7 +33,7 @@ const saveIos = async ({ messageRef, mode, image }: CommonProps) => {
             haptics('Success')
             displayMessage({
               ref: messageRef,
-              mode,
+              theme,
               type: 'success',
               message: i18next.t('screenImageViewer:content.save.succeed')
             })
@@ -41,7 +42,7 @@ const saveIos = async ({ messageRef, mode, image }: CommonProps) => {
             haptics('Error')
             displayMessage({
               ref: messageRef,
-              mode,
+              theme,
               type: 'error',
               message: i18next.t('screenImageViewer:content.save.failed')
             })
@@ -50,7 +51,7 @@ const saveIos = async ({ messageRef, mode, image }: CommonProps) => {
         haptics('Error')
         displayMessage({
           ref: messageRef,
-          mode,
+          theme,
           type: 'error',
           message: i18next.t('screenImageViewer:content.save.failed')
         })
@@ -58,7 +59,7 @@ const saveIos = async ({ messageRef, mode, image }: CommonProps) => {
     })
 }
 
-const saveAndroid = async ({ messageRef, mode, image }: CommonProps) => {
+const saveAndroid = async ({ messageRef, theme, image }: CommonProps) => {
   const fileUri: string = `${FileSystem.documentDirectory}${image.id}.jpg`
   const downloadedFile: FileSystem.FileSystemDownloadResult =
     await FileSystem.downloadAsync(image.url, fileUri)
@@ -67,7 +68,7 @@ const saveAndroid = async ({ messageRef, mode, image }: CommonProps) => {
     haptics('Error')
     displayMessage({
       ref: messageRef,
-      mode,
+      theme,
       type: 'error',
       message: i18next.t('screenImageViewer:content.save.failed')
     })
@@ -83,7 +84,7 @@ const saveAndroid = async ({ messageRef, mode, image }: CommonProps) => {
       haptics('Error')
       displayMessage({
         ref: messageRef,
-        mode,
+        theme,
         type: 'error',
         message: i18next.t('screenImageViewer:content.save.failed')
       })
@@ -96,7 +97,7 @@ const saveAndroid = async ({ messageRef, mode, image }: CommonProps) => {
       haptics('Success')
       displayMessage({
         ref: messageRef,
-        mode,
+        theme,
         type: 'success',
         message: i18next.t('screenImageViewer:content.save.succeed')
       })
@@ -105,7 +106,7 @@ const saveAndroid = async ({ messageRef, mode, image }: CommonProps) => {
       haptics('Error')
       displayMessage({
         ref: messageRef,
-        mode,
+        theme,
         type: 'error',
         message: i18next.t('screenImageViewer:content.save.failed')
       })

src/screens/ImagesViewer.tsx

@@ -35,7 +35,7 @@ const HeaderComponent = React.memo(
     imageUrls: RootStackParamList['Screen-ImagesViewer']['imageUrls']
   }) => {
     const insets = useSafeAreaInsets()
-    const { mode } = useTheme()
+    const { mode, theme } = useTheme()
     const { t } = useTranslation('screenImageViewer')
     const { showActionSheetWithOptions } = useActionSheet()
 
@@ -48,13 +48,14 @@ const HeaderComponent = React.memo(
             t('content.options.share'),
             t('content.options.cancel')
           ],
-          cancelButtonIndex: 2
+          cancelButtonIndex: 2,
+          userInterfaceStyle: mode
         },
         async buttonIndex => {
           switch (buttonIndex) {
             case 0:
               analytics('imageviewer_more_save_press')
-              saveImage({ messageRef, mode, image: imageUrls[currentIndex] })
+              saveImage({ messageRef, theme, image: imageUrls[currentIndex] })
               break
             case 1:
               analytics('imageviewer_more_share_press')
@@ -117,7 +118,7 @@ const ScreenImagesViewer = ({
     return null
   }
 
-  const { mode } = useTheme()
+  const { theme } = useTheme()
 
   const initialIndex = imageUrls.findIndex(image => image.id === id)
   const [currentIndex, setCurrentIndex] = useState(initialIndex)
@@ -132,7 +133,7 @@ const ScreenImagesViewer = ({
         imageIndex={initialIndex}
         onImageIndexChange={index => setCurrentIndex(index)}
         onRequestClose={() => navigation.goBack()}
-        onLongPress={image => saveImage({ messageRef, mode, image })}
+        onLongPress={image => saveImage({ messageRef, theme, image })}
         HeaderComponent={() => (
           <HeaderComponent
             messageRef={messageRef}

src/screens/Tabs.tsx

@@ -31,7 +31,7 @@ const Tab = createBottomTabNavigator<ScreenTabsStackParamList>()
 
 const ScreenTabs = React.memo(
   ({ navigation }: RootStackScreenProps<'Screen-Tabs'>) => {
-    const { theme } = useTheme()
+    const { colors } = useTheme()
 
     const instanceActive = useSelector(getInstanceActive)
     const instanceAccount = useSelector(
@@ -42,8 +42,8 @@ const ScreenTabs = React.memo(
     const screenOptions = useCallback(
       ({ route }): BottomTabNavigationOptions => ({
         headerShown: false,
-        tabBarActiveTintColor: theme.primaryDefault,
+        tabBarActiveTintColor: colors.primaryDefault,
-        tabBarInactiveTintColor: theme.secondary,
+        tabBarInactiveTintColor: colors.secondary,
         tabBarShowLabel: false,
         ...(Platform.OS === 'android' && { tabBarHideOnKeyboard: true }),
         tabBarStyle: { display: instanceActive !== -1 ? 'flex' : 'none' },
@@ -78,7 +78,7 @@ const ScreenTabs = React.memo(
                     borderRadius: size,
                     overflow: 'hidden',
                     borderWidth: focused ? 2 : 0,
-                    borderColor: focused ? theme.secondary : color
+                    borderColor: focused ? colors.secondary : color
                   }}
                 />
               )

src/screens/Tabs/Me/Profile/Fields.tsx

@@ -23,16 +23,18 @@ const prepareFields = (
   })
 }
 
-const TabMeProfileFields: React.FC<TabMeProfileStackScreenProps<
+const TabMeProfileFields: React.FC<
-  'Tab-Me-Profile-Fields'
+  TabMeProfileStackScreenProps<'Tab-Me-Profile-Fields'> & {
-> & { messageRef: RefObject<FlashMessage> }> = ({
+    messageRef: RefObject<FlashMessage>
+  }
+> = ({
   messageRef,
   route: {
     params: { fields }
   },
   navigation
 }) => {
-  const { mode, theme } = useTheme()
+  const { colors, theme } = useTheme()
   const { t, i18n } = useTranslation('screenTabs')
   const { mutateAsync, status } = useProfileMutation()
 
@@ -77,7 +79,7 @@ const TabMeProfileFields: React.FC<TabMeProfileStackScreenProps<
           content='Save'
           onPress={async () => {
             mutateAsync({
-              mode,
+              theme,
               messageRef,
               message: {
                 text: 'me.profile.root.note.title',
@@ -95,14 +97,14 @@ const TabMeProfileFields: React.FC<TabMeProfileStackScreenProps<
         />
       )
     })
-  }, [mode, i18n.language, dirty, status, newFields])
+  }, [theme, i18n.language, dirty, status, newFields])
 
   return (
     <ScrollView style={styles.base} keyboardShouldPersistTaps='always'>
       <View style={{ marginBottom: StyleConstants.Spacing.L * 2 }}>
         {Array.from(Array(4).keys()).map(index => (
           <View key={index} style={styles.group}>
-            <Text style={[styles.headline, { color: theme.primaryDefault }]}>
+            <Text style={[styles.headline, { color: colors.primaryDefault }]}>
               {t('me.profile.fields.group', { index: index + 1 })}
             </Text>
             <Input

src/screens/Tabs/Me/Profile/Name.tsx

@@ -21,7 +21,7 @@ const TabMeProfileName: React.FC<
   },
   navigation
 }) => {
-  const { mode } = useTheme()
+  const { theme } = useTheme()
   const { t, i18n } = useTranslation('screenTabs')
   const { mutateAsync, status } = useProfileMutation()
 
@@ -66,7 +66,7 @@ const TabMeProfileName: React.FC<
           content='Save'
           onPress={async () => {
             mutateAsync({
-              mode,
+              theme,
               messageRef,
               message: {
                 text: 'me.profile.root.name.title',
@@ -82,7 +82,7 @@ const TabMeProfileName: React.FC<
         />
       )
     })
-  }, [mode, i18n.language, dirty, status, displayName])
+  }, [theme, i18n.language, dirty, status, displayName])
 
   return (
     <ScrollView style={styles.base} keyboardShouldPersistTaps='always'>

src/screens/Tabs/Me/Profile/Note.tsx

@@ -10,16 +10,18 @@ import { Alert, StyleSheet, View } from 'react-native'
 import FlashMessage from 'react-native-flash-message'
 import { ScrollView } from 'react-native-gesture-handler'
 
-const TabMeProfileNote: React.FC<TabMeProfileStackScreenProps<
+const TabMeProfileNote: React.FC<
-  'Tab-Me-Profile-Note'
+  TabMeProfileStackScreenProps<'Tab-Me-Profile-Note'> & {
-> & { messageRef: RefObject<FlashMessage> }> = ({
+    messageRef: RefObject<FlashMessage>
+  }
+> = ({
   messageRef,
   route: {
     params: { note }
   },
   navigation
 }) => {
-  const { mode } = useTheme()
+  const { theme } = useTheme()
   const { t, i18n } = useTranslation('screenTabs')
   const { mutateAsync, status } = useProfileMutation()
 
@@ -64,7 +66,7 @@ const TabMeProfileNote: React.FC<TabMeProfileStackScreenProps<
           content='Save'
           onPress={async () => {
             mutateAsync({
-              mode,
+              theme,
               messageRef,
               message: {
                 text: 'me.profile.root.note.title',
@@ -80,7 +82,7 @@ const TabMeProfileNote: React.FC<TabMeProfileStackScreenProps<
         />
       )
     })
-  }, [mode, i18n.language, dirty, status, newNote])
+  }, [theme, i18n.language, dirty, status, newNote])
 
   return (
     <ScrollView style={styles.base} keyboardShouldPersistTaps='always'>

src/screens/Tabs/Me/Profile/Root.tsx

@@ -12,10 +12,12 @@ import { ScrollView } from 'react-native-gesture-handler'
 import { useDispatch } from 'react-redux'
 import ProfileAvatarHeader from './Root/AvatarHeader'
 
-const TabMeProfileRoot: React.FC<TabMeProfileStackScreenProps<
+const TabMeProfileRoot: React.FC<
-  'Tab-Me-Profile-Root'
+  TabMeProfileStackScreenProps<'Tab-Me-Profile-Root'> & {
-> & { messageRef: RefObject<FlashMessage> }> = ({ messageRef, navigation }) => {
+    messageRef: RefObject<FlashMessage>
-  const { mode } = useTheme()
+  }
+> = ({ messageRef, navigation }) => {
+  const { mode, theme } = useTheme()
   const { t } = useTranslation('screenTabs')
 
   const { showActionSheetWithOptions } = useActionSheet()
@@ -34,7 +36,8 @@ const TabMeProfileRoot: React.FC<TabMeProfileStackScreenProps<
           t('me.profile.root.visibility.options.private'),
           t('me.profile.root.visibility.options.cancel')
         ],
-        cancelButtonIndex: 3
+        cancelButtonIndex: 3,
+        userInterfaceStyle: mode
       },
       async buttonIndex => {
         switch (buttonIndex) {
@@ -54,7 +57,7 @@ const TabMeProfileRoot: React.FC<TabMeProfileStackScreenProps<
                 new: indexVisibilityMapping[buttonIndex]
               })
               mutateAsync({
-                mode,
+                theme,
                 messageRef,
                 message: {
                   text: 'me.profile.root.visibility.title',
@@ -69,7 +72,7 @@ const TabMeProfileRoot: React.FC<TabMeProfileStackScreenProps<
         }
       }
     )
-  }, [data?.source.privacy])
+  }, [theme, data?.source.privacy])
 
   const onPressSensitive = useCallback(() => {
     analytics('me_profile_sensitive', {
@@ -77,7 +80,7 @@ const TabMeProfileRoot: React.FC<TabMeProfileStackScreenProps<
       new: data?.source.sensitive === undefined ? true : !data.source.sensitive
     })
     mutateAsync({
-      mode,
+      theme,
       messageRef,
       message: {
         text: 'me.profile.root.sensitive.title',
@@ -95,7 +98,7 @@ const TabMeProfileRoot: React.FC<TabMeProfileStackScreenProps<
       new: data?.locked === undefined ? true : !data.locked
     })
     mutateAsync({
-      mode,
+      theme,
       messageRef,
       message: {
         text: 'me.profile.root.lock.title',
@@ -105,7 +108,7 @@ const TabMeProfileRoot: React.FC<TabMeProfileStackScreenProps<
       type: 'locked',
       data: data?.locked === undefined ? true : !data.locked
     })
-  }, [data?.locked])
+  }, [theme, data?.locked])
 
   const onPressBot = useCallback(() => {
     analytics('me_profile_bot', {
@@ -113,7 +116,7 @@ const TabMeProfileRoot: React.FC<TabMeProfileStackScreenProps<
       new: data?.bot === undefined ? true : !data.bot
     })
     mutateAsync({
-      mode,
+      theme,
       messageRef,
       message: {
         text: 'me.profile.root.bot.title',
@@ -123,7 +126,7 @@ const TabMeProfileRoot: React.FC<TabMeProfileStackScreenProps<
       type: 'bot',
       data: data?.bot === undefined ? true : !data.bot
     })
-  }, [data?.bot])
+  }, [theme, data?.bot])
 
   return (
     <ScrollView>

src/screens/Tabs/Me/Profile/Root/AvatarHeader.tsx

@@ -14,7 +14,7 @@ export interface Props {
 }
 
 const ProfileAvatarHeader: React.FC<Props> = ({ type, messageRef }) => {
-  const { mode } = useTheme()
+  const { theme } = useTheme()
   const { t } = useTranslation('screenTabs')
 
   const { showActionSheetWithOptions } = useActionSheet()
@@ -35,7 +35,7 @@ const ProfileAvatarHeader: React.FC<Props> = ({ type, messageRef }) => {
           resize: { width: 400, height: 400 }
         })
         mutation.mutate({
-          mode,
+          theme,
           messageRef,
           message: {
             text: `me.profile.root.${type}.title`,

src/screens/Tabs/Me/Push.tsx

@@ -23,7 +23,7 @@ import { AppState, Linking, ScrollView, Text, View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 
 const TabMePush: React.FC = () => {
-  const { theme } = useTheme()
+  const { colors } = useTheme()
   const { t } = useTranslation('screenTabs')
   const instanceAccount = useSelector(
     getInstanceAccount,
@@ -202,12 +202,12 @@ const TabMePush: React.FC = () => {
           <Icon
             name='Frown'
             size={StyleConstants.Font.Size.L}
-            color={theme.primaryDefault}
+            color={colors.primaryDefault}
           />
           <Text
             style={{
               ...StyleConstants.FontStyle.M,
-              color: theme.primaryDefault
+              color: colors.primaryDefault
             }}
           >
             {t('me.push.notAvailable')}

src/screens/Tabs/Me/Settings/Analytics.tsx

@@ -13,7 +13,7 @@ import { useDispatch, useSelector } from 'react-redux'
 
 const SettingsAnalytics: React.FC = () => {
   const dispatch = useDispatch()
-  const { theme } = useTheme()
+  const { colors } = useTheme()
   const { t } = useTranslation('screenTabs')
 
   const settingsAnalytics = useSelector(getSettingsAnalytics)
@@ -28,7 +28,7 @@ const SettingsAnalytics: React.FC = () => {
           dispatch(changeAnalytics(!settingsAnalytics))
         }
       />
-      <Text style={[styles.version, { color: theme.secondary }]}>
+      <Text style={[styles.version, { color: colors.secondary }]}>
         {t('me.settings.version', { version: Constants.manifest?.version })}
       </Text>
     </MenuContainer>

src/screens/Tabs/Me/Settings/App.tsx

@@ -12,7 +12,9 @@ import {
   changeTheme,
   getSettingsTheme,
   getSettingsBrowser,
-  getSettingsFontsize
+  getSettingsFontsize,
+  getSettingsDarkTheme,
+  changeDarkTheme
 } from '@utils/slices/settingsSlice'
 import { useTheme } from '@utils/styles/ThemeManager'
 import * as Notifications from 'expo-notifications'
@@ -26,12 +28,13 @@ const SettingsApp: React.FC = () => {
   const navigation = useNavigation<any>()
   const dispatch = useDispatch()
   const { showActionSheetWithOptions } = useActionSheet()
-  const { setTheme } = useTheme()
+  const { mode } = useTheme()
   const { t, i18n } = useTranslation('screenTabs')
 
   const instances = useSelector(getInstances, () => true)
   const settingsFontsize = useSelector(getSettingsFontsize)
   const settingsTheme = useSelector(getSettingsTheme)
+  const settingsDarkTheme = useSelector(getSettingsDarkTheme)
   const settingsBrowser = useSelector(getSettingsBrowser)
 
   return (
@@ -61,7 +64,8 @@ const SettingsApp: React.FC = () => {
             {
               title: t('me.settings.language.heading'),
               options,
-              cancelButtonIndex: options.length - 1
+              cancelButtonIndex: options.length - 1,
+              userInterfaceStyle: mode
             },
             buttonIndex => {
               if (buttonIndex === undefined) return
@@ -171,7 +175,6 @@ const SettingsApp: React.FC = () => {
                   })
                   haptics('Success')
                   dispatch(changeTheme('light'))
-                  setTheme('light')
                   break
                 case 2:
                   analytics('settings_appearance_press', {
@@ -180,7 +183,44 @@ const SettingsApp: React.FC = () => {
                   })
                   haptics('Success')
                   dispatch(changeTheme('dark'))
-                  setTheme('dark')
+                  break
+              }
+            }
+          )
+        }
+      />
+      <MenuRow
+        title={t('me.settings.darkTheme.heading')}
+        content={t(`me.settings.darkTheme.options.${settingsDarkTheme}`)}
+        iconBack='ChevronRight'
+        onPress={() =>
+          showActionSheetWithOptions(
+            {
+              title: t('me.settings.darkTheme.heading'),
+              options: [
+                t('me.settings.darkTheme.options.lighter'),
+                t('me.settings.darkTheme.options.darker'),
+                t('me.settings.darkTheme.options.cancel')
+              ],
+              cancelButtonIndex: 2
+            },
+            buttonIndex => {
+              switch (buttonIndex) {
+                case 0:
+                  analytics('settings_darktheme_press', {
+                    current: settingsDarkTheme,
+                    new: 'lighter'
+                  })
+                  haptics('Success')
+                  dispatch(changeDarkTheme('lighter'))
+                  break
+                case 1:
+                  analytics('settings_darktheme_press', {
+                    current: settingsDarkTheme,
+                    new: 'darker'
+                  })
+                  haptics('Success')
+                  dispatch(changeDarkTheme('darker'))
                   break
               }
             }

src/screens/Tabs/Me/Settings/Dev.tsx

@@ -11,7 +11,7 @@ import { DevSettings, Text } from 'react-native'
 import { useSelector } from 'react-redux'
 
 const SettingsDev: React.FC = () => {
-  const { theme } = useTheme()
+  const { colors, mode } = useTheme()
   const { showActionSheetWithOptions } = useActionSheet()
   const instanceActive = useSelector(getInstanceActive)
   const instances = useSelector(getInstances, () => true)
@@ -23,7 +23,7 @@ const SettingsDev: React.FC = () => {
         style={{
           paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
           ...StyleConstants.FontStyle.S,
-          color: theme.primaryDefault
+          color: colors.primaryDefault
         }}
       >
         {instances[instanceActive]?.token}
@@ -45,7 +45,8 @@ const SettingsDev: React.FC = () => {
                   return instance.url + ': ' + instance.account.id
                 })
                 .concat(['Cancel']),
-              cancelButtonIndex: instances.length
+              cancelButtonIndex: instances.length,
+              userInterfaceStyle: mode
             },
             () => {}
           )

src/screens/Tabs/Me/Settings/Tooot.tsx

@@ -16,7 +16,7 @@ import { isDevelopment, isRelease } from '@utils/checkEnvironment'
 const SettingsTooot: React.FC = () => {
   const instanceActive = useSelector(getInstanceActive)
   const navigation = useNavigation<any>()
-  const { theme } = useTheme()
+  const { colors } = useTheme()
   const { t } = useTranslation('screenTabs')
 
   return (
@@ -27,7 +27,7 @@ const SettingsTooot: React.FC = () => {
           <Icon
             name='MessageSquare'
             size={StyleConstants.Font.Size.M}
-            color={theme.secondary}
+            color={colors.secondary}
           />
         }
         iconBack='ChevronRight'
@@ -42,7 +42,7 @@ const SettingsTooot: React.FC = () => {
           <Icon
             name='Heart'
             size={StyleConstants.Font.Size.M}
-            color={theme.red}
+            color={colors.red}
           />
         }
         iconBack='ChevronRight'
@@ -76,7 +76,7 @@ const SettingsTooot: React.FC = () => {
           <Icon
             name='Mail'
             size={StyleConstants.Font.Size.M}
-            color={theme.secondary}
+            color={colors.secondary}
           />
         }
         iconBack='ChevronRight'

src/screens/Tabs/Me/SettingsFontsize.tsx

@@ -35,7 +35,7 @@ export const mapFontsizeToName = (size: SettingsState['fontsize']) => {
 const TabMeSettingsFontsize: React.FC<
   TabMeStackScreenProps<'Tab-Me-Settings-Fontsize'>
 > = () => {
-  const { mode, theme } = useTheme()
+  const { colors, theme } = useTheme()
   const { t } = useTranslation('screenTabs')
   const initialSize = useSelector(getSettingsFontsize)
   const dispatch = useDispatch()
@@ -90,9 +90,11 @@ const TabMeSettingsFontsize: React.FC<
                     ? StyleConstants.Font.Weight.Bold
                     : undefined,
                 color:
-                  initialSize === size ? theme.primaryDefault : theme.secondary,
+                  initialSize === size
+                    ? colors.primaryDefault
+                    : colors.secondary,
                 borderWidth: StyleSheet.hairlineWidth,
-                borderColor: theme.border
+                borderColor: colors.border
               }
             ]}
           >
@@ -101,11 +103,11 @@ const TabMeSettingsFontsize: React.FC<
         ))}
       </>
     )
-  }, [mode, initialSize])
+  }, [theme, initialSize])
 
   return (
     <ScrollView scrollEnabled={false}>
-      <Text style={[styles.header, { color: theme.primaryDefault }]}>
+      <Text style={[styles.header, { color: colors.primaryDefault }]}>
         {t('me.fontSize.showcase')}
       </Text>
       <View>
@@ -124,7 +126,7 @@ const TabMeSettingsFontsize: React.FC<
           extraMarginRight={-StyleConstants.Spacing.Global.PagePadding}
         />
       </View>
-      <Text style={[styles.header, { color: theme.primaryDefault }]}>
+      <Text style={[styles.header, { color: colors.primaryDefault }]}>
         {t('me.fontSize.availableSizes')}
       </Text>
       <View style={styles.sizesDemo}>{sizesDemo}</View>

src/screens/Tabs/Me/Switch.tsx

@@ -51,7 +51,7 @@ const AccountButton: React.FC<Props> = ({ instance, selected = false }) => {
 
 const TabMeSwitch: React.FC = () => {
   const { t } = useTranslation('screenTabs')
-  const { theme } = useTheme()
+  const { colors } = useTheme()
   const instances = useSelector(getInstances, () => true)
   const instanceActive = useSelector(getInstanceActive, () => true)
 
@@ -68,9 +68,9 @@ const TabMeSwitch: React.FC = () => {
         keyboardShouldPersistTaps='always'
       >
         <View
-          style={[styles.firstSection, { borderBottomColor: theme.border }]}
+          style={[styles.firstSection, { borderBottomColor: colors.border }]}
         >
-          <Text style={[styles.header, { color: theme.primaryDefault }]}>
+          <Text style={[styles.header, { color: colors.primaryDefault }]}>
             {t('me.switch.existing')}
           </Text>
           <View style={styles.accountButtons}>
@@ -101,7 +101,7 @@ const TabMeSwitch: React.FC = () => {
         </View>
 
         <View style={styles.secondSection}>
-          <Text style={[styles.header, { color: theme.primaryDefault }]}>
+          <Text style={[styles.header, { color: colors.primaryDefault }]}>
             {t('me.switch.new')}
           </Text>
           <ComponentInstance

src/screens/Tabs/Shared/Account.tsx

@@ -18,16 +18,16 @@ import AccountHeader from './Account/Header'
 import AccountInformation from './Account/Information'
 import AccountNav from './Account/Nav'
 
-const TabSharedAccount: React.FC<TabSharedStackScreenProps<
+const TabSharedAccount: React.FC<
-  'Tab-Shared-Account'
+  TabSharedStackScreenProps<'Tab-Shared-Account'>
->> = ({
+> = ({
   route: {
     params: { account }
   },
   navigation
 }) => {
   const { t, i18n } = useTranslation('screenTabs')
-  const { mode, theme } = useTheme()
+  const { colors, mode } = useTheme()
 
   const { data } = useAccountQuery({ id: account.id })
 
@@ -83,7 +83,7 @@ const TabSharedAccount: React.FC<TabSharedStackScreenProps<
   const ListHeaderComponent = useMemo(() => {
     return (
       <>
-        <View style={[styles.header, { borderBottomColor: theme.border }]}>
+        <View style={[styles.header, { borderBottomColor: colors.border }]}>
           <AccountHeader account={data} />
           <AccountInformation account={data} />
           {fetchedTimeline.current ? (

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

@@ -24,10 +24,9 @@ export interface Props {
 
 const AccountAttachments = React.memo(
   ({ account }: Props) => {
-    const navigation = useNavigation<
+    const navigation =
-      StackNavigationProp<TabLocalStackParamList>
+      useNavigation<StackNavigationProp<TabLocalStackParamList>>()
-    >()
+    const { colors } = useTheme()
-    const { theme } = useTheme()
 
     const DISPLAY_AMOUNT = 6
 
@@ -71,7 +70,7 @@ const AccountAttachments = React.memo(
                 <View
                   style={{
                     marginHorizontal: StyleConstants.Spacing.Global.PagePadding,
-                    backgroundColor: theme.backgroundOverlayInvert,
+                    backgroundColor: colors.backgroundOverlayInvert,
                     width: width,
                     height: width,
                     justifyContent: 'center',
@@ -80,7 +79,7 @@ const AccountAttachments = React.memo(
                   children={
                     <Icon
                       name='MoreHorizontal'
-                      color={theme.primaryOverlay}
+                      color={colors.primaryOverlay}
                       size={StyleConstants.Font.Size.L * 1.5}
                     />
                   }
@@ -117,7 +116,7 @@ const AccountAttachments = React.memo(
           ),
           paddingVertical: StyleConstants.Spacing.Global.PagePadding,
           borderTopWidth: 1,
-          borderTopColor: theme.border
+          borderTopColor: colors.border
         }
       } else {
         return {}

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

@@ -13,7 +13,7 @@ export interface Props {
 const AccountHeader = React.memo(
   ({ account, edit }: Props) => {
     const { reduceMotionEnabled } = useAccessibility()
-    const { theme } = useTheme()
+    const { colors } = useTheme()
     const topInset = useSafeAreaInsets().top
 
     return (
@@ -24,7 +24,7 @@ const AccountHeader = React.memo(
           }}
           style={{
             height: Dimensions.get('screen').width / 3 + topInset,
-            backgroundColor: theme.disabled
+            backgroundColor: colors.disabled
           }}
         />
         {edit ? (

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

@@ -19,16 +19,16 @@ export interface Props {
 
 const AccountInformation = React.memo(
   ({ account }: Props) => {
-    const { mode, theme } = useTheme()
+    const { colors, theme } = useTheme()
 
     const { name } = useRoute()
     const myInfo = name !== 'Tab-Shared-Account'
 
     const animation = useCallback(
       props => (
-        <Fade {...props} style={{ backgroundColor: theme.shimmerHighlight }} />
+        <Fade {...props} style={{ backgroundColor: colors.shimmerHighlight }} />
       ),
-      [mode]
+      [theme]
     )
 
     return (

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

@@ -15,8 +15,11 @@ export interface Props {
   localInstance: boolean
 }
 
-const AccountInformationAccount: React.FC<Props> = ({ account, localInstance }) => {
+const AccountInformationAccount: React.FC<Props> = ({
-  const { theme } = useTheme()
+  account,
+  localInstance
+}) => {
+  const { colors } = useTheme()
   const instanceAccount = useSelector(
     getInstanceAccount,
     (prev, next) => prev?.acct === next?.acct
@@ -38,7 +41,7 @@ const AccountInformationAccount: React.FC<Props> = ({ account, localInstance })
         <Text
           style={[
             styles.moved,
-            { color: theme.secondary, ...StyleConstants.FontStyle.M }
+            { color: colors.secondary, ...StyleConstants.FontStyle.M }
           ]}
           selectable
         >
@@ -57,7 +60,7 @@ const AccountInformationAccount: React.FC<Props> = ({ account, localInstance })
           style={[
             movedStyle.base,
             {
-              color: theme.secondary,
+              color: colors.secondary,
               ...StyleConstants.FontStyle.M
             }
           ]}
@@ -71,7 +74,7 @@ const AccountInformationAccount: React.FC<Props> = ({ account, localInstance })
           <Icon
             name='Lock'
             style={styles.type}
-            color={theme.secondary}
+            color={colors.secondary}
             size={StyleConstants.Font.Size.M}
           />
         ) : null}
@@ -79,7 +82,7 @@ const AccountInformationAccount: React.FC<Props> = ({ account, localInstance })
           <Icon
             name='HardDrive'
             style={styles.type}
-            color={theme.secondary}
+            color={colors.secondary}
             size={StyleConstants.Font.Size.M}
           />
         ) : null}
@@ -90,7 +93,7 @@ const AccountInformationAccount: React.FC<Props> = ({ account, localInstance })
       <PlaceholderLine
         width={StyleConstants.Font.Size.M * 3}
         height={StyleConstants.Font.LineHeight.M}
-        color={theme.shimmerDefault}
+        color={colors.shimmerDefault}
         noMargin
         style={styles.base}
       />

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

@@ -3,7 +3,6 @@ import Button from '@components/Button'
 import GracefullyImage from '@components/GracefullyImage'
 import { useNavigation } from '@react-navigation/native'
 import { StackNavigationProp } from '@react-navigation/stack'
-import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { TabLocalStackParamList } from '@utils/navigation/navigators'
 import { StyleConstants } from '@utils/styles/constants'
 import React from 'react'
@@ -20,11 +19,8 @@ const AccountInformationAvatar: React.FC<Props> = ({
   myInfo,
   edit
 }) => {
-  const navigation = useNavigation<
+  const navigation =
-    StackNavigationProp<TabLocalStackParamList>
+    useNavigation<StackNavigationProp<TabLocalStackParamList>>()
-  >()
-  const { reduceMotionEnabled } = useAccessibility()
-
   return (
     <Pressable
       disabled={!myInfo}
@@ -37,11 +33,7 @@ const AccountInformationAvatar: React.FC<Props> = ({
       <GracefullyImage
         key={account?.avatar}
         style={styles.image}
-        uri={{
+        uri={{ original: account?.avatar, static: account?.avatar_static }}
-          original: reduceMotionEnabled
-            ? account?.avatar_static
-            : account?.avatar
-        }}
       />
       {edit ? (
         <View

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

@@ -18,7 +18,7 @@ const AccountInformationCreated = React.memo(
     }
 
     const { i18n } = useTranslation()
-    const { theme } = useTheme()
+    const { colors } = useTheme()
     const { t } = useTranslation('screenTabs')
 
     if (account) {
@@ -29,12 +29,12 @@ const AccountInformationCreated = React.memo(
           <Icon
             name='Calendar'
             size={StyleConstants.Font.Size.S}
-            color={theme.secondary}
+            color={colors.secondary}
             style={styles.icon}
           />
           <Text
             style={{
-              color: theme.secondary,
+              color: colors.secondary,
               ...StyleConstants.FontStyle.S
             }}
           >
@@ -56,7 +56,7 @@ const AccountInformationCreated = React.memo(
         <PlaceholderLine
           width={StyleConstants.Font.Size.S * 4}
           height={StyleConstants.Font.LineHeight.S}
-          color={theme.shimmerDefault}
+          color={colors.shimmerDefault}
           noMargin
           style={styles.base}
         />

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

@@ -16,17 +16,17 @@ const AccountInformationFields = React.memo(
       return null
     }
 
-    const { theme } = useTheme()
+    const { colors } = useTheme()
 
     return (
-      <View style={[styles.fields, { borderTopColor: theme.border }]}>
+      <View style={[styles.fields, { borderTopColor: colors.border }]}>
         {account.fields.map((field, index) => (
           <View
             key={index}
-            style={[styles.field, { borderBottomColor: theme.border }]}
+            style={[styles.field, { borderBottomColor: colors.border }]}
           >
             <View
-              style={[styles.fieldLeft, { borderRightColor: theme.border }]}
+              style={[styles.fieldLeft, { borderRightColor: colors.border }]}
             >
               <ParseHTML
                 content={field.name}
@@ -40,7 +40,7 @@ const AccountInformationFields = React.memo(
                 <Icon
                   name='CheckCircle'
                   size={StyleConstants.Font.Size.M}
-                  color={theme.primaryDefault}
+                  color={colors.primaryDefault}
                   style={styles.fieldCheck}
                 />
               ) : null}

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

@@ -12,7 +12,7 @@ export interface Props {
 }
 
 const AccountInformationName: React.FC<Props> = ({ account, edit }) => {
-  const { theme } = useTheme()
+  const { colors } = useTheme()
 
   const movedContent = useMemo(() => {
     if (account?.moved) {
@@ -57,7 +57,7 @@ const AccountInformationName: React.FC<Props> = ({ account, edit }) => {
         <PlaceholderLine
           width={StyleConstants.Font.Size.L * 2}
           height={StyleConstants.Font.LineHeight.L}
-          color={theme.shimmerDefault}
+          color={colors.shimmerDefault}
           noMargin
           style={{ borderRadius: 0 }}
         />

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

@@ -15,17 +15,16 @@ export interface Props {
 }
 
 const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
-  const navigation = useNavigation<
+  const navigation =
-    StackNavigationProp<TabLocalStackParamList>
+    useNavigation<StackNavigationProp<TabLocalStackParamList>>()
-  >()
+  const { colors } = useTheme()
-  const { theme } = useTheme()
   const { t } = useTranslation('screenTabs')
 
   return (
     <View style={[styles.stats, { flexDirection: 'row' }]}>
       {account ? (
         <Text
-          style={[styles.stat, { color: theme.primaryDefault }]}
+          style={[styles.stat, { color: colors.primaryDefault }]}
           children={t('shared.account.summary.statuses_count', {
             count: account.statuses_count || 0
           })}
@@ -40,7 +39,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
         <PlaceholderLine
           width={StyleConstants.Font.Size.S * 1.25}
           height={StyleConstants.Font.LineHeight.S}
-          color={theme.shimmerDefault}
+          color={colors.shimmerDefault}
           noMargin
           style={{ borderRadius: 0 }}
         />
@@ -49,7 +48,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
         <Text
           style={[
             styles.stat,
-            { color: theme.primaryDefault, textAlign: 'right' }
+            { color: colors.primaryDefault, textAlign: 'right' }
           ]}
           children={t('shared.account.summary.following_count', {
             count: account.following_count
@@ -70,7 +69,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
         <PlaceholderLine
           width={StyleConstants.Font.Size.S * 1.25}
           height={StyleConstants.Font.LineHeight.S}
-          color={theme.shimmerDefault}
+          color={colors.shimmerDefault}
           noMargin
           style={{ borderRadius: 0 }}
         />
@@ -79,7 +78,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
         <Text
           style={[
             styles.stat,
-            { color: theme.primaryDefault, textAlign: 'center' }
+            { color: colors.primaryDefault, textAlign: 'center' }
           ]}
           children={t('shared.account.summary.followers_count', {
             count: account.followers_count
@@ -100,7 +99,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
         <PlaceholderLine
           width={StyleConstants.Font.Size.S * 1.25}
           height={StyleConstants.Font.LineHeight.S}
-          color={theme.shimmerDefault}
+          color={colors.shimmerDefault}
           noMargin
           style={{ borderRadius: 0 }}
         />

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

@@ -17,7 +17,7 @@ export interface Props {
 
 const AccountNav = React.memo(
   ({ scrollY, account }: Props) => {
-    const { theme } = useTheme()
+    const { colors } = useTheme()
     const headerHeight = useSafeAreaInsets().top + 44
 
     const nameY =
@@ -48,7 +48,7 @@ const AccountNav = React.memo(
         style={[
           styles.base,
           styleOpacity,
-          { backgroundColor: theme.backgroundDefault, height: headerHeight }
+          { backgroundColor: colors.backgroundDefault, height: headerHeight }
         ]}
       >
         <View