diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
--- a/src/components/Loader.tsx
+++ b/src/components/Loader.tsx
@@ -37,7 +37,8 @@ animatedStyles,
]}>
)
diff --git a/src/components/ProgressGuide/FollowDialog.tsx b/src/components/ProgressGuide/FollowDialog.tsx
--- a/src/components/ProgressGuide/FollowDialog.tsx
+++ b/src/components/ProgressGuide/FollowDialog.tsx
@@ -24,6 +24,7 @@ atoms as a,
native,
useBreakpoints,
useTheme,
+ utils,
type ViewStyleProp,
web,
} from '#/alf'
@@ -664,6 +665,9 @@ defaultValue={defaultValue}
onChangeText={onChangeText}
onFocus={onFocus}
onBlur={onBlur}
+ selectionColor={utils.alpha(t.palette.primary_500, 0.4)}
+ cursorColor={t.palette.primary_500}
+ selectionHandleColor={t.palette.primary_500}
style={[a.flex_1, a.py_md, a.text_md, t.atoms.text]}
placeholderTextColor={t.palette.contrast_500}
keyboardAppearance={t.name === 'light' ? 'light' : 'dark'}
diff --git a/src/components/forms/TextField.tsx b/src/components/forms/TextField.tsx
--- a/src/components/forms/TextField.tsx
+++ b/src/components/forms/TextField.tsx
@@ -20,6 +20,7 @@ type TextStyleProp,
tokens,
useAlf,
useTheme,
+ utils,
web,
} from '#/alf'
import {useInteractionState} from '#/components/hooks/useInteractionState'
@@ -275,6 +276,9 @@ <>
setIsFocused(true)}
diff --git a/src/style.css b/src/style.css
--- a/src/style.css
+++ b/src/style.css
@@ -108,11 +108,11 @@ height: 0;
pointer-events: none;
}
.ProseMirror .mention {
- color: #ed5345;
+ color: var(--mention-color, #ed5345);
}
.ProseMirror a,
.ProseMirror .autolink {
- color: #ed5345;
+ color: var(--mention-color, #ed5345);
}
/* OLLIE: TODO -- this is not accessible */
/* Remove focus state on inputs */
diff --git a/src/view/com/composer/text-input/TextInput.tsx b/src/view/com/composer/text-input/TextInput.tsx
--- a/src/view/com/composer/text-input/TextInput.tsx
+++ b/src/view/com/composer/text-input/TextInput.tsx
@@ -29,7 +29,7 @@ import {
type LinkFacetMatch,
suggestLinkCardUri,
} from '#/view/com/composer/text-input/text-input-util'
-import {atoms as a, useAlf} from '#/alf'
+import {atoms as a, useAlf, utils} from '#/alf'
import {normalizeTextStyles} from '#/alf/typography'
import {IS_ANDROID, IS_NATIVE} from '#/env'
import {Autocomplete} from './mobile/Autocomplete'
@@ -283,6 +283,9 @@ numberOfLines={2}
// Note: should be the default value, but as of v1.104
// it switched to "none" on Android
autoCapitalize="sentences"
+ selectionColor={utils.alpha(t.palette.primary_500, 0.4)}
+ cursorColor={t.palette.primary_500}
+ selectionHandleColor={t.palette.primary_500}
{...props}
style={[
inputTextStyle,
diff --git a/src/view/com/composer/text-input/TextInput.web.tsx b/src/view/com/composer/text-input/TextInput.web.tsx
--- a/src/view/com/composer/text-input/TextInput.web.tsx
+++ b/src/view/com/composer/text-input/TextInput.web.tsx
@@ -393,7 +393,15 @@ }, [t, fonts, webForceMinHeight])
return (
<>
-
+
{/* @ts-ignore inputStyle is fine */}
diff --git a/src/view/com/modals/DeleteAccount.tsx b/src/view/com/modals/DeleteAccount.tsx
--- a/src/view/com/modals/DeleteAccount.tsx
+++ b/src/view/com/modals/DeleteAccount.tsx
@@ -19,7 +19,7 @@ import {useTheme} from '#/lib/ThemeContext'
import {useModalControls} from '#/state/modals'
import {useAgent, useSession, useSessionApi} from '#/state/session'
import {pdsAgent} from '#/state/session/agent'
-import {atoms as a, useTheme as useNewTheme} from '#/alf'
+import {atoms as a, useTheme as useNewTheme, utils} from '#/alf'
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
import {Text as NewText} from '#/components/Typography'
import {IS_ANDROID, IS_WEB} from '#/env'
@@ -135,7 +135,7 @@
) : undefined}
{isProcessing ? (
-
+
) : (
<>
@@ -221,6 +221,9 @@ style={[styles.textInput, pal.borderDark, pal.text, styles.mb20]}
placeholder={_(msg`Confirmation code`)}
placeholderTextColor={pal.textLight.color}
keyboardAppearance={theme.colorScheme}
+ selectionColor={utils.alpha(t.palette.primary_500, 0.4)}
+ cursorColor={t.palette.primary_500}
+ selectionHandleColor={t.palette.primary_500}
value={confirmCode}
onChangeText={setConfirmCode}
accessibilityLabelledBy="confirmationCode"
@@ -240,6 +243,9 @@ style={[styles.textInput, pal.borderDark, pal.text]}
placeholder={_(msg`Password`)}
placeholderTextColor={pal.textLight.color}
keyboardAppearance={theme.colorScheme}
+ selectionColor={utils.alpha(t.palette.primary_500, 0.4)}
+ cursorColor={t.palette.primary_500}
+ selectionHandleColor={t.palette.primary_500}
secureTextEntry
value={password}
onChangeText={setPassword}
@@ -254,7 +260,7 @@
) : undefined}
{isProcessing ? (
-
+
) : (
<>
diff --git a/src/view/com/posts/PostFeed.tsx b/src/view/com/posts/PostFeed.tsx
--- a/src/view/com/posts/PostFeed.tsx
+++ b/src/view/com/posts/PostFeed.tsx
@@ -59,7 +59,7 @@ import {List, type ListRef} from '#/view/com/util/List'
import {PostFeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn'
import {type VideoFeedSourceContext} from '#/screens/VideoFeed/types'
-import {useBreakpoints, useLayoutBreakpoints} from '#/alf'
+import {useBreakpoints, useLayoutBreakpoints, useTheme} from '#/alf'
import {
AgeAssuranceDismissibleFeedBanner,
useInternalState as useAgeAssuranceBannerState,
@@ -303,6 +303,7 @@ initialNumToRender?: number
isVideoFeed?: boolean
useRepostCarousel?: boolean
}): React.ReactNode => {
+ const t = useTheme()
const {_} = useLingui()
const queryClient = useQueryClient()
const {currentAccount, hasSession} = useSession()
@@ -989,7 +990,7 @@ const offset = Math.max(headerOffset, 32) * (IS_WEB ? 1 : 2)
return isFetchingNextPage ? (
-
+
) : shouldRenderEndOfFeed ? (
diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx
--- a/src/view/screens/Feeds.tsx
+++ b/src/view/screens/Feeds.tsx
@@ -106,6 +106,7 @@ }
export function FeedsScreen(_props: Props) {
const pal = usePalette('default')
+ const t = useTheme()
const {openComposer} = useOpenComposer()
const {isMobile} = useWebMediaQueries()
const [query, setQuery] = React.useState('')
@@ -417,7 +418,7 @@ return
} else if (item.type === 'popularFeedsLoadingMore') {
return (
-
+
)
} else if (item.type === 'savedFeedsHeader') {
@@ -494,6 +495,7 @@ return null
},
[
_,
+ t.palette.primary_500,
pal.border,
pal.textLight,
query,
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -35,6 +35,7 @@ import {CustomFeedEmptyState} from '#/view/com/posts/CustomFeedEmptyState'
import {FollowingEmptyState} from '#/view/com/posts/FollowingEmptyState'
import {FollowingEndOfFeed} from '#/view/com/posts/FollowingEndOfFeed'
import {NoFeedsPinned} from '#/screens/Home/NoFeedsPinned'
+import {useTheme} from '#/alf'
import * as Layout from '#/components/Layout'
import {IS_WEB} from '#/env'
import {useDemoMode} from '#/storage/hooks/demo-mode'
@@ -46,6 +47,7 @@ const {data: preferences} = usePreferencesQuery()
const {currentAccount} = useSession()
const {data: pinnedFeedInfos, isLoading: isPinnedFeedsLoading} =
usePinnedFeedsInfos()
+ const t = useTheme()
React.useEffect(() => {
if (IS_WEB && !currentAccount) {
@@ -91,7 +93,7 @@ } else {
return (
-
+
)