tweaks

src/screens/Profile/Header/ProfileHeaderStandard.tsx

@@ -22,6 +22,7 @@ import {
 import {useRequireAuth, useSession} from '#/state/session'
 import {ProfileMenu} from '#/view/com/profile/ProfileMenu'
 import * as Toast from '#/view/com/util/Toast'
+import {useProfileTheme} from '#/view/screens/Profile'
 import {atoms as a} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
@@ -148,6 +149,8 @@ let ProfileHeaderStandard = ({
     [currentAccount, profile],
   )
 
+  const pTheme = useProfileTheme()
+
   return (
     <ProfileHeaderShell
       profile={profile}
@@ -177,7 +180,7 @@ let ProfileHeaderStandard = ({
                 variant="solid"
                 onPress={onPressEditProfile}
                 label={_(msg`Edit profile`)}
-                style={[a.rounded_full]}>
+                style={[{backgroundColor: pTheme.lightPalette.primary_50}]}>
                 <ButtonText>
                   <Trans>Edit Profile</Trans>
                 </ButtonText>
@@ -197,7 +200,10 @@ let ProfileHeaderStandard = ({
                 label={_(msg`Unblock`)}
                 disabled={!hasSession}
                 onPress={() => unblockPromptControl.open()}
-                style={[a.rounded_full]}>
+                style={[
+                  a.rounded_full,
+                  {backgroundColor: pTheme.lightPalette.primary_50},
+                ]}>
                 <ButtonText>
                   <Trans context="action">Unblock</Trans>
                 </ButtonText>
@@ -220,7 +226,10 @@ let ProfileHeaderStandard = ({
                 onPress={
                   profile.viewer?.following ? onPressUnfollow : onPressFollow
                 }
-                style={[a.rounded_full]}>
+                style={[
+                  a.rounded_full,
+                  {backgroundColor: pTheme.lightPalette.primary_50},
+                ]}>
                 <ButtonIcon
                   position="left"
                   icon={profile.viewer?.following ? Check : Plus}

src/screens/Profile/Header/Shell.tsx

@@ -1,6 +1,7 @@
 import React, {memo} from 'react'
 import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
 import {MeasuredDimensions, runOnJS, runOnUI} from 'react-native-reanimated'
+import {LinearGradient} from 'expo-linear-gradient'
 import {AppBskyActorDefs, ModerationDecision} from '@atproto/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
@@ -18,8 +19,8 @@ import {useSession} from '#/state/session'
 import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {UserBanner} from '#/view/com/util/UserBanner'
+import {useProfileTheme} from '#/view/screens/Profile'
 import {atoms as a, useTheme} from '#/alf'
-import {createThemes} from '#/alf/themes'
 import {LabelsOnMe} from '#/components/moderation/LabelsOnMe'
 import {ProfileHeaderAlerts} from '#/components/moderation/ProfileHeaderAlerts'
 import {GrowableAvatar} from './GrowableAvatar'
@@ -96,18 +97,25 @@ let ProfileHeaderShell = ({
     [currentAccount, profile],
   )
 
-  const theme = createThemes({
+  const pTheme = useProfileTheme()
-    hues: {
-      primary: 200,
-      negative: 200,
-      positive: 200,
-    },
-  })
 
   return (
-    <View
+    <View pointerEvents={isIOS ? 'auto' : 'box-none'}>
-      pointerEvents={isIOS ? 'auto' : 'box-none'}
+      <LinearGradient
-      style={[{backgroundColor: theme.light.atoms.bg.backgroundColor}]}>
+        colors={[
+          pTheme.lightPalette.primary_200,
+          pTheme.lightPalette.primary_200,
+
+          t.atoms.bg.backgroundColor,
+        ]}
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
       <View
         pointerEvents={isIOS ? 'auto' : 'box-none'}
         style={[a.relative, {height: 150}]}>

src/view/com/profile/ProfileMenu.tsx

@@ -20,6 +20,7 @@ import {
 import {useSession} from '#/state/session'
 import {EventStopper} from '#/view/com/util/EventStopper'
 import * as Toast from '#/view/com/util/Toast'
+import {useProfileTheme} from '#/view/screens/Profile'
 import {Button, ButtonIcon} from '#/components/Button'
 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox'
 import {DotGrid_Stroke2_Corner0_Rounded as Ellipsis} from '#/components/icons/DotGrid'
@@ -167,6 +168,8 @@ let ProfileMenu = ({
     reportDialogControl.open()
   }, [reportDialogControl])
 
+  const pTheme = useProfileTheme()
+
   return (
     <EventStopper onKeyDown={false}>
       <Menu.Root>
@@ -181,7 +184,8 @@ let ProfileMenu = ({
                 variant="solid"
                 color="secondary"
                 size="small"
-                shape="round">
+                shape="round"
+                style={{backgroundColor: pTheme.lightPalette.primary_50}}>
                 <ButtonIcon icon={Ellipsis} size="sm" />
               </Button>
             )

src/view/screens/Profile.tsx

@@ -44,13 +44,26 @@ import {CenteredView} from '#/view/com/util/Views'
 import {ProfileHeader, ProfileHeaderLoading} from '#/screens/Profile/Header'
 import {ProfileFeedSection} from '#/screens/Profile/Sections/Feed'
 import {ProfileLabelsSection} from '#/screens/Profile/Sections/Labels'
-import {web} from '#/alf'
+import {Palette, Theme, web} from '#/alf'
+import {createThemes} from '#/alf/themes'
 import * as Layout from '#/components/Layout'
 import {ScreenHider} from '#/components/moderation/ScreenHider'
 import {ProfileStarterPacks} from '#/components/StarterPack/ProfileStarterPacks'
 import {navigate} from '#/Navigation'
 import {ExpoScrollForwarderView} from '../../../modules/expo-scroll-forwarder'
 
+type ThemeType = {
+  lightPalette: Palette
+  darkPalette: Palette
+  dimPalette: Palette
+  light: Theme
+  dark: Theme
+  dim: Theme
+}
+
+const ProfileThemeContext = React.createContext<ThemeType>({} as ThemeType)
+export const useProfileTheme = () => React.useContext(ProfileThemeContext)
+
 interface SectionRef {
   scrollToTop: () => void
 }
@@ -341,17 +354,27 @@ function ProfileScreenLoaded({
   // rendering
   // =
 
+  const theme = createThemes({
+    hues: {
+      primary: 350,
+      negative: 0,
+      positive: 0,
+    },
+  })
+
   const renderHeader = () => {
     return (
       <ExpoScrollForwarderView scrollViewTag={scrollViewTag}>
-        <ProfileHeader
+        <ProfileThemeContext.Provider value={theme}>
-          profile={profile}
+          <ProfileHeader
-          labeler={labelerInfo}
+            profile={profile}
-          descriptionRT={hasDescription ? descriptionRT : null}
+            labeler={labelerInfo}
-          moderationOpts={moderationOpts}
+            descriptionRT={hasDescription ? descriptionRT : null}
-          hideBackButton={hideBackButton}
+            moderationOpts={moderationOpts}
-          isPlaceholderProfile={showPlaceholder}
+            hideBackButton={hideBackButton}
-        />
+            isPlaceholderProfile={showPlaceholder}
+          />
+        </ProfileThemeContext.Provider>
       </ExpoScrollForwarderView>
     )
   }