Implemented new dark theme

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 })
@@ -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

@@ -51,7 +51,7 @@ const GracefullyImage = React.memo(
     imageStyle,
     setImageDimensions
   }: Props) => {
-    const { theme } = useTheme()
+    const { colors } = useTheme()
     const [originalFailed, setOriginalFailed] = useState(false)
     const [imageLoaded, setImageLoaded] = useState(false)
 
@@ -85,7 +85,7 @@ const GracefullyImage = React.memo(
             source={{ uri: uri.preview }}
             style={[
               styles.placeholder,
-              { backgroundColor: theme.shimmerDefault }
+              { backgroundColor: colors.shimmerDefault }
             ]}
           />
         ) : null,
@@ -118,7 +118,7 @@ const GracefullyImage = React.memo(
             <View
               style={[
                 styles.placeholder,
-                { backgroundColor: theme.shimmerDefault }
+                { backgroundColor: colors.shimmerDefault }
               ]}
             />
           )
@@ -135,7 +135,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

@@ -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/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/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/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/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

src/screens/Tabs/Shared/Root.tsx

@@ -20,7 +20,7 @@ const TabSharedRoot = ({
 }: {
   Stack: ReturnType<typeof createNativeStackNavigator>
 }) => {
-  const { mode, theme } = useTheme()
+  const { colors, mode } = useTheme()
   const { t } = useTranslation('screenTabs')
 
   return (
@@ -72,7 +72,7 @@ const TabSharedRoot = ({
                     <Text
                       style={{
                         ...StyleConstants.FontStyle.M,
-                        color: theme.primaryDefault,
+                        color: colors.primaryDefault,
                         fontWeight: StyleConstants.Font.Weight.Bold
                       }}
                     />
@@ -124,7 +124,7 @@ const TabSharedRoot = ({
                   style={[
                     styles.textInput,
                     {
-                      color: theme.primaryDefault
+                      color: colors.primaryDefault
                     }
                   ]}
                   defaultValue={t('shared.search.header.prefix')}
@@ -136,7 +136,7 @@ const TabSharedRoot = ({
                     styles.textInput,
                     {
                       flex: 1,
-                      color: theme.primaryDefault,
+                      color: colors.primaryDefault,
                       paddingLeft: StyleConstants.Spacing.XS
                     }
                   ]}
@@ -150,7 +150,7 @@ const TabSharedRoot = ({
                     navigation.setParams({ text })
                   }
                   placeholder={t('shared.search.header.placeholder')}
-                  placeholderTextColor={theme.secondary}
+                  placeholderTextColor={colors.secondary}
                   returnKeyType='go'
                 />
               </View>

src/screens/Tabs/Shared/Search.tsx

@@ -26,7 +26,7 @@ const TabSharedSearch: React.FC<
   }
 }) => {
   const { t } = useTranslation('screenTabs')
-  const { theme } = useTheme()
+  const { colors } = useTheme()
 
   const mapKeyToTranslations = {
     accounts: t('shared.search.sections.accounts'),
@@ -72,7 +72,7 @@ const TabSharedSearch: React.FC<
             <View style={styles.loading}>
               <Circle
                 size={StyleConstants.Font.Size.M * 1.25}
-                color={theme.secondary}
+                color={colors.secondary}
               />
             </View>
           ) : (
@@ -81,7 +81,7 @@ const TabSharedSearch: React.FC<
                 style={[
                   styles.emptyDefault,
                   styles.emptyFontSize,
-                  { color: theme.primaryDefault }
+                  { color: colors.primaryDefault }
                 ]}
               >
                 <Trans
@@ -90,35 +90,37 @@ const TabSharedSearch: React.FC<
                 />
               </Text>
               <Text
-                style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}
+                style={[styles.emptyAdvanced, { color: colors.primaryDefault }]}
               >
                 {t('shared.search.empty.advanced.header')}
               </Text>
               <Text
-                style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}
+                style={[styles.emptyAdvanced, { color: colors.primaryDefault }]}
               >
-                <Text style={{ color: theme.secondary }}>@username@domain</Text>
+                <Text style={{ color: colors.secondary }}>
+                  @username@domain
+                </Text>
                 {'   '}
                 {t('shared.search.empty.advanced.example.account')}
               </Text>
               <Text
-                style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}
+                style={[styles.emptyAdvanced, { color: colors.primaryDefault }]}
               >
-                <Text style={{ color: theme.secondary }}>#example</Text>
+                <Text style={{ color: colors.secondary }}>#example</Text>
                 {'   '}
                 {t('shared.search.empty.advanced.example.hashtag')}
               </Text>
               <Text
-                style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}
+                style={[styles.emptyAdvanced, { color: colors.primaryDefault }]}
               >
-                <Text style={{ color: theme.secondary }}>URL</Text>
+                <Text style={{ color: colors.secondary }}>URL</Text>
                 {'   '}
                 {t('shared.search.empty.advanced.example.statusLink')}
               </Text>
               <Text
-                style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}
+                style={[styles.emptyAdvanced, { color: colors.primaryDefault }]}
               >
-                <Text style={{ color: theme.secondary }}>URL</Text>
+                <Text style={{ color: colors.secondary }}>URL</Text>
                 {'   '}
                 {t('shared.search.empty.advanced.example.accountLink')}
               </Text>
@@ -133,11 +135,11 @@ const TabSharedSearch: React.FC<
       <View
         style={[
           styles.sectionHeader,
-          { backgroundColor: theme.backgroundDefault }
+          { backgroundColor: colors.backgroundDefault }
         ]}
       >
         <Text
-          style={[styles.sectionHeaderText, { color: theme.primaryDefault }]}
+          style={[styles.sectionHeaderText, { color: colors.primaryDefault }]}
         >
           {translation}
         </Text>
@@ -151,10 +153,10 @@ const TabSharedSearch: React.FC<
         <View
           style={[
             styles.sectionFooter,
-            { backgroundColor: theme.backgroundDefault }
+            { backgroundColor: colors.backgroundDefault }
           ]}
         >
-          <Text style={[styles.sectionFooterText, { color: theme.secondary }]}>
+          <Text style={[styles.sectionFooterText, { color: colors.secondary }]}>
             <Trans
               i18nKey='screenTabs:shared.search.notFound'
               values={{ searchTerm: text, type: translation }}

src/store.ts

@@ -3,6 +3,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage'
 import { AnyAction, configureStore, Reducer } from '@reduxjs/toolkit'
 import contextsMigration from '@utils/migrations/contexts/migration'
 import instancesMigration from '@utils/migrations/instances/migration'
+import settingsMigration from '@utils/migrations/settings/migration'
 import contextsSlice, { ContextsState } from '@utils/slices/contextsSlice'
 import instancesSlice, { InstancesState } from '@utils/slices/instancesSlice'
 import settingsSlice, { SettingsState } from '@utils/slices/settingsSlice'
@@ -17,7 +18,7 @@ const contextsPersistConfig = {
   key: 'contexts',
   prefix,
   storage: AsyncStorage,
-  version: 1,
+  version: 2,
   // @ts-ignore
   migrate: createMigrate(contextsMigration)
 }
@@ -34,7 +35,10 @@ const instancesPersistConfig = {
 const settingsPersistConfig = {
   key: 'settings',
   prefix,
-  storage: AsyncStorage
+  storage: AsyncStorage,
+  version: 1,
+  // @ts-ignore
+  migrate: createMigrate(settingsMigration)
 }
 
 const store = configureStore({

src/utils/migrations/contexts/migration.ts

@@ -1,21 +1,20 @@
 import { ContextsV0 } from './v0'
 import { ContextsV1 } from './v1'
+import { ContextsV2 } from './v2'
 
 const contextsMigration = {
-  1: (state: ContextsV0) => {
+  1: (state: ContextsV0): ContextsV1 => {
-    return (state = {
+    return {
       ...state,
-      // @ts-ignore
       mePage: {
         lists: { shown: false },
         announcements: { shown: false, unread: 0 }
       }
-    })
+    }
   },
-  2: (state: ContextsV1) => {
+  2: (state: ContextsV1): ContextsV2 => {
-    // @ts-ignore
+    const { mePage, ...rest } = state
-    delete state.mePage
+    return rest
-    return state
   }
 }
 

src/utils/migrations/contexts/v2.ts

@@ -0,0 +1,13 @@
+export type ContextsV2 = {
+  storeReview: {
+    context: Readonly<number>
+    current: number
+    shown: boolean
+  }
+  publicRemoteNotice: {
+    context: Readonly<number>
+    current: number
+    hidden: boolean
+  }
+  previousTab: 'Tab-Local' | 'Tab-Public' | 'Tab-Notifications' | 'Tab-Me'
+}

src/utils/migrations/instances/migration.ts

@@ -2,15 +2,15 @@ import { InstanceV3 } from './v3'
 import { InstanceV4 } from './v4'
 import { InstanceV5 } from './v5'
 import { InstanceV6 } from './v6'
+import { InstanceV7 } from './v7'
 
 const instancesMigration = {
-  4: (state: InstanceV3) => {
+  4: (state: InstanceV3): InstanceV4 => {
     return {
       instances: state.local.instances.map((instance, index) => {
-        // @ts-ignore
+        const { notification, ...rest } = instance
-        delete instance.notification
         return {
-          ...instance,
+          ...rest,
           active: state.local.activeIndex === index,
           push: {
             global: { loading: false, value: false },
@@ -28,35 +28,42 @@ const instancesMigration = {
       })
     }
   },
-  5: (state: InstanceV4) => {
+  5: (state: InstanceV4): InstanceV5 => {
     // @ts-ignore
     if (state.instances.length && !state.instances[0].notifications_filter) {
       return {
+        // @ts-ignore
         instances: state.instances.map(instance => {
-          // @ts-ignore
+          return {
-          instance.notifications_filter = {
+            ...instance,
-            follow: true,
+            notifications_filter: {
-            favourite: true,
+              follow: true,
-            reblog: true,
+              favourite: true,
-            mention: true,
+              reblog: true,
-            poll: true,
+              mention: true,
-            follow_request: true
+              poll: true,
+              follow_request: true
+            }
           }
-          return instance
         })
       }
     } else {
+      // @ts-ignore
       return state
     }
   },
-  6: (state: InstanceV5) => {
+  6: (state: InstanceV5): InstanceV6 => {
     return {
+      // @ts-ignore
       instances: state.instances.map(instance => {
-        return { ...instance, configuration: undefined }
+        return {
+          ...instance,
+          configuration: undefined
+        }
       })
     }
   },
-  7: (state: InstanceV6) => {
+  7: (state: InstanceV6): InstanceV7 => {
     return {
       instances: state.instances.map(instance => {
         return {

src/utils/migrations/instances/v7.ts

@@ -0,0 +1,77 @@
+import { ComposeStateDraft } from '@screens/Compose/utils/types'
+import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
+
+type Instance = {
+  active: boolean
+  appData: {
+    clientId: string
+    clientSecret: string
+  }
+  url: string
+  token: string
+  uri: Mastodon.Instance['uri']
+  urls: Mastodon.Instance['urls']
+  account: {
+    id: Mastodon.Account['id']
+    acct: Mastodon.Account['acct']
+    avatarStatic: Mastodon.Account['avatar_static']
+    preferences: Mastodon.Preferences
+  }
+  max_toot_chars?: number // To be deprecated in v4
+  configuration?: Mastodon.Instance['configuration']
+  filters: Mastodon.Filter[]
+  notifications_filter: {
+    follow: boolean
+    favourite: boolean
+    reblog: boolean
+    mention: boolean
+    poll: boolean
+    follow_request: boolean
+  }
+  push: {
+    global: { loading: boolean; value: boolean }
+    decode: { loading: boolean; value: boolean }
+    alerts: {
+      follow: {
+        loading: boolean
+        value: Mastodon.PushSubscription['alerts']['follow']
+      }
+      favourite: {
+        loading: boolean
+        value: Mastodon.PushSubscription['alerts']['favourite']
+      }
+      reblog: {
+        loading: boolean
+        value: Mastodon.PushSubscription['alerts']['reblog']
+      }
+      mention: {
+        loading: boolean
+        value: Mastodon.PushSubscription['alerts']['mention']
+      }
+      poll: {
+        loading: boolean
+        value: Mastodon.PushSubscription['alerts']['poll']
+      }
+    }
+    keys: {
+      auth?: string
+      public?: string // legacy
+      private?: string // legacy
+    }
+  }
+  timelinesLookback?: {
+    [key: string]: {
+      queryKey: QueryKeyTimeline
+      ids: Mastodon.Status['id'][]
+    }
+  }
+  mePage: {
+    lists: { shown: boolean }
+    announcements: { shown: boolean; unread: number }
+  }
+  drafts: ComposeStateDraft[]
+}
+
+export type InstanceV7 = {
+  instances: Instance[]
+}