remove useProfileTheme in favour of nesting main provider

src/App.native.tsx

@@ -122,7 +122,7 @@ function InnerApp() {
   }, [_])
 
   return (
-    <Alf theme={theme}>
+    <Alf themeName={theme}>
       <ThemeProvider theme={theme}>
         <Splash isReady={isReady && hasCheckedReferrer}>
           <RootSiblingParent>

src/App.web.tsx

@@ -101,7 +101,7 @@ function InnerApp() {
   if (!isReady || !hasCheckedReferrer) return null
 
   return (
-    <Alf theme={theme}>
+    <Alf themeName={theme}>
       <ThemeProvider theme={theme}>
         <RootSiblingParent>
           <VideoVolumeProvider>

src/alf/index.tsx

@@ -63,8 +63,12 @@ export const Context = React.createContext<Alf>({
 
 export function ThemeProvider({
   children,
-  theme: themeName,
+  themeName,
-}: React.PropsWithChildren<{theme: ThemeName}>) {
+  theme,
+}: React.PropsWithChildren<{
+  themeName: ThemeName
+  theme?: ReturnType<typeof createThemes>
+}>) {
   const [fontScale, setFontScale] = React.useState<Alf['fonts']['scale']>(() =>
     getFontScale(),
   )
@@ -74,6 +78,7 @@ export function ThemeProvider({
   const setFontScaleAndPersist = React.useCallback<
     Alf['fonts']['setFontScale']
   >(
+    // eslint-disable-next-line @typescript-eslint/no-shadow
     fontScale => {
       setFontScale(fontScale)
       persistFontScale(fontScale)
@@ -87,6 +92,7 @@ export function ThemeProvider({
   const setFontFamilyAndPersist = React.useCallback<
     Alf['fonts']['setFontFamily']
   >(
+    // eslint-disable-next-line @typescript-eslint/no-shadow
     fontFamily => {
       setFontFamily(fontFamily)
       persistFontFamily(fontFamily)
@@ -94,6 +100,9 @@ export function ThemeProvider({
     [setFontFamily],
   )
   const themes = React.useMemo(() => {
+    if (theme) {
+      return theme
+    }
     return createThemes({
       hues: {
         primary: BLUE_HUE,
@@ -101,7 +110,7 @@ export function ThemeProvider({
         positive: GREEN_HUE,
       },
     })
-  }, [])
+  }, [theme])
 
   const value = React.useMemo<Alf>(
     () => ({

src/screens/Profile/Header/ProfileHeaderLabeler.tsx

@@ -49,6 +49,7 @@ interface Props {
   moderationOpts: ModerationOpts
   hideBackButton?: boolean
   isPlaceholderProfile?: boolean
+  backgroundColor: string
 }
 
 let ProfileHeaderLabeler = ({
@@ -168,7 +169,8 @@ let ProfileHeaderLabeler = ({
       profile={profile}
       moderation={moderation}
       hideBackButton={hideBackButton}
-      isPlaceholderProfile={isPlaceholderProfile}>
+      isPlaceholderProfile={isPlaceholderProfile}
+      backgroundColor={backgroundColor}>
       <View
         style={[a.px_lg, a.pt_md, a.pb_sm]}
         pointerEvents={isIOS ? 'auto' : 'box-none'}>

src/screens/Profile/Header/ProfileHeaderStandard.tsx

@@ -22,7 +22,6 @@ 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'
@@ -47,6 +46,7 @@ interface Props {
   moderationOpts: ModerationOpts
   hideBackButton?: boolean
   isPlaceholderProfile?: boolean
+  backgroundColor: string
 }
 
 let ProfileHeaderStandard = ({
@@ -55,6 +55,7 @@ let ProfileHeaderStandard = ({
   moderationOpts,
   hideBackButton = false,
   isPlaceholderProfile,
+  backgroundColor,
 }: Props): React.ReactNode => {
   const profile: Shadow<AppBskyActorDefs.ProfileViewDetailed> =
     useProfileShadow(profileUnshadowed)
@@ -149,14 +150,13 @@ let ProfileHeaderStandard = ({
     [currentAccount, profile],
   )
 
-  const pTheme = useProfileTheme()
-
   return (
     <ProfileHeaderShell
       profile={profile}
       moderation={moderation}
       hideBackButton={hideBackButton}
-      isPlaceholderProfile={isPlaceholderProfile}>
+      isPlaceholderProfile={isPlaceholderProfile}
+      backgroundColor={backgroundColor}>
       <View
         style={[a.px_lg, a.pt_md, a.pb_sm, a.overflow_hidden]}
         pointerEvents={isIOS ? 'auto' : 'box-none'}>
@@ -179,8 +179,7 @@ let ProfileHeaderStandard = ({
                 color="secondary"
                 variant="solid"
                 onPress={onPressEditProfile}
-                label={_(msg`Edit profile`)}
+                label={_(msg`Edit profile`)}>
-                style={[{backgroundColor: pTheme.lightPalette.primary_50}]}>
                 <ButtonText>
                   <Trans>Edit Profile</Trans>
                 </ButtonText>
@@ -200,10 +199,7 @@ let ProfileHeaderStandard = ({
                 label={_(msg`Unblock`)}
                 disabled={!hasSession}
                 onPress={() => unblockPromptControl.open()}
-                style={[
+                style={[a.rounded_full]}>
-                  a.rounded_full,
-                  {backgroundColor: pTheme.lightPalette.primary_50},
-                ]}>
                 <ButtonText>
                   <Trans context="action">Unblock</Trans>
                 </ButtonText>
@@ -226,10 +222,7 @@ let ProfileHeaderStandard = ({
                 onPress={
                   profile.viewer?.following ? onPressUnfollow : onPressFollow
                 }
-                style={[
+                style={[a.rounded_full]}>
-                  a.rounded_full,
-                  {backgroundColor: pTheme.lightPalette.primary_50},
-                ]}>
                 <ButtonIcon
                   position="left"
                   icon={profile.viewer?.following ? Check : Plus}

src/screens/Profile/Header/Shell.tsx

@@ -19,7 +19,6 @@ 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 {LabelsOnMe} from '#/components/moderation/LabelsOnMe'
 import {ProfileHeaderAlerts} from '#/components/moderation/ProfileHeaderAlerts'
@@ -31,6 +30,7 @@ interface Props {
   moderation: ModerationDecision
   hideBackButton?: boolean
   isPlaceholderProfile?: boolean
+  backgroundColor: string
 }
 
 let ProfileHeaderShell = ({
@@ -39,6 +39,7 @@ let ProfileHeaderShell = ({
   moderation,
   hideBackButton = false,
   isPlaceholderProfile,
+  backgroundColor,
 }: React.PropsWithChildren<Props>): React.ReactNode => {
   const t = useTheme()
   const {currentAccount} = useSession()
@@ -97,20 +98,11 @@ let ProfileHeaderShell = ({
     [currentAccount, profile],
   )
 
-  const pTheme = useProfileTheme()
-
-  const palette = t.name === 'light' ? pTheme.lightPalette : pTheme.darkPalette
-
   return (
     <View pointerEvents={isIOS ? 'auto' : 'box-none'}>
       <LinearGradient
         key={t.name}
-        colors={[
+        colors={[t.palette.primary_200, t.palette.primary_200, backgroundColor]}
-          palette.primary_200,
-          palette.primary_200,
-
-          t.atoms.bg.backgroundColor,
-        ]}
         style={{
           position: 'absolute',
           top: 0,
@@ -184,7 +176,7 @@ let ProfileHeaderShell = ({
           <View
             style={[
               t.atoms.bg,
-              {borderColor: t.atoms.bg.backgroundColor},
+              {borderColor: t.palette.primary_400},
               styles.avi,
               profile.associated?.labeler && styles.aviLabeler,
             ]}>

src/screens/Profile/Header/index.tsx

@@ -43,6 +43,7 @@ interface Props {
   moderationOpts: ModerationOpts
   hideBackButton?: boolean
   isPlaceholderProfile?: boolean
+  backgroundColor: string
 }
 
 let ProfileHeader = (props: Props): React.ReactNode => {

src/view/com/profile/ProfileMenu.tsx

@@ -20,7 +20,6 @@ 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'
@@ -168,8 +167,6 @@ let ProfileMenu = ({
     reportDialogControl.open()
   }, [reportDialogControl])
 
-  const pTheme = useProfileTheme()
-
   return (
     <EventStopper onKeyDown={false}>
       <Menu.Root>
@@ -184,8 +181,7 @@ 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,7 +44,7 @@ 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 {Palette, Theme, web} from '#/alf'
+import {ThemeProvider as Alf, useTheme, web} from '#/alf'
 import {createThemes} from '#/alf/themes'
 import * as Layout from '#/components/Layout'
 import {ScreenHider} from '#/components/moderation/ScreenHider'
@@ -52,18 +52,6 @@ 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
 }
@@ -354,18 +342,37 @@ function ProfileScreenLoaded({
   // rendering
   // =
 
+  const [hue, setHue] = React.useState(0)
+  React.useEffect(() => {
+    const id = setInterval(() => {
+      setHue(h => {
+        const next = h + 1
+        if (next >= 360) {
+          return 0
+        }
+        return next
+      })
+    }, 100)
+    return () => clearInterval(id)
+  }, [])
+
+  const t = useTheme()
+
   const theme = createThemes({
     hues: {
-      primary: 350,
+      primary: hue,
       negative: 0,
       positive: 0,
     },
+    scales: {
+      // graySaturation: [30, 30, 30, 30, 30, 30, 30, 30, 34, 34, 38, 38, 38, 38],
+    },
   })
 
   const renderHeader = () => {
     return (
       <ExpoScrollForwarderView scrollViewTag={scrollViewTag}>
-        <ProfileThemeContext.Provider value={theme}>
+        <Alf themeName={t.name} theme={theme}>
           <ProfileHeader
             profile={profile}
             labeler={labelerInfo}
@@ -373,8 +380,9 @@ function ProfileScreenLoaded({
             moderationOpts={moderationOpts}
             hideBackButton={hideBackButton}
             isPlaceholderProfile={showPlaceholder}
+            backgroundColor={t.atoms.bg.backgroundColor}
           />
-        </ProfileThemeContext.Provider>
+        </Alf>
       </ExpoScrollForwarderView>
     )
   }
@@ -539,10 +547,10 @@ function useRichText(text: string): [RichTextAPI, boolean] {
     let ignore = false
     async function resolveRTFacets() {
       // new each time
-      const resolvedRT = new RichTextAPI({text})
+      const newRT = new RichTextAPI({text})
-      await resolvedRT.detectFacets(agent)
+      await newRT.detectFacets(agent)
       if (!ignore) {
-        setResolvedRT(resolvedRT)
+        setResolvedRT(newRT)
       }
     }
     resolveRTFacets()

src/view/screens/Storybook/index.tsx

@@ -104,13 +104,13 @@ function StorybookInner() {
 
             <Settings />
 
-            <ThemeProvider theme="light">
+            <ThemeProvider themeName="light">
               <Theming />
             </ThemeProvider>
-            <ThemeProvider theme="dim">
+            <ThemeProvider themeName="dim">
               <Theming />
             </ThemeProvider>
-            <ThemeProvider theme="dark">
+            <ThemeProvider themeName="dark">
               <Theming />
             </ThemeProvider>