diff --git a/src/@types/react-navigation.d.ts b/src/@types/react-navigation.d.ts
index a87a6078..58d7b2f1 100644
--- a/src/@types/react-navigation.d.ts
+++ b/src/@types/react-navigation.d.ts
@@ -1,4 +1,6 @@
 declare namespace Nav {
+  import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
+
   type RootStackParamList = {
     'Screen-Tabs': undefined
     'Screen-Actions':
@@ -90,7 +92,7 @@ declare namespace Nav {
     'Tab-Shared-Search': { text: string | undefined }
     'Tab-Shared-Toot': {
       toot: Mastodon.Status
-      rootQueryKey: any
+      rootQueryKey?: QueryKeyTimeline
     }
     'Tab-Shared-Users':
       | {
diff --git a/src/Screens.tsx b/src/Screens.tsx
index f63b52ac..f5c9c232 100644
--- a/src/Screens.tsx
+++ b/src/Screens.tsx
@@ -144,7 +144,7 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
 
   return (
     <>
-      <StatusBar barStyle={barStyle[mode]} backgroundColor={theme.background} />
+      <StatusBar barStyle={barStyle[mode]} backgroundColor={theme.backgroundDefault} />
       <NavigationContainer
         ref={navigationRef}
         theme={themes[mode]}
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 714f58ba..8efb28c2 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -81,7 +81,7 @@ const Button: React.FC<Props> = ({
           if (destructive) {
             return theme.red
           } else {
-            return theme.primary
+            return theme.primaryDefault
           }
         }
       }
@@ -97,16 +97,16 @@ const Button: React.FC<Props> = ({
         if (destructive) {
           return theme.red
         } else {
-          return theme.primary
+          return theme.primaryDefault
         }
       }
     }
   }, [mode, loading, disabled])
   const colorBackground = useMemo(() => {
     if (overlay) {
-      return theme.backgroundOverlay
+      return theme.backgroundOverlayInvert
     } else {
-      return theme.background
+      return theme.backgroundDefault
     }
   }, [mode])
 
diff --git a/src/components/Hashtag.tsx b/src/components/Hashtag.tsx
index ebc45430..914896a4 100644
--- a/src/components/Hashtag.tsx
+++ b/src/components/Hashtag.tsx
@@ -29,7 +29,7 @@ const ComponentHashtag: React.FC<Props> = ({
 
   return (
     <Pressable style={styles.itemDefault} onPress={customOnPress || onPress}>
-      <Text style={[styles.itemHashtag, { color: theme.primary }]}>
+      <Text style={[styles.itemHashtag, { color: theme.primaryDefault }]}>
         #{hashtag.name}
       </Text>
     </Pressable>
diff --git a/src/components/Header/Center.tsx b/src/components/Header/Center.tsx
index 6edae7aa..74c93c25 100644
--- a/src/components/Header/Center.tsx
+++ b/src/components/Header/Center.tsx
@@ -17,7 +17,7 @@ const HeaderCenter = React.memo(
       <Text
         style={[
           styles.text,
-          { color: inverted ? theme.primaryOverlay : theme.primary }
+          { color: inverted ? theme.primaryOverlay : theme.primaryDefault }
         ]}
         children={content}
       />
diff --git a/src/components/Header/Left.tsx b/src/components/Header/Left.tsx
index 7fea3d82..4269383b 100644
--- a/src/components/Header/Left.tsx
+++ b/src/components/Header/Left.tsx
@@ -25,7 +25,7 @@ const HeaderLeft: React.FC<Props> = ({
       case 'icon':
         return (
           <Icon
-            color={theme.primary}
+            color={theme.primaryDefault}
             name={content || 'ChevronLeft'}
             size={StyleConstants.Spacing.M * 1.25}
           />
@@ -33,7 +33,7 @@ const HeaderLeft: React.FC<Props> = ({
       case 'text':
         return (
           <Text
-            style={[styles.text, { color: theme.primary }]}
+            style={[styles.text, { color: theme.primaryDefault }]}
             children={content}
           />
         )
@@ -47,7 +47,7 @@ const HeaderLeft: React.FC<Props> = ({
       style={[
         styles.base,
         {
-          backgroundColor: theme.backgroundGradientStart,
+          backgroundColor: theme.backgroundOverlayDefault,
           ...(type === 'icon' && {
             height: 44,
             width: 44,
diff --git a/src/components/Header/Right.tsx b/src/components/Header/Right.tsx
index 81438a6e..1e40f44a 100644
--- a/src/components/Header/Right.tsx
+++ b/src/components/Header/Right.tsx
@@ -47,7 +47,7 @@ const HeaderRight: React.FC<Props> = ({
               name={content}
               style={{ opacity: loading ? 0 : 1 }}
               size={StyleConstants.Spacing.M * 1.25}
-              color={disabled ? theme.secondary : theme.primary}
+              color={disabled ? theme.secondary : theme.primaryDefault}
             />
             {loading && loadingSpinkit}
           </>
@@ -59,7 +59,7 @@ const HeaderRight: React.FC<Props> = ({
               style={[
                 styles.text,
                 {
-                  color: disabled ? theme.secondary : theme.primary,
+                  color: disabled ? theme.secondary : theme.primaryDefault,
                   opacity: loading ? 0 : 1
                 }
               ]}
@@ -79,7 +79,7 @@ const HeaderRight: React.FC<Props> = ({
       style={[
         styles.base,
         {
-          backgroundColor: theme.backgroundGradientStart,
+          backgroundColor: theme.backgroundOverlayDefault,
           ...(type === 'icon' && {
             height: 44,
             width: 44,
diff --git a/src/components/Instance.tsx b/src/components/Instance.tsx
index c880c972..deba3c5d 100644
--- a/src/components/Instance.tsx
+++ b/src/components/Instance.tsx
@@ -142,7 +142,7 @@ const ComponentInstance: React.FC<Props> = ({
             style={[
               styles.textInput,
               {
-                color: theme.primary,
+                color: theme.primaryDefault,
                 borderBottomColor: instanceQuery.isError
                   ? theme.red
                   : theme.border
diff --git a/src/components/Instance/Info.tsx b/src/components/Instance/Info.tsx
index b651e90f..b0286465 100644
--- a/src/components/Instance/Info.tsx
+++ b/src/components/Instance/Info.tsx
@@ -17,9 +17,9 @@ const InstanceInfo = React.memo(
 
     return (
       <View style={[styles.base, style]}>
-        <Text style={[styles.header, { color: theme.primary }]}>{header}</Text>
+        <Text style={[styles.header, { color: theme.primaryDefault }]}>{header}</Text>
         {content ? (
-          <Text style={[styles.content, { color: theme.primary }]}>
+          <Text style={[styles.content, { color: theme.primaryDefault }]}>
             {content}
           </Text>
         ) : (
diff --git a/src/components/Menu/Row.tsx b/src/components/Menu/Row.tsx
index f8664cae..d728849f 100644
--- a/src/components/Menu/Row.tsx
+++ b/src/components/Menu/Row.tsx
@@ -28,7 +28,7 @@ export interface Props {
 
 const MenuRow: React.FC<Props> = ({
   iconFront,
-  iconFrontColor = 'primary',
+  iconFrontColor = 'primaryDefault',
   title,
   description,
   content,
@@ -73,7 +73,7 @@ const MenuRow: React.FC<Props> = ({
             )}
             <View style={styles.main}>
               <Text
-                style={[styles.title, { color: theme.primary }]}
+                style={[styles.title, { color: theme.primaryDefault }]}
                 numberOfLines={1}
               >
                 {title}
diff --git a/src/components/Message.tsx b/src/components/Message.tsx
index 83053d13..bb80e29c 100644
--- a/src/components/Message.tsx
+++ b/src/components/Message.tsx
@@ -87,18 +87,18 @@ const Message = React.memo(
         position='top'
         floating
         style={{
-          backgroundColor: theme.background,
-          shadowColor: theme.primary,
+          backgroundColor: theme.backgroundDefault,
+          shadowColor: theme.primaryDefault,
           shadowOffset: { width: 0, height: 0 },
           shadowOpacity: mode === 'light' ? 0.16 : 0.24,
           shadowRadius: 4
         }}
         titleStyle={{
-          color: theme.primary,
+          color: theme.primaryDefault,
           ...StyleConstants.FontStyle.M,
           fontWeight: StyleConstants.Font.Weight.Bold
         }}
-        textStyle={{ color: theme.primary, ...StyleConstants.FontStyle.S }}
+        textStyle={{ color: theme.primaryDefault, ...StyleConstants.FontStyle.S }}
         // @ts-ignore
         textProps={{ numberOfLines: 2 }}
       />
diff --git a/src/components/Parse/Emojis.tsx b/src/components/Parse/Emojis.tsx
index c27d4407..9e2e3130 100644
--- a/src/components/Parse/Emojis.tsx
+++ b/src/components/Parse/Emojis.tsx
@@ -38,7 +38,7 @@ const ParseEmojis = React.memo(
     const styles = useMemo(() => {
       return StyleSheet.create({
         text: {
-          color: theme.primary,
+          color: theme.primaryDefault,
           fontSize: adaptedFontsize,
           lineHeight: adaptedLineheight,
           ...(fontBold && { fontWeight: StyleConstants.Font.Weight.Bold })
diff --git a/src/components/Parse/HTML.tsx b/src/components/Parse/HTML.tsx
index 456daf09..3a1f6449 100644
--- a/src/components/Parse/HTML.tsx
+++ b/src/components/Parse/HTML.tsx
@@ -83,7 +83,7 @@ const renderNode = ({
             <Text
               key={index}
               style={{
-                color: accountIndex !== -1 ? theme.blue : theme.primary,
+                color: accountIndex !== -1 ? theme.blue : theme.primaryDefault,
                 fontSize: adaptedFontsize,
                 lineHeight: adaptedLineheight
               }}
@@ -258,14 +258,14 @@ const ParseHTML = React.memo(
                   justifyContent: 'center',
                   marginTop: expanded ? 0 : -adaptedLineheight,
                   minHeight: 44,
-                  backgroundColor: theme.background
+                  backgroundColor: theme.backgroundDefault
                 }}
               >
                 <Text
                   style={{
                     textAlign: 'center',
                     ...StyleConstants.FontStyle.S,
-                    color: theme.primary
+                    color: theme.primaryDefault
                   }}
                   children={t(`HTML.expanded.${expanded.toString()}`, {
                     hint: expandHint
diff --git a/src/components/Separator.tsx b/src/components/Separator.tsx
index 2b10db67..6cf64835 100644
--- a/src/components/Separator.tsx
+++ b/src/components/Separator.tsx
@@ -15,7 +15,7 @@ const ComponentSeparator = React.memo(
     return (
       <View
         style={{
-          backgroundColor: theme.background,
+          backgroundColor: theme.backgroundDefault,
           borderTopColor: theme.border,
           borderTopWidth: StyleSheet.hairlineWidth,
           marginLeft:
diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
index 9d899358..c485485f 100644
--- a/src/components/Timeline.tsx
+++ b/src/components/Timeline.tsx
@@ -115,8 +115,8 @@ const Timeline: React.FC<Props> = ({
       refreshControl: (
         <RefreshControl
           enabled
-          colors={[theme.primary]}
-          progressBackgroundColor={theme.background}
+          colors={[theme.primaryDefault]}
+          progressBackgroundColor={theme.backgroundDefault}
           refreshing={isFetching || isLoading}
           onRefresh={() => refetch()}
         />
diff --git a/src/components/Timeline/Conversation.tsx b/src/components/Timeline/Conversation.tsx
index eb10058d..871709bb 100644
--- a/src/components/Timeline/Conversation.tsx
+++ b/src/components/Timeline/Conversation.tsx
@@ -95,7 +95,7 @@ const TimelineConversation: React.FC<Props> = ({
     <Pressable
       style={[
         styles.base,
-        { backgroundColor: theme.background },
+        { backgroundColor: theme.backgroundDefault },
         conversation.unread && {
           borderLeftWidth: StyleConstants.Spacing.XS,
           borderLeftColor: theme.blue,
diff --git a/src/components/Timeline/Default.tsx b/src/components/Timeline/Default.tsx
index 0c8f5c39..625b998f 100644
--- a/src/components/Timeline/Default.tsx
+++ b/src/components/Timeline/Default.tsx
@@ -65,7 +65,7 @@ const TimelineDefault: React.FC<Props> = ({
       style={[
         styles.statusView,
         {
-          backgroundColor: theme.background,
+          backgroundColor: theme.backgroundDefault,
           paddingBottom:
             disableDetails && disableOnPress
               ? StyleConstants.Spacing.Global.PagePadding
diff --git a/src/components/Timeline/Empty.tsx b/src/components/Timeline/Empty.tsx
index afaa9376..18d9378a 100644
--- a/src/components/Timeline/Empty.tsx
+++ b/src/components/Timeline/Empty.tsx
@@ -35,9 +35,9 @@ const TimelineEmpty = React.memo(
               <Icon
                 name='Frown'
                 size={StyleConstants.Font.Size.L}
-                color={theme.primary}
+                color={theme.primaryDefault}
               />
-              <Text style={[styles.error, { color: theme.primary }]}>
+              <Text style={[styles.error, { color: theme.primaryDefault }]}>
                 {t('empty.error.message')}
               </Text>
               <Button
@@ -56,9 +56,9 @@ const TimelineEmpty = React.memo(
               <Icon
                 name='Smartphone'
                 size={StyleConstants.Font.Size.L}
-                color={theme.primary}
+                color={theme.primaryDefault}
               />
-              <Text style={[styles.error, { color: theme.primary }]}>
+              <Text style={[styles.error, { color: theme.primaryDefault }]}>
                 {t('empty.success.message')}
               </Text>
             </>
@@ -67,7 +67,7 @@ const TimelineEmpty = React.memo(
     }, [mode, i18n.language, status])
     return (
       <View
-        style={[styles.base, { backgroundColor: theme.background }]}
+        style={[styles.base, { backgroundColor: theme.backgroundDefault }]}
         children={children}
       />
     )
diff --git a/src/components/Timeline/Notifications.tsx b/src/components/Timeline/Notifications.tsx
index 76420b21..005f2970 100644
--- a/src/components/Timeline/Notifications.tsx
+++ b/src/components/Timeline/Notifications.tsx
@@ -56,7 +56,7 @@ const TimelineNotifications: React.FC<Props> = ({
       style={[
         styles.notificationView,
         {
-          backgroundColor: theme.background,
+          backgroundColor: theme.backgroundDefault,
           paddingBottom: notification.status
             ? 0
             : StyleConstants.Spacing.Global.PagePadding
diff --git a/src/components/Timeline/Refresh.tsx b/src/components/Timeline/Refresh.tsx
index 20109ce8..51f22420 100644
--- a/src/components/Timeline/Refresh.tsx
+++ b/src/components/Timeline/Refresh.tsx
@@ -254,7 +254,7 @@ const TimelineRefresh: React.FC<Props> = ({
           <>
             <View style={styles.container1}>
               <Text
-                style={[styles.explanation, { color: theme.primary }]}
+                style={[styles.explanation, { color: theme.primaryDefault }]}
                 onLayout={onLayout}
                 children={t('refresh.fetchPreviousPage')}
               />
@@ -271,14 +271,14 @@ const TimelineRefresh: React.FC<Props> = ({
                   <Icon
                     name='ArrowLeft'
                     size={StyleConstants.Font.Size.M}
-                    color={theme.primary}
+                    color={theme.primaryDefault}
                   />
                 }
               />
             </View>
             <View style={styles.container2}>
               <Text
-                style={[styles.explanation, { color: theme.primary }]}
+                style={[styles.explanation, { color: theme.primaryDefault }]}
                 onLayout={onLayout}
                 children={t('refresh.refetch')}
               />
diff --git a/src/components/Timeline/Shared/Actioned.tsx b/src/components/Timeline/Shared/Actioned.tsx
index 2af586f8..d637dd2c 100644
--- a/src/components/Timeline/Shared/Actioned.tsx
+++ b/src/components/Timeline/Shared/Actioned.tsx
@@ -23,7 +23,7 @@ const TimelineActioned = React.memo(
       StackNavigationProp<Nav.TabLocalStackParamList>
     >()
     const name = account.display_name || account.username
-    const iconColor = theme.primary
+    const iconColor = theme.primaryDefault
 
     const content = (content: string) => (
       <ParseEmojis content={content} emojis={account.emojis} size='S' />
diff --git a/src/components/Timeline/Shared/Actions.tsx b/src/components/Timeline/Shared/Actions.tsx
index 89417f1d..402211e2 100644
--- a/src/components/Timeline/Shared/Actions.tsx
+++ b/src/components/Timeline/Shared/Actions.tsx
@@ -30,7 +30,7 @@ const TimelineActions = React.memo(
     const { mode, theme } = useTheme()
     const iconColor = theme.secondary
     const iconColorAction = (state: boolean) =>
-      state ? theme.primary : theme.secondary
+      state ? theme.primaryDefault : theme.secondary
 
     const queryClient = useQueryClient()
     const mutation = useTimelineMutation({
@@ -194,22 +194,23 @@ const TimelineActions = React.memo(
       ),
       [status.replies_count]
     )
-    const childrenReblog = useMemo(
-      () => (
+    const childrenReblog = useMemo(() => {
+      const color = (state: boolean) => (state ? theme.green : theme.secondary)
+      return (
         <>
           <Icon
             name='Repeat'
             color={
               status.visibility === 'private' || status.visibility === 'direct'
                 ? theme.disabled
-                : iconColorAction(status.reblogged)
+                : color(status.reblogged)
             }
             size={StyleConstants.Font.Size.L}
           />
           {status.reblogs_count > 0 && (
             <Text
               style={{
-                color: iconColorAction(status.reblogged),
+                color: color(status.reblogged),
                 fontSize: StyleConstants.Font.Size.M,
                 marginLeft: StyleConstants.Spacing.XS
               }}
@@ -218,21 +219,21 @@ const TimelineActions = React.memo(
             </Text>
           )}
         </>
-      ),
-      [status.reblogged, status.reblogs_count]
-    )
-    const childrenFavourite = useMemo(
-      () => (
+      )
+    }, [status.reblogged, status.reblogs_count])
+    const childrenFavourite = useMemo(() => {
+      const color = (state: boolean) => (state ? theme.red : theme.secondary)
+      return (
         <>
           <Icon
             name='Heart'
-            color={iconColorAction(status.favourited)}
+            color={color(status.favourited)}
             size={StyleConstants.Font.Size.L}
           />
           {status.favourites_count > 0 && (
             <Text
               style={{
-                color: iconColorAction(status.favourited),
+                color: color(status.favourited),
                 fontSize: StyleConstants.Font.Size.M,
                 marginLeft: StyleConstants.Spacing.XS,
                 marginTop: 0
@@ -242,19 +243,18 @@ const TimelineActions = React.memo(
             </Text>
           )}
         </>
-      ),
-      [status.favourited, status.favourites_count]
-    )
-    const childrenBookmark = useMemo(
-      () => (
+      )
+    }, [status.favourited, status.favourites_count])
+    const childrenBookmark = useMemo(() => {
+      const color = (state: boolean) => (state ? theme.yellow : theme.secondary)
+      return (
         <Icon
           name='Bookmark'
-          color={iconColorAction(status.bookmarked)}
+          color={color(status.bookmarked)}
           size={StyleConstants.Font.Size.L}
         />
-      ),
-      [status.bookmarked]
-    )
+      )
+    }, [status.bookmarked])
 
     return (
       <View
diff --git a/src/components/Timeline/Shared/Attachment/Audio.tsx b/src/components/Timeline/Shared/Attachment/Audio.tsx
index 6474de40..cc904d72 100644
--- a/src/components/Timeline/Shared/Attachment/Audio.tsx
+++ b/src/components/Timeline/Shared/Attachment/Audio.tsx
@@ -100,7 +100,7 @@ const AttachmentAudio: React.FC<Props> = ({
           alignSelf: 'flex-end',
           width: '100%',
           height: StyleConstants.Spacing.M + StyleConstants.Spacing.S * 2,
-          backgroundColor: theme.backgroundOverlay,
+          backgroundColor: theme.backgroundOverlayInvert,
           paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
           borderRadius: 100,
           opacity: sensitiveShown ? 0.35 : undefined
diff --git a/src/components/Timeline/Shared/Attachment/Unsupported.tsx b/src/components/Timeline/Shared/Attachment/Unsupported.tsx
index 8c47a1ba..241f2362 100644
--- a/src/components/Timeline/Shared/Attachment/Unsupported.tsx
+++ b/src/components/Timeline/Shared/Attachment/Unsupported.tsx
@@ -47,7 +47,7 @@ const AttachmentUnsupported: React.FC<Props> = ({
           <Text
             style={[
               styles.text,
-              { color: attachment.blurhash ? theme.background : theme.primary }
+              { color: attachment.blurhash ? theme.backgroundDefault : theme.primaryDefault }
             ]}
           >
             {t('shared.attachment.unsupported.text')}
diff --git a/src/components/Timeline/Shared/Card.tsx b/src/components/Timeline/Shared/Card.tsx
index 3b2780a8..35f35d27 100644
--- a/src/components/Timeline/Shared/Card.tsx
+++ b/src/components/Timeline/Shared/Card.tsx
@@ -34,7 +34,7 @@ const TimelineCard = React.memo(
         <View style={styles.right}>
           <Text
             numberOfLines={2}
-            style={[styles.rightTitle, { color: theme.primary }]}
+            style={[styles.rightTitle, { color: theme.primaryDefault }]}
             testID='title'
           >
             {card.title}
@@ -42,7 +42,7 @@ const TimelineCard = React.memo(
           {card.description ? (
             <Text
               numberOfLines={1}
-              style={[styles.rightDescription, { color: theme.primary }]}
+              style={[styles.rightDescription, { color: theme.primaryDefault }]}
               testID='description'
             >
               {card.description}
diff --git a/src/components/Timeline/Shared/Poll.tsx b/src/components/Timeline/Shared/Poll.tsx
index 6b353936..8e2edc59 100644
--- a/src/components/Timeline/Shared/Poll.tsx
+++ b/src/components/Timeline/Shared/Poll.tsx
@@ -186,7 +186,7 @@ const TimelinePoll: React.FC<Props> = ({
           <Text style={styles.optionText}>
             <ParseEmojis content={option.title} emojis={poll.emojis} />
           </Text>
-          <Text style={[styles.optionPercentage, { color: theme.primary }]}>
+          <Text style={[styles.optionPercentage, { color: theme.primaryDefault }]}>
             {poll.votes_count
               ? Math.round(
                   (option.votes_count /
@@ -246,7 +246,7 @@ const TimelinePoll: React.FC<Props> = ({
             style={styles.optionSelection}
             name={isSelected(index)}
             size={StyleConstants.Font.Size.M}
-            color={theme.primary}
+            color={theme.primaryDefault}
           />
           <Text style={styles.optionText}>
             <ParseEmojis content={option.title} emojis={poll.emojis} />
diff --git a/src/screens/Actions/Root.tsx b/src/screens/Actions/Root.tsx
index ee14ed61..e4f92487 100644
--- a/src/screens/Actions/Root.tsx
+++ b/src/screens/Actions/Root.tsx
@@ -185,7 +185,7 @@ const ScreenActionsRoot = React.memo(
           <Animated.View
             style={[
               styles.overlay,
-              { backgroundColor: theme.backgroundOverlay }
+              { backgroundColor: theme.backgroundOverlayInvert }
             ]}
           >
             <PanGestureHandler onGestureEvent={onGestureEvent}>
@@ -194,7 +194,7 @@ const ScreenActionsRoot = React.memo(
                   styles.container,
                   styleTop,
                   {
-                    backgroundColor: theme.background,
+                    backgroundColor: theme.backgroundDefault,
                     paddingBottom: insets.bottom || StyleConstants.Spacing.L
                   }
                 ]}
diff --git a/src/screens/Announcements.tsx b/src/screens/Announcements.tsx
index 3b89674b..555b539f 100644
--- a/src/screens/Announcements.tsx
+++ b/src/screens/Announcements.tsx
@@ -74,8 +74,8 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
           style={[
             styles.announcement,
             {
-              borderColor: theme.primary,
-              backgroundColor: theme.background
+              borderColor: theme.primaryDefault,
+              backgroundColor: theme.backgroundDefault
             }
           ]}
         >
@@ -102,10 +102,10 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
                   style={[
                     styles.reaction,
                     {
-                      borderColor: reaction.me ? theme.disabled : theme.primary,
+                      borderColor: reaction.me ? theme.disabled : theme.primaryDefault,
                       backgroundColor: reaction.me
                         ? theme.disabled
-                        : theme.background
+                        : theme.backgroundDefault
                     }
                   ]}
                   onPress={() => {
@@ -130,7 +130,7 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
                   )}
                   {reaction.count ? (
                     <Text
-                      style={[styles.reactionCount, { color: theme.primary }]}
+                      style={[styles.reactionCount, { color: theme.primaryDefault }]}
                     >
                       {reaction.count}
                     </Text>
@@ -138,13 +138,13 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
                 </Pressable>
               ))}
               {/* <Pressable
-                style={[styles.reaction, { borderColor: theme.primary }]}
+                style={[styles.reaction, { borderColor: theme.primaryDefault }]}
                 onPress={() => invisibleTextInputRef.current?.focus()}
               >
                 <Icon
                   name='Plus'
                   size={StyleConstants.Font.Size.M}
-                  color={theme.primary}
+                  color={theme.primaryDefault}
                 />
               </Pressable> */}
             </View>
@@ -202,7 +202,7 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
       blurType={mode}
       blurAmount={20}
       style={styles.base}
-      reducedTransparencyFallbackColor={theme.background}
+      reducedTransparencyFallbackColor={theme.backgroundDefault}
     >
       <SafeAreaView style={styles.base}>
         <View
@@ -245,8 +245,8 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
                   style={[
                     styles.indicator,
                     {
-                      borderColor: theme.primary,
-                      backgroundColor: i === index ? theme.primary : undefined,
+                      borderColor: theme.primaryDefault,
+                      backgroundColor: i === index ? theme.primaryDefault : undefined,
                       marginLeft:
                         i === query.data.length ? 0 : StyleConstants.Spacing.S
                     }
diff --git a/src/screens/Compose/DraftsList/Root.tsx b/src/screens/Compose/DraftsList/Root.tsx
index 0213e8c3..23bf5acb 100644
--- a/src/screens/Compose/DraftsList/Root.tsx
+++ b/src/screens/Compose/DraftsList/Root.tsx
@@ -55,7 +55,7 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
     ({ item }: { item: ComposeStateDraft }) => {
       return (
         <Pressable
-          style={[styles.draft, { backgroundColor: theme.background }]}
+          style={[styles.draft, { backgroundColor: theme.backgroundDefault }]}
           onPress={async () => {
             setCheckingAttachments(true)
             let tempDraft = item
@@ -103,7 +103,7 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
             <HeaderSharedCreated created_at={item.timestamp} />
             <Text
               numberOfLines={2}
-              style={[styles.text, { color: theme.primary }]}
+              style={[styles.text, { color: theme.primaryDefault }]}
             >
               {item.text ||
                 item.spoiler ||
@@ -181,7 +181,7 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
         visible={checkingAttachments}
         children={
           <View
-            style={[styles.modal, { backgroundColor: theme.backgroundOverlay }]}
+            style={[styles.modal, { backgroundColor: theme.backgroundOverlayInvert }]}
             children={
               <Text
                 children='检查附件在服务器的状态…'
diff --git a/src/screens/Compose/EditAttachment/Image.tsx b/src/screens/Compose/EditAttachment/Image.tsx
index 3bdcaf33..eeb6ac1c 100644
--- a/src/screens/Compose/EditAttachment/Image.tsx
+++ b/src/screens/Compose/EditAttachment/Image.tsx
@@ -144,7 +144,7 @@ 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.backgroundOverlay}
+                    fill={theme.backgroundOverlayInvert}
                   />
                   <Circle
                     stroke={theme.primaryOverlay}
@@ -160,7 +160,7 @@ const ComposeEditAttachmentImage: React.FC<Props> = ({ index }) => {
           </Animated.View>
         </PanGestureHandler>
       </View>
-      <Text style={[styles.imageFocusText, { color: theme.primary }]}>
+      <Text style={[styles.imageFocusText, { color: theme.primaryDefault }]}>
         {t('content.editAttachment.content.imageFocus')}
       </Text>
     </>
diff --git a/src/screens/Compose/EditAttachment/Root.tsx b/src/screens/Compose/EditAttachment/Root.tsx
index e6dd3c18..51f31c35 100644
--- a/src/screens/Compose/EditAttachment/Root.tsx
+++ b/src/screens/Compose/EditAttachment/Root.tsx
@@ -61,13 +61,13 @@ const ComposeEditAttachmentRoot: React.FC<Props> = ({ index }) => {
     <ScrollView ref={scrollViewRef}>
       {mediaDisplay}
       <View style={styles.altTextContainer}>
-        <Text style={[styles.altTextInputHeading, { color: theme.primary }]}>
+        <Text style={[styles.altTextInputHeading, { color: theme.primaryDefault }]}>
           {t('content.editAttachment.content.altText.heading')}
         </Text>
         <TextInput
           style={[
             styles.altTextInput,
-            { borderColor: theme.border, color: theme.primary }
+            { borderColor: theme.border, color: theme.primaryDefault }
           ]}
           onFocus={() => scrollViewRef.current?.scrollToEnd()}
           autoCapitalize='none'
diff --git a/src/screens/Compose/Posting.tsx b/src/screens/Compose/Posting.tsx
index c3225d7f..f7a23e43 100644
--- a/src/screens/Compose/Posting.tsx
+++ b/src/screens/Compose/Posting.tsx
@@ -14,7 +14,7 @@ const ComposePosting = React.memo(
         animationType='fade'
         visible={composeState.posting}
         children={
-          <View style={{ flex: 1, backgroundColor: theme.backgroundOverlay }} />
+          <View style={{ flex: 1, backgroundColor: theme.backgroundOverlayInvert }} />
         }
       />
     )
diff --git a/src/screens/Compose/Root/Actions.tsx b/src/screens/Compose/Root/Actions.tsx
index a498099d..b1a9a9d3 100644
--- a/src/screens/Compose/Root/Actions.tsx
+++ b/src/screens/Compose/Root/Actions.tsx
@@ -20,7 +20,7 @@ const ComposeActions: React.FC = () => {
     if (composeState.poll.active) return theme.disabled
 
     if (composeState.attachments.uploads.length) {
-      return theme.primary
+      return theme.primaryDefault
     } else {
       return theme.secondary
     }
@@ -43,7 +43,7 @@ const ComposeActions: React.FC = () => {
     if (composeState.attachments.uploads.length) return theme.disabled
 
     if (composeState.poll.active) {
-      return theme.primary
+      return theme.primaryDefault
     } else {
       return theme.secondary
     }
@@ -144,7 +144,7 @@ const ComposeActions: React.FC = () => {
     if (!composeState.emoji.emojis) return theme.disabled
 
     if (composeState.emoji.active) {
-      return theme.primary
+      return theme.primaryDefault
     } else {
       return theme.secondary
     }
@@ -166,7 +166,7 @@ const ComposeActions: React.FC = () => {
     <View
       style={[
         styles.additions,
-        { backgroundColor: theme.background, borderTopColor: theme.border }
+        { backgroundColor: theme.backgroundDefault, borderTopColor: theme.border }
       ]}
     >
       <Pressable
@@ -196,7 +196,7 @@ const ComposeActions: React.FC = () => {
             name='AlertTriangle'
             size={24}
             color={
-              composeState.spoiler.active ? theme.primary : theme.secondary
+              composeState.spoiler.active ? theme.primaryDefault : theme.secondary
             }
           />
         }
diff --git a/src/screens/Compose/Root/Footer/Attachments.tsx b/src/screens/Compose/Root/Footer/Attachments.tsx
index 507f0c60..48445836 100644
--- a/src/screens/Compose/Root/Footer/Attachments.tsx
+++ b/src/screens/Compose/Root/Footer/Attachments.tsx
@@ -130,8 +130,8 @@ const ComposeAttachments: React.FC = () => {
               style={[
                 styles.duration,
                 {
-                  color: theme.background,
-                  backgroundColor: theme.backgroundOverlay
+                  color: theme.backgroundDefault,
+                  backgroundColor: theme.backgroundOverlayInvert
                 }
               ]}
             >
@@ -142,7 +142,7 @@ const ComposeAttachments: React.FC = () => {
             <View
               style={[
                 styles.uploading,
-                { backgroundColor: theme.backgroundOverlay }
+                { backgroundColor: theme.backgroundOverlayInvert }
               ]}
             >
               <Circle
@@ -196,7 +196,7 @@ const ComposeAttachments: React.FC = () => {
           styles.container,
           {
             width: DEFAULT_HEIGHT,
-            backgroundColor: theme.backgroundOverlay
+            backgroundColor: theme.backgroundOverlayInvert
           }
         ]}
         onPress={async () => {
@@ -238,9 +238,9 @@ const ComposeAttachments: React.FC = () => {
         <Icon
           name={composeState.attachments.sensitive ? 'CheckCircle' : 'Circle'}
           size={StyleConstants.Font.Size.L}
-          color={theme.primary}
+          color={theme.primaryDefault}
         />
-        <Text style={[styles.sensitiveText, { color: theme.primary }]}>
+        <Text style={[styles.sensitiveText, { color: theme.primaryDefault }]}>
           {t('content.root.footer.attachments.sensitive')}
         </Text>
       </Pressable>
diff --git a/src/screens/Compose/Root/Footer/Poll.tsx b/src/screens/Compose/Root/Footer/Poll.tsx
index 0b364cae..917150d6 100644
--- a/src/screens/Compose/Root/Footer/Poll.tsx
+++ b/src/screens/Compose/Root/Footer/Poll.tsx
@@ -54,7 +54,7 @@ const ComposePoll: React.FC = () => {
                   styles.textInput,
                   {
                     borderColor: theme.border,
-                    color: hasConflict ? theme.red : theme.primary
+                    color: hasConflict ? theme.red : theme.primaryDefault
                   }
                 ]}
                 placeholder={
diff --git a/src/screens/Compose/Root/Header/SpoilerInput.tsx b/src/screens/Compose/Root/Header/SpoilerInput.tsx
index c7fcd970..9853dc61 100644
--- a/src/screens/Compose/Root/Header/SpoilerInput.tsx
+++ b/src/screens/Compose/Root/Header/SpoilerInput.tsx
@@ -17,7 +17,7 @@ const ComposeSpoilerInput: React.FC = () => {
       style={[
         styles.spoilerInput,
         {
-          color: theme.primary,
+          color: theme.primaryDefault,
           borderBottomColor: theme.border
         }
       ]}
diff --git a/src/screens/Compose/Root/Header/TextInput.tsx b/src/screens/Compose/Root/Header/TextInput.tsx
index bd1987fc..78ac6246 100644
--- a/src/screens/Compose/Root/Header/TextInput.tsx
+++ b/src/screens/Compose/Root/Header/TextInput.tsx
@@ -17,7 +17,7 @@ const ComposeTextInput: React.FC = () => {
       style={[
         styles.textInput,
         {
-          color: theme.primary,
+          color: theme.primaryDefault,
           borderBottomColor: theme.border
         }
       ]}
diff --git a/src/screens/Tabs.tsx b/src/screens/Tabs.tsx
index 1b92a93d..b027ea93 100644
--- a/src/screens/Tabs.tsx
+++ b/src/screens/Tabs.tsx
@@ -96,7 +96,7 @@ const ScreenTabs = React.memo(
     )
     const tabBarOptions = useMemo(
       () => ({
-        activeTintColor: theme.primary,
+        activeTintColor: theme.primaryDefault,
         inactiveTintColor: theme.secondary,
         showLabel: false,
         ...(Platform.OS === 'android' && { keyboardHidesTabBar: true })
diff --git a/src/screens/Tabs/Me/Fontsize.tsx b/src/screens/Tabs/Me/Fontsize.tsx
index 613ca754..93c36601 100644
--- a/src/screens/Tabs/Me/Fontsize.tsx
+++ b/src/screens/Tabs/Me/Fontsize.tsx
@@ -90,7 +90,8 @@ const ScreenMeSettingsFontsize: React.FC<StackScreenProps<
                   initialSize === size
                     ? StyleConstants.Font.Weight.Bold
                     : undefined,
-                color: initialSize === size ? theme.primary : theme.secondary,
+                color:
+                  initialSize === size ? theme.primaryDefault : theme.secondary,
                 borderWidth: StyleSheet.hairlineWidth,
                 borderColor: theme.border
               }
@@ -105,7 +106,7 @@ const ScreenMeSettingsFontsize: React.FC<StackScreenProps<
 
   return (
     <ScrollView scrollEnabled={false}>
-      <Text style={[styles.header, { color: theme.primary }]}>
+      <Text style={[styles.header, { color: theme.primaryDefault }]}>
         {t('content.showcase')}
       </Text>
       <View>
@@ -119,7 +120,7 @@ const ScreenMeSettingsFontsize: React.FC<StackScreenProps<
           extraMarginRight={-StyleConstants.Spacing.Global.PagePadding}
         />
       </View>
-      <Text style={[styles.header, { color: theme.primary }]}>
+      <Text style={[styles.header, { color: theme.primaryDefault }]}>
         {t('content.availableSizes')}
       </Text>
       <View style={styles.sizesDemo}>{sizesDemo}</View>
diff --git a/src/screens/Tabs/Me/Settings/Dev.tsx b/src/screens/Tabs/Me/Settings/Dev.tsx
index 9f419660..2205d4e3 100644
--- a/src/screens/Tabs/Me/Settings/Dev.tsx
+++ b/src/screens/Tabs/Me/Settings/Dev.tsx
@@ -22,7 +22,7 @@ const SettingsDev: React.FC = () => {
         style={{
           paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
           ...StyleConstants.FontStyle.S,
-          color: theme.primary
+          color: theme.primaryDefault
         }}
       >
         {instances[instanceActive]?.token}
diff --git a/src/screens/Tabs/Me/Switch/Root.tsx b/src/screens/Tabs/Me/Switch/Root.tsx
index 005e9fd4..8a99fd9b 100644
--- a/src/screens/Tabs/Me/Switch/Root.tsx
+++ b/src/screens/Tabs/Me/Switch/Root.tsx
@@ -56,7 +56,7 @@ const ScreenMeSwitchRoot: React.FC = () => {
   return (
     <ScrollView style={styles.base} keyboardShouldPersistTaps='always'>
       <View style={[styles.firstSection, { borderBottomColor: theme.border }]}>
-        <Text style={[styles.header, { color: theme.primary }]}>
+        <Text style={[styles.header, { color: theme.primaryDefault }]}>
           {t('content.existing')}
         </Text>
         <View style={styles.accountButtons}>
@@ -87,7 +87,7 @@ const ScreenMeSwitchRoot: React.FC = () => {
       </View>
 
       <View style={styles.secondSection}>
-        <Text style={[styles.header, { color: theme.primary }]}>
+        <Text style={[styles.header, { color: theme.primaryDefault }]}>
           {t('content.new')}
         </Text>
         <ComponentInstance disableHeaderImage goBack />
diff --git a/src/screens/Tabs/Shared/Account/Attachments.tsx b/src/screens/Tabs/Shared/Account/Attachments.tsx
index 4b2c3855..9f559058 100644
--- a/src/screens/Tabs/Shared/Account/Attachments.tsx
+++ b/src/screens/Tabs/Shared/Account/Attachments.tsx
@@ -70,7 +70,7 @@ const AccountAttachments = React.memo(
                 <View
                   style={{
                     marginHorizontal: StyleConstants.Spacing.Global.PagePadding,
-                    backgroundColor: theme.backgroundOverlay,
+                    backgroundColor: theme.backgroundOverlayInvert,
                     width: width,
                     height: width,
                     justifyContent: 'center',
diff --git a/src/screens/Tabs/Shared/Account/Information/Fields.tsx b/src/screens/Tabs/Shared/Account/Information/Fields.tsx
index 4bd6a6e0..dc624757 100644
--- a/src/screens/Tabs/Shared/Account/Information/Fields.tsx
+++ b/src/screens/Tabs/Shared/Account/Information/Fields.tsx
@@ -34,7 +34,7 @@ const AccountInformationFields = React.memo(
                 <Icon
                   name='CheckCircle'
                   size={StyleConstants.Font.Size.M}
-                  color={theme.primary}
+                  color={theme.primaryDefault}
                   style={styles.fieldCheck}
                 />
               ) : null}
diff --git a/src/screens/Tabs/Shared/Account/Information/Stats.tsx b/src/screens/Tabs/Shared/Account/Information/Stats.tsx
index 08777a3c..fba2332c 100644
--- a/src/screens/Tabs/Shared/Account/Information/Stats.tsx
+++ b/src/screens/Tabs/Shared/Account/Information/Stats.tsx
@@ -24,7 +24,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
     <View style={[styles.stats, { flexDirection: 'row' }]}>
       {account ? (
         <Text
-          style={[styles.stat, { color: theme.primary }]}
+          style={[styles.stat, { color: theme.primaryDefault }]}
           children={t('content.summary.statuses_count', {
             count: account.statuses_count || 0
           })}
@@ -46,7 +46,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
       )}
       {account ? (
         <Text
-          style={[styles.stat, { color: theme.primary, textAlign: 'right' }]}
+          style={[styles.stat, { color: theme.primaryDefault, textAlign: 'right' }]}
           children={t('content.summary.following_count', {
             count: account.following_count
           })}
@@ -73,7 +73,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
       )}
       {account ? (
         <Text
-          style={[styles.stat, { color: theme.primary, textAlign: 'center' }]}
+          style={[styles.stat, { color: theme.primaryDefault, textAlign: 'center' }]}
           children={t('content.summary.followers_count', {
             count: account.followers_count
           })}
diff --git a/src/screens/Tabs/Shared/Account/Nav.tsx b/src/screens/Tabs/Shared/Account/Nav.tsx
index 1c9f3775..e4741f77 100644
--- a/src/screens/Tabs/Shared/Account/Nav.tsx
+++ b/src/screens/Tabs/Shared/Account/Nav.tsx
@@ -49,7 +49,7 @@ const AccountNav: React.FC<Props> = ({ scrollY, account }) => {
       style={[
         styles.base,
         styleOpacity,
-        { backgroundColor: theme.background, height: headerHeight }
+        { backgroundColor: theme.backgroundDefault, height: headerHeight }
       ]}
     >
       <View
diff --git a/src/screens/Tabs/Shared/Search.tsx b/src/screens/Tabs/Shared/Search.tsx
index a17b91b1..3526652a 100644
--- a/src/screens/Tabs/Shared/Search.tsx
+++ b/src/screens/Tabs/Shared/Search.tsx
@@ -73,7 +73,7 @@ const TabSharedSearch: React.FC<SharedSearchProp> = ({
                 style={[
                   styles.emptyDefault,
                   styles.emptyFontSize,
-                  { color: theme.primary }
+                  { color: theme.primaryDefault }
                 ]}
               >
                 <Trans
@@ -81,25 +81,25 @@ const TabSharedSearch: React.FC<SharedSearchProp> = ({
                   components={{ bold: <Text style={styles.emptyFontBold} /> }}
                 />
               </Text>
-              <Text style={[styles.emptyAdvanced, { color: theme.primary }]}>
+              <Text style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}>
                 {t('content.empty.advanced.header')}
               </Text>
-              <Text style={[styles.emptyAdvanced, { color: theme.primary }]}>
+              <Text style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}>
                 <Text style={{ color: theme.secondary }}>@username@domain</Text>
                 {'   '}
                 {t('content.empty.advanced.example.account')}
               </Text>
-              <Text style={[styles.emptyAdvanced, { color: theme.primary }]}>
+              <Text style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}>
                 <Text style={{ color: theme.secondary }}>#example</Text>
                 {'   '}
                 {t('content.empty.advanced.example.hashtag')}
               </Text>
-              <Text style={[styles.emptyAdvanced, { color: theme.primary }]}>
+              <Text style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}>
                 <Text style={{ color: theme.secondary }}>URL</Text>
                 {'   '}
                 {t('content.empty.advanced.example.statusLink')}
               </Text>
-              <Text style={[styles.emptyAdvanced, { color: theme.primary }]}>
+              <Text style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}>
                 <Text style={{ color: theme.secondary }}>URL</Text>
                 {'   '}
                 {t('content.empty.advanced.example.accountLink')}
@@ -113,9 +113,9 @@ const TabSharedSearch: React.FC<SharedSearchProp> = ({
   const sectionHeader = useCallback(
     ({ section: { translation } }) => (
       <View
-        style={[styles.sectionHeader, { backgroundColor: theme.background }]}
+        style={[styles.sectionHeader, { backgroundColor: theme.backgroundDefault }]}
       >
-        <Text style={[styles.sectionHeaderText, { color: theme.primary }]}>
+        <Text style={[styles.sectionHeaderText, { color: theme.primaryDefault }]}>
           {translation}
         </Text>
       </View>
@@ -126,7 +126,7 @@ const TabSharedSearch: React.FC<SharedSearchProp> = ({
     ({ section: { data, translation } }) =>
       !data.length ? (
         <View
-          style={[styles.sectionFooter, { backgroundColor: theme.background }]}
+          style={[styles.sectionFooter, { backgroundColor: theme.backgroundDefault }]}
         >
           <Text style={[styles.sectionFooterText, { color: theme.secondary }]}>
             <Trans
diff --git a/src/screens/Tabs/Shared/sharedScreens.tsx b/src/screens/Tabs/Shared/sharedScreens.tsx
index 9c9c72af..b7172a2b 100644
--- a/src/screens/Tabs/Shared/sharedScreens.tsx
+++ b/src/screens/Tabs/Shared/sharedScreens.tsx
@@ -14,11 +14,11 @@ import { debounce } from 'lodash'
 import React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { Platform, StyleSheet, Text, TextInput, View } from 'react-native'
-import { NativeStackNavigationOptions } from 'react-native-screens/lib/typescript/native-stack'
+import { NativeStackNavigationOptions } from 'react-native-screens/lib/typescript'
 import {
   NativeStackNavigationEventMap,
   NativeStackNavigatorProps
-} from 'react-native-screens/lib/typescript/native-stack/types'
+} from 'react-native-screens/lib/typescript/types'
 
 export type BaseScreens =
   | Nav.TabLocalStackParamList
@@ -103,7 +103,7 @@ const sharedScreens = (
                   <Text
                     style={{
                       ...StyleConstants.FontStyle.M,
-                      color: theme.primary,
+                      color: theme.primaryDefault,
                       fontWeight: StyleConstants.Font.Weight.Bold
                     }}
                   />
@@ -153,7 +153,7 @@ const sharedScreens = (
                     style={[
                       styles.textInput,
                       {
-                        color: theme.primary
+                        color: theme.primaryDefault
                       }
                     ]}
                     children={t('sharedSearch:content.header.prefix')}
@@ -166,7 +166,7 @@ const sharedScreens = (
                   styles.textInput,
                   {
                     flex: 1,
-                    color: theme.primary,
+                    color: theme.primaryDefault,
                     paddingLeft: StyleConstants.Spacing.XS
                   }
                 ]}
diff --git a/src/utils/styles/themes.ts b/src/utils/styles/themes.ts
index 59c812a2..062c99bc 100644
--- a/src/utils/styles/themes.ts
+++ b/src/utils/styles/themes.ts
@@ -1,16 +1,17 @@
 import { DefaultTheme, DarkTheme } from '@react-navigation/native'
 
 export type ColorDefinitions =
-  | 'primary'
+  | 'primaryDefault'
   | 'primaryOverlay'
   | 'secondary'
   | 'disabled'
   | 'blue'
   | 'red'
-  | 'background'
-  | 'backgroundGradientStart'
-  | 'backgroundGradientEnd'
-  | 'backgroundOverlay'
+  | 'green'
+  | 'yellow'
+  | 'backgroundDefault'
+  | 'backgroundOverlayDefault'
+  | 'backgroundOverlayInvert'
   | 'border'
   | 'shimmerDefault'
   | 'shimmerHighlight'
@@ -21,7 +22,7 @@ const themeColors: {
     dark: string
   }
 } = {
-  primary: {
+  primaryDefault: {
     light: 'rgb(18, 18, 18)',
     dark: 'rgb(180, 180, 180)'
   },
@@ -45,27 +46,33 @@ const themeColors: {
     light: 'rgb(225, 45, 35)',
     dark: 'rgb(225, 78, 79)'
   },
+  green: {
+    light: 'rgb(18, 158, 80)',
+    dark: 'rgb(18, 158, 80)'
+  },
+  yellow: {
+    light: 'rgb(230, 166, 30)',
+    dark: 'rgb(200, 145, 25)'
+  },
 
-  background: {
+  backgroundDefault: {
     light: 'rgb(250, 250, 250)',
     dark: 'rgb(18, 18, 18)'
   },
-  backgroundGradientStart: {
+  backgroundOverlayDefault: {
     light: 'rgba(250, 250, 250, 0.5)',
-    dark: 'rgba(18, 18, 18, 0.5)'
+    dark: 'rgba(0, 0, 0, 0.5)'
   },
-  backgroundGradientEnd: {
-    light: 'rgba(250, 250, 250, 1)',
-    dark: 'rgba(18, 18, 18, 1)'
-  },
-  backgroundOverlay: {
+  backgroundOverlayInvert: {
     light: 'rgba(25, 25, 25, 0.5)',
     dark: 'rgba(0, 0, 0, 0.5)'
   },
+
   border: {
     light: 'rgba(25, 25, 25, 0.3)',
     dark: 'rgba(255, 255, 255, 0.3)'
   },
+
   shimmerDefault: {
     light: 'rgba(25, 25, 25, 0.05)',
     dark: 'rgba(250, 250, 250, 0.05)'
@@ -91,10 +98,10 @@ const themes = {
     ...DefaultTheme,
     colors: {
       ...DefaultTheme.colors,
-      primary: themeColors.primary.light,
-      background: themeColors.background.light,
-      card: themeColors.background.light,
-      text: themeColors.primary.light,
+      primary: themeColors.primaryDefault.light,
+      background: themeColors.backgroundDefault.light,
+      card: themeColors.backgroundDefault.light,
+      text: themeColors.primaryDefault.light,
       border: themeColors.border.light,
       notification: themeColors.red.light
     }
@@ -103,10 +110,10 @@ const themes = {
     ...DarkTheme,
     colors: {
       ...DarkTheme.colors,
-      primary: themeColors.primary.dark,
-      background: themeColors.background.dark,
-      card: themeColors.background.dark,
-      text: themeColors.primary.dark,
+      primary: themeColors.primaryDefault.dark,
+      background: themeColors.backgroundDefault.dark,
+      card: themeColors.backgroundDefault.dark,
+      text: themeColors.primaryDefault.dark,
       border: themeColors.border.dark,
       notification: themeColors.red.dark
     }