octo/tooot
octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-02-21 14:20:50 +01:00
Code Issues Projects Releases Wiki Activity

Update colour naming

Browse Source 
Fixed #73
Fixed #58
Fixed #47
This commit is contained in:
Zhiyuan Zheng 2021-03-21 14:14:10 +01:00
parent dd345871f8
commit d15e8cb652
No known key found for this signature in database
GPG Key ID: 078A93AB607D85E0
48 changed files with 162 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/@types/react-navigation.d.ts vendored
View File

@ -1,4 +1,6 @@
declare namespace Nav { declare namespace Nav {
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
type RootStackParamList = { type RootStackParamList = {
'Screen-Tabs': undefined 'Screen-Tabs': undefined
'Screen-Actions': 'Screen-Actions':
@ -90,7 +92,7 @@ declare namespace Nav {
'Tab-Shared-Search': { text: string | undefined } 'Tab-Shared-Search': { text: string | undefined }
'Tab-Shared-Toot': { 'Tab-Shared-Toot': {
toot: Mastodon.Status toot: Mastodon.Status
rootQueryKey: any rootQueryKey?: QueryKeyTimeline
} }
'Tab-Shared-Users': 'Tab-Shared-Users':
| { | {

2
src/Screens.tsx
View File

@ -144,7 +144,7 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
return ( return (
<> <>
<StatusBar barStyle={barStyle[mode]} backgroundColor={theme.background} /> <StatusBar barStyle={barStyle[mode]} backgroundColor={theme.backgroundDefault} />
<NavigationContainer <NavigationContainer
ref={navigationRef} ref={navigationRef}
theme={themes[mode]} theme={themes[mode]}

8
src/components/Button.tsx
View File

@ -81,7 +81,7 @@ const Button: React.FC<Props> = ({
if (destructive) { if (destructive) {
return theme.red return theme.red
} else { } else {
return theme.primary return theme.primaryDefault
} }
} }
} }
@ -97,16 +97,16 @@ const Button: React.FC<Props> = ({
if (destructive) { if (destructive) {
return theme.red return theme.red
} else { } else {
return theme.primary return theme.primaryDefault
} }
} }
} }
}, [mode, loading, disabled]) }, [mode, loading, disabled])
const colorBackground = useMemo(() => { const colorBackground = useMemo(() => {
if (overlay) { if (overlay) {
return theme.backgroundOverlay return theme.backgroundOverlayInvert
} else { } else {
return theme.background return theme.backgroundDefault
} }
}, [mode]) }, [mode])

2
src/components/Hashtag.tsx
View File

@ -29,7 +29,7 @@ const ComponentHashtag: React.FC<Props> = ({
return ( return (
<Pressable style={styles.itemDefault} onPress={customOnPress || onPress}> <Pressable style={styles.itemDefault} onPress={customOnPress || onPress}>
<Text style={[styles.itemHashtag, { color: theme.primary }]}> <Text style={[styles.itemHashtag, { color: theme.primaryDefault }]}>
#{hashtag.name} #{hashtag.name}
</Text> </Text>
</Pressable> </Pressable>

2
src/components/Header/Center.tsx
View File

@ -17,7 +17,7 @@ const HeaderCenter = React.memo(
<Text <Text
style={[ style={[
styles.text, styles.text,
{ color: inverted ? theme.primaryOverlay : theme.primary } { color: inverted ? theme.primaryOverlay : theme.primaryDefault }
]} ]}
children={content} children={content}
/> />

6
src/components/Header/Left.tsx
View File

@ -25,7 +25,7 @@ const HeaderLeft: React.FC<Props> = ({
case 'icon': case 'icon':
return ( return (
<Icon <Icon
color={theme.primary} color={theme.primaryDefault}
name={content || 'ChevronLeft'} name={content || 'ChevronLeft'}
size={StyleConstants.Spacing.M * 1.25} size={StyleConstants.Spacing.M * 1.25}
/> />
@ -33,7 +33,7 @@ const HeaderLeft: React.FC<Props> = ({
case 'text': case 'text':
return ( return (
<Text <Text
style={[styles.text, { color: theme.primary }]} style={[styles.text, { color: theme.primaryDefault }]}
children={content} children={content}
/> />
) )
@ -47,7 +47,7 @@ const HeaderLeft: React.FC<Props> = ({
style={[ style={[
styles.base, styles.base,
{ {
backgroundColor: theme.backgroundGradientStart, backgroundColor: theme.backgroundOverlayDefault,
...(type === 'icon' && { ...(type === 'icon' && {
height: 44, height: 44,
width: 44, width: 44,

6
src/components/Header/Right.tsx
View File

@ -47,7 +47,7 @@ const HeaderRight: React.FC<Props> = ({
name={content} name={content}
style={{ opacity: loading ? 0 : 1 }} style={{ opacity: loading ? 0 : 1 }}
size={StyleConstants.Spacing.M * 1.25} size={StyleConstants.Spacing.M * 1.25}
color={disabled ? theme.secondary : theme.primary} color={disabled ? theme.secondary : theme.primaryDefault}
/> />
{loading && loadingSpinkit} {loading && loadingSpinkit}
</> </>
@ -59,7 +59,7 @@ const HeaderRight: React.FC<Props> = ({
style={[ style={[
styles.text, styles.text,
{ {
color: disabled ? theme.secondary : theme.primary, color: disabled ? theme.secondary : theme.primaryDefault,
opacity: loading ? 0 : 1 opacity: loading ? 0 : 1
} }
]} ]}
@ -79,7 +79,7 @@ const HeaderRight: React.FC<Props> = ({
style={[ style={[
styles.base, styles.base,
{ {
backgroundColor: theme.backgroundGradientStart, backgroundColor: theme.backgroundOverlayDefault,
...(type === 'icon' && { ...(type === 'icon' && {
height: 44, height: 44,
width: 44, width: 44,

2
src/components/Instance.tsx
View File

@ -142,7 +142,7 @@ const ComponentInstance: React.FC<Props> = ({
style={[ style={[
styles.textInput, styles.textInput,
{ {
color: theme.primary, color: theme.primaryDefault,
borderBottomColor: instanceQuery.isError borderBottomColor: instanceQuery.isError
? theme.red ? theme.red
: theme.border : theme.border

4
src/components/Instance/Info.tsx
View File

@ -17,9 +17,9 @@ const InstanceInfo = React.memo(
return ( return (
<View style={[styles.base, style]}> <View style={[styles.base, style]}>
<Text style={[styles.header, { color: theme.primary }]}>{header}</Text> <Text style={[styles.header, { color: theme.primaryDefault }]}>{header}</Text>
{content ? ( {content ? (
<Text style={[styles.content, { color: theme.primary }]}> <Text style={[styles.content, { color: theme.primaryDefault }]}>
{content} {content}
</Text> </Text>
) : ( ) : (

4
src/components/Menu/Row.tsx
View File

@ -28,7 +28,7 @@ export interface Props {
const MenuRow: React.FC<Props> = ({ const MenuRow: React.FC<Props> = ({
iconFront, iconFront,
iconFrontColor = 'primary', iconFrontColor = 'primaryDefault',
title, title,
description, description,
content, content,
@ -73,7 +73,7 @@ const MenuRow: React.FC<Props> = ({
)} )}
<View style={styles.main}> <View style={styles.main}>
<Text <Text
style={[styles.title, { color: theme.primary }]} style={[styles.title, { color: theme.primaryDefault }]}
numberOfLines={1} numberOfLines={1}
> >
{title} {title}

8
src/components/Message.tsx
View File

@ -87,18 +87,18 @@ const Message = React.memo(
position='top' position='top'
floating floating
style={{ style={{
backgroundColor: theme.background, backgroundColor: theme.backgroundDefault,
shadowColor: theme.primary, shadowColor: theme.primaryDefault,
shadowOffset: { width: 0, height: 0 }, shadowOffset: { width: 0, height: 0 },
shadowOpacity: mode === 'light' ? 0.16 : 0.24, shadowOpacity: mode === 'light' ? 0.16 : 0.24,
shadowRadius: 4 shadowRadius: 4
}} }}
titleStyle={{ titleStyle={{
color: theme.primary, color: theme.primaryDefault,
...StyleConstants.FontStyle.M, ...StyleConstants.FontStyle.M,
fontWeight: StyleConstants.Font.Weight.Bold fontWeight: StyleConstants.Font.Weight.Bold
}} }}
textStyle={{ color: theme.primary, ...StyleConstants.FontStyle.S }} textStyle={{ color: theme.primaryDefault, ...StyleConstants.FontStyle.S }}
// @ts-ignore // @ts-ignore
textProps={{ numberOfLines: 2 }} textProps={{ numberOfLines: 2 }}
/> />

2
src/components/Parse/Emojis.tsx
View File

@ -38,7 +38,7 @@ const ParseEmojis = React.memo(
const styles = useMemo(() => { const styles = useMemo(() => {
return StyleSheet.create({ return StyleSheet.create({
text: { text: {
color: theme.primary, color: theme.primaryDefault,
fontSize: adaptedFontsize, fontSize: adaptedFontsize,
lineHeight: adaptedLineheight, lineHeight: adaptedLineheight,
...(fontBold && { fontWeight: StyleConstants.Font.Weight.Bold }) ...(fontBold && { fontWeight: StyleConstants.Font.Weight.Bold })

6
src/components/Parse/HTML.tsx
View File

@ -83,7 +83,7 @@ const renderNode = ({
<Text <Text
key={index} key={index}
style={{ style={{
color: accountIndex !== -1 ? theme.blue : theme.primary, color: accountIndex !== -1 ? theme.blue : theme.primaryDefault,
fontSize: adaptedFontsize, fontSize: adaptedFontsize,
lineHeight: adaptedLineheight lineHeight: adaptedLineheight
}} }}
@ -258,14 +258,14 @@ const ParseHTML = React.memo(
justifyContent: 'center', justifyContent: 'center',
marginTop: expanded ? 0 : -adaptedLineheight, marginTop: expanded ? 0 : -adaptedLineheight,
minHeight: 44, minHeight: 44,
backgroundColor: theme.background backgroundColor: theme.backgroundDefault
}} }}
> >
<Text <Text
style={{ style={{
textAlign: 'center', textAlign: 'center',
...StyleConstants.FontStyle.S, ...StyleConstants.FontStyle.S,
color: theme.primary color: theme.primaryDefault
}} }}
children={t(`HTML.expanded.${expanded.toString()}`, { children={t(`HTML.expanded.${expanded.toString()}`, {
hint: expandHint hint: expandHint

2
src/components/Separator.tsx
View File

@ -15,7 +15,7 @@ const ComponentSeparator = React.memo(
return ( return (
<View <View
style={{ style={{
backgroundColor: theme.background, backgroundColor: theme.backgroundDefault,
borderTopColor: theme.border, borderTopColor: theme.border,
borderTopWidth: StyleSheet.hairlineWidth, borderTopWidth: StyleSheet.hairlineWidth,
marginLeft: marginLeft:

4
src/components/Timeline.tsx
View File

@ -115,8 +115,8 @@ const Timeline: React.FC<Props> = ({
refreshControl: ( refreshControl: (
<RefreshControl <RefreshControl
enabled enabled
colors={[theme.primary]} colors={[theme.primaryDefault]}
progressBackgroundColor={theme.background} progressBackgroundColor={theme.backgroundDefault}
refreshing={isFetching || isLoading} refreshing={isFetching || isLoading}
onRefresh={() => refetch()} onRefresh={() => refetch()}
/> />

2
src/components/Timeline/Conversation.tsx
View File

@ -95,7 +95,7 @@ const TimelineConversation: React.FC<Props> = ({
<Pressable <Pressable
style={[ style={[
styles.base, styles.base,
{ backgroundColor: theme.background }, { backgroundColor: theme.backgroundDefault },
conversation.unread && { conversation.unread && {
borderLeftWidth: StyleConstants.Spacing.XS, borderLeftWidth: StyleConstants.Spacing.XS,
borderLeftColor: theme.blue, borderLeftColor: theme.blue,

2
src/components/Timeline/Default.tsx
View File

@ -65,7 +65,7 @@ const TimelineDefault: React.FC<Props> = ({
style={[ style={[
styles.statusView, styles.statusView,
{ {
backgroundColor: theme.background, backgroundColor: theme.backgroundDefault,
paddingBottom: paddingBottom:
disableDetails && disableOnPress disableDetails && disableOnPress
? StyleConstants.Spacing.Global.PagePadding ? StyleConstants.Spacing.Global.PagePadding

10
src/components/Timeline/Empty.tsx
View File

@ -35,9 +35,9 @@ const TimelineEmpty = React.memo(
<Icon <Icon
name='Frown' name='Frown'
size={StyleConstants.Font.Size.L} 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')} {t('empty.error.message')}
</Text> </Text>
<Button <Button
@ -56,9 +56,9 @@ const TimelineEmpty = React.memo(
<Icon <Icon
name='Smartphone' name='Smartphone'
size={StyleConstants.Font.Size.L} 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')} {t('empty.success.message')}
</Text> </Text>
</> </>
@ -67,7 +67,7 @@ const TimelineEmpty = React.memo(
}, [mode, i18n.language, status]) }, [mode, i18n.language, status])
return ( return (
<View <View
style={[styles.base, { backgroundColor: theme.background }]} style={[styles.base, { backgroundColor: theme.backgroundDefault }]}
children={children} children={children}
/> />
) )

2
src/components/Timeline/Notifications.tsx
View File

@ -56,7 +56,7 @@ const TimelineNotifications: React.FC<Props> = ({
style={[ style={[
styles.notificationView, styles.notificationView,
{ {
backgroundColor: theme.background, backgroundColor: theme.backgroundDefault,
paddingBottom: notification.status paddingBottom: notification.status
? 0 ? 0
: StyleConstants.Spacing.Global.PagePadding : StyleConstants.Spacing.Global.PagePadding

6
src/components/Timeline/Refresh.tsx
View File

@ -254,7 +254,7 @@ const TimelineRefresh: React.FC<Props> = ({
<> <>
<View style={styles.container1}> <View style={styles.container1}>
<Text <Text
style={[styles.explanation, { color: theme.primary }]} style={[styles.explanation, { color: theme.primaryDefault }]}
onLayout={onLayout} onLayout={onLayout}
children={t('refresh.fetchPreviousPage')} children={t('refresh.fetchPreviousPage')}
/> />
@ -271,14 +271,14 @@ const TimelineRefresh: React.FC<Props> = ({
<Icon <Icon
name='ArrowLeft' name='ArrowLeft'
size={StyleConstants.Font.Size.M} size={StyleConstants.Font.Size.M}
color={theme.primary} color={theme.primaryDefault}
/> />
} }
/> />
</View> </View>
<View style={styles.container2}> <View style={styles.container2}>
<Text <Text
style={[styles.explanation, { color: theme.primary }]} style={[styles.explanation, { color: theme.primaryDefault }]}
onLayout={onLayout} onLayout={onLayout}
children={t('refresh.refetch')} children={t('refresh.refetch')}
/> />

2
src/components/Timeline/Shared/Actioned.tsx
View File

@ -23,7 +23,7 @@ const TimelineActioned = React.memo(
StackNavigationProp<Nav.TabLocalStackParamList> StackNavigationProp<Nav.TabLocalStackParamList>
>() >()
const name = account.display_name || account.username const name = account.display_name || account.username
const iconColor = theme.primary const iconColor = theme.primaryDefault
const content = (content: string) => ( const content = (content: string) => (
<ParseEmojis content={content} emojis={account.emojis} size='S' /> <ParseEmojis content={content} emojis={account.emojis} size='S' />

42
src/components/Timeline/Shared/Actions.tsx
View File

@ -30,7 +30,7 @@ const TimelineActions = React.memo(
const { mode, theme } = useTheme() const { mode, theme } = useTheme()
const iconColor = theme.secondary const iconColor = theme.secondary
const iconColorAction = (state: boolean) => const iconColorAction = (state: boolean) =>
state ? theme.primary : theme.secondary state ? theme.primaryDefault : theme.secondary
const queryClient = useQueryClient() const queryClient = useQueryClient()
const mutation = useTimelineMutation({ const mutation = useTimelineMutation({
@ -194,22 +194,23 @@ const TimelineActions = React.memo(
), ),
[status.replies_count] [status.replies_count]
) )
const childrenReblog = useMemo( const childrenReblog = useMemo(() => {
() => ( const color = (state: boolean) => (state ? theme.green : theme.secondary)
return (
<> <>
<Icon <Icon
name='Repeat' name='Repeat'
color={ color={
status.visibility === 'private' || status.visibility === 'direct' status.visibility === 'private' || status.visibility === 'direct'
? theme.disabled ? theme.disabled
: iconColorAction(status.reblogged) : color(status.reblogged)
} }
size={StyleConstants.Font.Size.L} size={StyleConstants.Font.Size.L}
/> />
{status.reblogs_count > 0 && ( {status.reblogs_count > 0 && (
<Text <Text
style={{ style={{
color: iconColorAction(status.reblogged), color: color(status.reblogged),
fontSize: StyleConstants.Font.Size.M, fontSize: StyleConstants.Font.Size.M,
marginLeft: StyleConstants.Spacing.XS marginLeft: StyleConstants.Spacing.XS
}} }}
@ -218,21 +219,21 @@ const TimelineActions = React.memo(
</Text> </Text>
)} )}
</> </>
), )
[status.reblogged, status.reblogs_count] }, [status.reblogged, status.reblogs_count])
) const childrenFavourite = useMemo(() => {
const childrenFavourite = useMemo( const color = (state: boolean) => (state ? theme.red : theme.secondary)
() => ( return (
<> <>
<Icon <Icon
name='Heart' name='Heart'
color={iconColorAction(status.favourited)} color={color(status.favourited)}
size={StyleConstants.Font.Size.L} size={StyleConstants.Font.Size.L}
/> />
{status.favourites_count > 0 && ( {status.favourites_count > 0 && (
<Text <Text
style={{ style={{
color: iconColorAction(status.favourited), color: color(status.favourited),
fontSize: StyleConstants.Font.Size.M, fontSize: StyleConstants.Font.Size.M,
marginLeft: StyleConstants.Spacing.XS, marginLeft: StyleConstants.Spacing.XS,
marginTop: 0 marginTop: 0
@ -242,19 +243,18 @@ const TimelineActions = React.memo(
</Text> </Text>
)} )}
</> </>
), )
[status.favourited, status.favourites_count] }, [status.favourited, status.favourites_count])
) const childrenBookmark = useMemo(() => {
const childrenBookmark = useMemo( const color = (state: boolean) => (state ? theme.yellow : theme.secondary)
() => ( return (
<Icon <Icon
name='Bookmark' name='Bookmark'
color={iconColorAction(status.bookmarked)} color={color(status.bookmarked)}
size={StyleConstants.Font.Size.L} size={StyleConstants.Font.Size.L}
/> />
), )
[status.bookmarked] }, [status.bookmarked])
)
return ( return (
<View <View

2
src/components/Timeline/Shared/Attachment/Audio.tsx
View File

@ -100,7 +100,7 @@ const AttachmentAudio: React.FC<Props> = ({
alignSelf: 'flex-end', alignSelf: 'flex-end',
width: '100%', width: '100%',
height: StyleConstants.Spacing.M + StyleConstants.Spacing.S * 2, height: StyleConstants.Spacing.M + StyleConstants.Spacing.S * 2,
backgroundColor: theme.backgroundOverlay, backgroundColor: theme.backgroundOverlayInvert,
paddingHorizontal: StyleConstants.Spacing.Global.PagePadding, paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
borderRadius: 100, borderRadius: 100,
opacity: sensitiveShown ? 0.35 : undefined opacity: sensitiveShown ? 0.35 : undefined

2
src/components/Timeline/Shared/Attachment/Unsupported.tsx
View File

@ -47,7 +47,7 @@ const AttachmentUnsupported: React.FC<Props> = ({
<Text <Text
style={[ style={[
styles.text, styles.text,
{ color: attachment.blurhash ? theme.background : theme.primary } { color: attachment.blurhash ? theme.backgroundDefault : theme.primaryDefault }
]} ]}
> >
{t('shared.attachment.unsupported.text')} {t('shared.attachment.unsupported.text')}

4
src/components/Timeline/Shared/Card.tsx
View File

@ -34,7 +34,7 @@ const TimelineCard = React.memo(
<View style={styles.right}> <View style={styles.right}>
<Text <Text
numberOfLines={2} numberOfLines={2}
style={[styles.rightTitle, { color: theme.primary }]} style={[styles.rightTitle, { color: theme.primaryDefault }]}
testID='title' testID='title'
> >
{card.title} {card.title}
@ -42,7 +42,7 @@ const TimelineCard = React.memo(
{card.description ? ( {card.description ? (
<Text <Text
numberOfLines={1} numberOfLines={1}
style={[styles.rightDescription, { color: theme.primary }]} style={[styles.rightDescription, { color: theme.primaryDefault }]}
testID='description' testID='description'
> >
{card.description} {card.description}

4
src/components/Timeline/Shared/Poll.tsx
View File

@ -186,7 +186,7 @@ const TimelinePoll: React.FC<Props> = ({
<Text style={styles.optionText}> <Text style={styles.optionText}>
<ParseEmojis content={option.title} emojis={poll.emojis} /> <ParseEmojis content={option.title} emojis={poll.emojis} />
</Text> </Text>
<Text style={[styles.optionPercentage, { color: theme.primary }]}> <Text style={[styles.optionPercentage, { color: theme.primaryDefault }]}>
{poll.votes_count {poll.votes_count
? Math.round( ? Math.round(
(option.votes_count / (option.votes_count /
@ -246,7 +246,7 @@ const TimelinePoll: React.FC<Props> = ({
style={styles.optionSelection} style={styles.optionSelection}
name={isSelected(index)} name={isSelected(index)}
size={StyleConstants.Font.Size.M} size={StyleConstants.Font.Size.M}
color={theme.primary} color={theme.primaryDefault}
/> />
<Text style={styles.optionText}> <Text style={styles.optionText}>
<ParseEmojis content={option.title} emojis={poll.emojis} /> <ParseEmojis content={option.title} emojis={poll.emojis} />

4
src/screens/Actions/Root.tsx
View File

@ -185,7 +185,7 @@ const ScreenActionsRoot = React.memo(
<Animated.View <Animated.View
style={[ style={[
styles.overlay, styles.overlay,
{ backgroundColor: theme.backgroundOverlay } { backgroundColor: theme.backgroundOverlayInvert }
]} ]}
> >
<PanGestureHandler onGestureEvent={onGestureEvent}> <PanGestureHandler onGestureEvent={onGestureEvent}>
@ -194,7 +194,7 @@ const ScreenActionsRoot = React.memo(
styles.container, styles.container,
styleTop, styleTop,
{ {
backgroundColor: theme.background, backgroundColor: theme.backgroundDefault,
paddingBottom: insets.bottom || StyleConstants.Spacing.L paddingBottom: insets.bottom || StyleConstants.Spacing.L
} }
]} ]}

20
src/screens/Announcements.tsx
View File

@ -74,8 +74,8 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
style={[ style={[
styles.announcement, styles.announcement,
{ {
borderColor: theme.primary, borderColor: theme.primaryDefault,
backgroundColor: theme.background backgroundColor: theme.backgroundDefault
} }
]} ]}
> >
@ -102,10 +102,10 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
style={[ style={[
styles.reaction, styles.reaction,
{ {
borderColor: reaction.me ? theme.disabled : theme.primary, borderColor: reaction.me ? theme.disabled : theme.primaryDefault,
backgroundColor: reaction.me backgroundColor: reaction.me
? theme.disabled ? theme.disabled
: theme.background : theme.backgroundDefault
} }
]} ]}
onPress={() => { onPress={() => {
@ -130,7 +130,7 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
)} )}
{reaction.count ? ( {reaction.count ? (
<Text <Text
style={[styles.reactionCount, { color: theme.primary }]} style={[styles.reactionCount, { color: theme.primaryDefault }]}
> >
{reaction.count} {reaction.count}
</Text> </Text>
@ -138,13 +138,13 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
</Pressable> </Pressable>
))} ))}
{/* <Pressable {/* <Pressable
style={[styles.reaction, { borderColor: theme.primary }]} style={[styles.reaction, { borderColor: theme.primaryDefault }]}
onPress={() => invisibleTextInputRef.current?.focus()} onPress={() => invisibleTextInputRef.current?.focus()}
> >
<Icon <Icon
name='Plus' name='Plus'
size={StyleConstants.Font.Size.M} size={StyleConstants.Font.Size.M}
color={theme.primary} color={theme.primaryDefault}
/> />
</Pressable> */} </Pressable> */}
</View> </View>
@ -202,7 +202,7 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
blurType={mode} blurType={mode}
blurAmount={20} blurAmount={20}
style={styles.base} style={styles.base}
reducedTransparencyFallbackColor={theme.background} reducedTransparencyFallbackColor={theme.backgroundDefault}
> >
<SafeAreaView style={styles.base}> <SafeAreaView style={styles.base}>
<View <View
@ -245,8 +245,8 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
style={[ style={[
styles.indicator, styles.indicator,
{ {
borderColor: theme.primary, borderColor: theme.primaryDefault,
backgroundColor: i === index ? theme.primary : undefined, backgroundColor: i === index ? theme.primaryDefault : undefined,
marginLeft: marginLeft:
i === query.data.length ? 0 : StyleConstants.Spacing.S i === query.data.length ? 0 : StyleConstants.Spacing.S
} }

6
src/screens/Compose/DraftsList/Root.tsx
View File

@ -55,7 +55,7 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
({ item }: { item: ComposeStateDraft }) => { ({ item }: { item: ComposeStateDraft }) => {
return ( return (
<Pressable <Pressable
style={[styles.draft, { backgroundColor: theme.background }]} style={[styles.draft, { backgroundColor: theme.backgroundDefault }]}
onPress={async () => { onPress={async () => {
setCheckingAttachments(true) setCheckingAttachments(true)
let tempDraft = item let tempDraft = item
@ -103,7 +103,7 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
<HeaderSharedCreated created_at={item.timestamp} /> <HeaderSharedCreated created_at={item.timestamp} />
<Text <Text
numberOfLines={2} numberOfLines={2}
style={[styles.text, { color: theme.primary }]} style={[styles.text, { color: theme.primaryDefault }]}
> >
{item.text || {item.text ||
item.spoiler || item.spoiler ||
@ -181,7 +181,7 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
visible={checkingAttachments} visible={checkingAttachments}
children={ children={
<View <View
style={[styles.modal, { backgroundColor: theme.backgroundOverlay }]} style={[styles.modal, { backgroundColor: theme.backgroundOverlayInvert }]}
children={ children={
<Text <Text
children='检查附件在服务器的状态…' children='检查附件在服务器的状态…'

4
src/screens/Compose/EditAttachment/Image.tsx
View File

@ -144,7 +144,7 @@ const ComposeEditAttachmentImage: React.FC<Props> = ({ index }) => {
<G> <G>
<Path <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' 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 <Circle
stroke={theme.primaryOverlay} stroke={theme.primaryOverlay}
@ -160,7 +160,7 @@ const ComposeEditAttachmentImage: React.FC<Props> = ({ index }) => {
</Animated.View> </Animated.View>
</PanGestureHandler> </PanGestureHandler>
</View> </View>
<Text style={[styles.imageFocusText, { color: theme.primary }]}> <Text style={[styles.imageFocusText, { color: theme.primaryDefault }]}>
{t('content.editAttachment.content.imageFocus')} {t('content.editAttachment.content.imageFocus')}
</Text> </Text>
</> </>

4
src/screens/Compose/EditAttachment/Root.tsx
View File

@ -61,13 +61,13 @@ const ComposeEditAttachmentRoot: React.FC<Props> = ({ index }) => {
<ScrollView ref={scrollViewRef}> <ScrollView ref={scrollViewRef}>
{mediaDisplay} {mediaDisplay}
<View style={styles.altTextContainer}> <View style={styles.altTextContainer}>
<Text style={[styles.altTextInputHeading, { color: theme.primary }]}> <Text style={[styles.altTextInputHeading, { color: theme.primaryDefault }]}>
{t('content.editAttachment.content.altText.heading')} {t('content.editAttachment.content.altText.heading')}
</Text> </Text>
<TextInput <TextInput
style={[ style={[
styles.altTextInput, styles.altTextInput,
{ borderColor: theme.border, color: theme.primary } { borderColor: theme.border, color: theme.primaryDefault }
]} ]}
onFocus={() => scrollViewRef.current?.scrollToEnd()} onFocus={() => scrollViewRef.current?.scrollToEnd()}
autoCapitalize='none' autoCapitalize='none'

2
src/screens/Compose/Posting.tsx
View File

@ -14,7 +14,7 @@ const ComposePosting = React.memo(
animationType='fade' animationType='fade'
visible={composeState.posting} visible={composeState.posting}
children={ children={
<View style={{ flex: 1, backgroundColor: theme.backgroundOverlay }} /> <View style={{ flex: 1, backgroundColor: theme.backgroundOverlayInvert }} />
} }
/> />
) )

10
src/screens/Compose/Root/Actions.tsx
View File

@ -20,7 +20,7 @@ const ComposeActions: React.FC = () => {
if (composeState.poll.active) return theme.disabled if (composeState.poll.active) return theme.disabled
if (composeState.attachments.uploads.length) { if (composeState.attachments.uploads.length) {
return theme.primary return theme.primaryDefault
} else { } else {
return theme.secondary return theme.secondary
} }
@ -43,7 +43,7 @@ const ComposeActions: React.FC = () => {
if (composeState.attachments.uploads.length) return theme.disabled if (composeState.attachments.uploads.length) return theme.disabled
if (composeState.poll.active) { if (composeState.poll.active) {
return theme.primary return theme.primaryDefault
} else { } else {
return theme.secondary return theme.secondary
} }
@ -144,7 +144,7 @@ const ComposeActions: React.FC = () => {
if (!composeState.emoji.emojis) return theme.disabled if (!composeState.emoji.emojis) return theme.disabled
if (composeState.emoji.active) { if (composeState.emoji.active) {
return theme.primary return theme.primaryDefault
} else { } else {
return theme.secondary return theme.secondary
} }
@ -166,7 +166,7 @@ const ComposeActions: React.FC = () => {
<View <View
style={[ style={[
styles.additions, styles.additions,
{ backgroundColor: theme.background, borderTopColor: theme.border } { backgroundColor: theme.backgroundDefault, borderTopColor: theme.border }
]} ]}
> >
<Pressable <Pressable
@ -196,7 +196,7 @@ const ComposeActions: React.FC = () => {
name='AlertTriangle' name='AlertTriangle'
size={24} size={24}
color={ color={
composeState.spoiler.active ? theme.primary : theme.secondary composeState.spoiler.active ? theme.primaryDefault : theme.secondary
} }
/> />
} }

12
src/screens/Compose/Root/Footer/Attachments.tsx
View File

@ -130,8 +130,8 @@ const ComposeAttachments: React.FC = () => {
style={[ style={[
styles.duration, styles.duration,
{ {
color: theme.background, color: theme.backgroundDefault,
backgroundColor: theme.backgroundOverlay backgroundColor: theme.backgroundOverlayInvert
} }
]} ]}
> >
@ -142,7 +142,7 @@ const ComposeAttachments: React.FC = () => {
<View <View
style={[ style={[
styles.uploading, styles.uploading,
{ backgroundColor: theme.backgroundOverlay } { backgroundColor: theme.backgroundOverlayInvert }
]} ]}
> >
<Circle <Circle
@ -196,7 +196,7 @@ const ComposeAttachments: React.FC = () => {
styles.container, styles.container,
{ {
width: DEFAULT_HEIGHT, width: DEFAULT_HEIGHT,
backgroundColor: theme.backgroundOverlay backgroundColor: theme.backgroundOverlayInvert
} }
]} ]}
onPress={async () => { onPress={async () => {
@ -238,9 +238,9 @@ const ComposeAttachments: React.FC = () => {
<Icon <Icon
name={composeState.attachments.sensitive ? 'CheckCircle' : 'Circle'} name={composeState.attachments.sensitive ? 'CheckCircle' : 'Circle'}
size={StyleConstants.Font.Size.L} 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')} {t('content.root.footer.attachments.sensitive')}
</Text> </Text>
</Pressable> </Pressable>

2
src/screens/Compose/Root/Footer/Poll.tsx
View File

@ -54,7 +54,7 @@ const ComposePoll: React.FC = () => {
styles.textInput, styles.textInput,
{ {
borderColor: theme.border, borderColor: theme.border,
color: hasConflict ? theme.red : theme.primary color: hasConflict ? theme.red : theme.primaryDefault
} }
]} ]}
placeholder={ placeholder={

2
src/screens/Compose/Root/Header/SpoilerInput.tsx
View File

@ -17,7 +17,7 @@ const ComposeSpoilerInput: React.FC = () => {
style={[ style={[
styles.spoilerInput, styles.spoilerInput,
{ {
color: theme.primary, color: theme.primaryDefault,
borderBottomColor: theme.border borderBottomColor: theme.border
} }
]} ]}

2
src/screens/Compose/Root/Header/TextInput.tsx
View File

@ -17,7 +17,7 @@ const ComposeTextInput: React.FC = () => {
style={[ style={[
styles.textInput, styles.textInput,
{ {
color: theme.primary, color: theme.primaryDefault,
borderBottomColor: theme.border borderBottomColor: theme.border
} }
]} ]}

2
src/screens/Tabs.tsx
View File

@ -96,7 +96,7 @@ const ScreenTabs = React.memo(
) )
const tabBarOptions = useMemo( const tabBarOptions = useMemo(
() => ({ () => ({
activeTintColor: theme.primary, activeTintColor: theme.primaryDefault,
inactiveTintColor: theme.secondary, inactiveTintColor: theme.secondary,
showLabel: false, showLabel: false,
...(Platform.OS === 'android' && { keyboardHidesTabBar: true }) ...(Platform.OS === 'android' && { keyboardHidesTabBar: true })

7
src/screens/Tabs/Me/Fontsize.tsx
View File

@ -90,7 +90,8 @@ const ScreenMeSettingsFontsize: React.FC<StackScreenProps<
initialSize === size initialSize === size
? StyleConstants.Font.Weight.Bold ? StyleConstants.Font.Weight.Bold
: undefined, : undefined,
color: initialSize === size ? theme.primary : theme.secondary, color:
initialSize === size ? theme.primaryDefault : theme.secondary,
borderWidth: StyleSheet.hairlineWidth, borderWidth: StyleSheet.hairlineWidth,
borderColor: theme.border borderColor: theme.border
} }
@ -105,7 +106,7 @@ const ScreenMeSettingsFontsize: React.FC<StackScreenProps<
return ( return (
<ScrollView scrollEnabled={false}> <ScrollView scrollEnabled={false}>
<Text style={[styles.header, { color: theme.primary }]}> <Text style={[styles.header, { color: theme.primaryDefault }]}>
{t('content.showcase')} {t('content.showcase')}
</Text> </Text>
<View> <View>
@ -119,7 +120,7 @@ const ScreenMeSettingsFontsize: React.FC<StackScreenProps<
extraMarginRight={-StyleConstants.Spacing.Global.PagePadding} extraMarginRight={-StyleConstants.Spacing.Global.PagePadding}
/> />
</View> </View>
<Text style={[styles.header, { color: theme.primary }]}> <Text style={[styles.header, { color: theme.primaryDefault }]}>
{t('content.availableSizes')} {t('content.availableSizes')}
</Text> </Text>
<View style={styles.sizesDemo}>{sizesDemo}</View> <View style={styles.sizesDemo}>{sizesDemo}</View>

2
src/screens/Tabs/Me/Settings/Dev.tsx
View File

@ -22,7 +22,7 @@ const SettingsDev: React.FC = () => {
style={{ style={{
paddingHorizontal: StyleConstants.Spacing.Global.PagePadding, paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
...StyleConstants.FontStyle.S, ...StyleConstants.FontStyle.S,
color: theme.primary color: theme.primaryDefault
}} }}
> >
{instances[instanceActive]?.token} {instances[instanceActive]?.token}

4
src/screens/Tabs/Me/Switch/Root.tsx
View File

@ -56,7 +56,7 @@ const ScreenMeSwitchRoot: React.FC = () => {
return ( return (
<ScrollView style={styles.base} keyboardShouldPersistTaps='always'> <ScrollView style={styles.base} keyboardShouldPersistTaps='always'>
<View style={[styles.firstSection, { borderBottomColor: theme.border }]}> <View style={[styles.firstSection, { borderBottomColor: theme.border }]}>
<Text style={[styles.header, { color: theme.primary }]}> <Text style={[styles.header, { color: theme.primaryDefault }]}>
{t('content.existing')} {t('content.existing')}
</Text> </Text>
<View style={styles.accountButtons}> <View style={styles.accountButtons}>
@ -87,7 +87,7 @@ const ScreenMeSwitchRoot: React.FC = () => {
</View> </View>
<View style={styles.secondSection}> <View style={styles.secondSection}>
<Text style={[styles.header, { color: theme.primary }]}> <Text style={[styles.header, { color: theme.primaryDefault }]}>
{t('content.new')} {t('content.new')}
</Text> </Text>
<ComponentInstance disableHeaderImage goBack /> <ComponentInstance disableHeaderImage goBack />

2
src/screens/Tabs/Shared/Account/Attachments.tsx
View File

@ -70,7 +70,7 @@ const AccountAttachments = React.memo(
<View <View
style={{ style={{
marginHorizontal: StyleConstants.Spacing.Global.PagePadding, marginHorizontal: StyleConstants.Spacing.Global.PagePadding,
backgroundColor: theme.backgroundOverlay, backgroundColor: theme.backgroundOverlayInvert,
width: width, width: width,
height: width, height: width,
justifyContent: 'center', justifyContent: 'center',

2
src/screens/Tabs/Shared/Account/Information/Fields.tsx
View File

@ -34,7 +34,7 @@ const AccountInformationFields = React.memo(
<Icon <Icon
name='CheckCircle' name='CheckCircle'
size={StyleConstants.Font.Size.M} size={StyleConstants.Font.Size.M}
color={theme.primary} color={theme.primaryDefault}
style={styles.fieldCheck} style={styles.fieldCheck}
/> />
) : null} ) : null}

6
src/screens/Tabs/Shared/Account/Information/Stats.tsx
View File

@ -24,7 +24,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
<View style={[styles.stats, { flexDirection: 'row' }]}> <View style={[styles.stats, { flexDirection: 'row' }]}>
{account ? ( {account ? (
<Text <Text
style={[styles.stat, { color: theme.primary }]} style={[styles.stat, { color: theme.primaryDefault }]}
children={t('content.summary.statuses_count', { children={t('content.summary.statuses_count', {
count: account.statuses_count || 0 count: account.statuses_count || 0
})} })}
@ -46,7 +46,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
)} )}
{account ? ( {account ? (
<Text <Text
style={[styles.stat, { color: theme.primary, textAlign: 'right' }]} style={[styles.stat, { color: theme.primaryDefault, textAlign: 'right' }]}
children={t('content.summary.following_count', { children={t('content.summary.following_count', {
count: account.following_count count: account.following_count
})} })}
@ -73,7 +73,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
)} )}
{account ? ( {account ? (
<Text <Text
style={[styles.stat, { color: theme.primary, textAlign: 'center' }]} style={[styles.stat, { color: theme.primaryDefault, textAlign: 'center' }]}
children={t('content.summary.followers_count', { children={t('content.summary.followers_count', {
count: account.followers_count count: account.followers_count
})} })}

2
src/screens/Tabs/Shared/Account/Nav.tsx
View File

@ -49,7 +49,7 @@ const AccountNav: React.FC<Props> = ({ scrollY, account }) => {
style={[ style={[
styles.base, styles.base,
styleOpacity, styleOpacity,
{ backgroundColor: theme.background, height: headerHeight } { backgroundColor: theme.backgroundDefault, height: headerHeight }
]} ]}
> >
<View <View

18
src/screens/Tabs/Shared/Search.tsx
View File

@ -73,7 +73,7 @@ const TabSharedSearch: React.FC<SharedSearchProp> = ({
style={[ style={[
styles.emptyDefault, styles.emptyDefault,
styles.emptyFontSize, styles.emptyFontSize,
{ color: theme.primary } { color: theme.primaryDefault }
]} ]}
> >
<Trans <Trans
@ -81,25 +81,25 @@ const TabSharedSearch: React.FC<SharedSearchProp> = ({
components={{ bold: <Text style={styles.emptyFontBold} /> }} components={{ bold: <Text style={styles.emptyFontBold} /> }}
/> />
</Text> </Text>
<Text style={[styles.emptyAdvanced, { color: theme.primary }]}> <Text style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}>
{t('content.empty.advanced.header')} {t('content.empty.advanced.header')}
</Text> </Text>
<Text style={[styles.emptyAdvanced, { color: theme.primary }]}> <Text style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}>
<Text style={{ color: theme.secondary }}>@username@domain</Text> <Text style={{ color: theme.secondary }}>@username@domain</Text>
{' '} {' '}
{t('content.empty.advanced.example.account')} {t('content.empty.advanced.example.account')}
</Text> </Text>
<Text style={[styles.emptyAdvanced, { color: theme.primary }]}> <Text style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}>
<Text style={{ color: theme.secondary }}>#example</Text> <Text style={{ color: theme.secondary }}>#example</Text>
{' '} {' '}
{t('content.empty.advanced.example.hashtag')} {t('content.empty.advanced.example.hashtag')}
</Text> </Text>
<Text style={[styles.emptyAdvanced, { color: theme.primary }]}> <Text style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}>
<Text style={{ color: theme.secondary }}>URL</Text> <Text style={{ color: theme.secondary }}>URL</Text>
{' '} {' '}
{t('content.empty.advanced.example.statusLink')} {t('content.empty.advanced.example.statusLink')}
</Text> </Text>
<Text style={[styles.emptyAdvanced, { color: theme.primary }]}> <Text style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}>
<Text style={{ color: theme.secondary }}>URL</Text> <Text style={{ color: theme.secondary }}>URL</Text>
{' '} {' '}
{t('content.empty.advanced.example.accountLink')} {t('content.empty.advanced.example.accountLink')}
@ -113,9 +113,9 @@ const TabSharedSearch: React.FC<SharedSearchProp> = ({
const sectionHeader = useCallback( const sectionHeader = useCallback(
({ section: { translation } }) => ( ({ section: { translation } }) => (
<View <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} {translation}
</Text> </Text>
</View> </View>
@ -126,7 +126,7 @@ const TabSharedSearch: React.FC<SharedSearchProp> = ({
({ section: { data, translation } }) => ({ section: { data, translation } }) =>
!data.length ? ( !data.length ? (
<View <View
style={[styles.sectionFooter, { backgroundColor: theme.background }]} style={[styles.sectionFooter, { backgroundColor: theme.backgroundDefault }]}
> >
<Text style={[styles.sectionFooterText, { color: theme.secondary }]}> <Text style={[styles.sectionFooterText, { color: theme.secondary }]}>
<Trans <Trans

10
src/screens/Tabs/Shared/sharedScreens.tsx
View File

@ -14,11 +14,11 @@ import { debounce } from 'lodash'
import React from 'react' import React from 'react'
import { Trans, useTranslation } from 'react-i18next' import { Trans, useTranslation } from 'react-i18next'
import { Platform, StyleSheet, Text, TextInput, View } from 'react-native' 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 { import {
NativeStackNavigationEventMap, NativeStackNavigationEventMap,
NativeStackNavigatorProps NativeStackNavigatorProps
} from 'react-native-screens/lib/typescript/native-stack/types' } from 'react-native-screens/lib/typescript/types'
export type BaseScreens = export type BaseScreens =
| Nav.TabLocalStackParamList | Nav.TabLocalStackParamList
@ -103,7 +103,7 @@ const sharedScreens = (
<Text <Text
style={{ style={{
...StyleConstants.FontStyle.M, ...StyleConstants.FontStyle.M,
color: theme.primary, color: theme.primaryDefault,
fontWeight: StyleConstants.Font.Weight.Bold fontWeight: StyleConstants.Font.Weight.Bold
}} }}
/> />
@ -153,7 +153,7 @@ const sharedScreens = (
style={[ style={[
styles.textInput, styles.textInput,
{ {
color: theme.primary color: theme.primaryDefault
} }
]} ]}
children={t('sharedSearch:content.header.prefix')} children={t('sharedSearch:content.header.prefix')}
@ -166,7 +166,7 @@ const sharedScreens = (
styles.textInput, styles.textInput,
{ {
flex: 1, flex: 1,
color: theme.primary, color: theme.primaryDefault,
paddingLeft: StyleConstants.Spacing.XS paddingLeft: StyleConstants.Spacing.XS
} }
]} ]}

51
src/utils/styles/themes.ts
View File

@ -1,16 +1,17 @@
import { DefaultTheme, DarkTheme } from '@react-navigation/native' import { DefaultTheme, DarkTheme } from '@react-navigation/native'
export type ColorDefinitions = export type ColorDefinitions =
| 'primary' | 'primaryDefault'
| 'primaryOverlay' | 'primaryOverlay'
| 'secondary' | 'secondary'
| 'disabled' | 'disabled'
| 'blue' | 'blue'
| 'red' | 'red'
| 'background' | 'green'
| 'backgroundGradientStart' | 'yellow'
| 'backgroundGradientEnd' | 'backgroundDefault'
| 'backgroundOverlay' | 'backgroundOverlayDefault'
| 'backgroundOverlayInvert'
| 'border' | 'border'
| 'shimmerDefault' | 'shimmerDefault'
| 'shimmerHighlight' | 'shimmerHighlight'
@ -21,7 +22,7 @@ const themeColors: {
dark: string dark: string
} }
} = { } = {
primary: { primaryDefault: {
light: 'rgb(18, 18, 18)', light: 'rgb(18, 18, 18)',
dark: 'rgb(180, 180, 180)' dark: 'rgb(180, 180, 180)'
}, },
@ -45,27 +46,33 @@ const themeColors: {
light: 'rgb(225, 45, 35)', light: 'rgb(225, 45, 35)',
dark: 'rgb(225, 78, 79)' 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)', light: 'rgb(250, 250, 250)',
dark: 'rgb(18, 18, 18)' dark: 'rgb(18, 18, 18)'
}, },
backgroundGradientStart: { backgroundOverlayDefault: {
light: 'rgba(250, 250, 250, 0.5)', light: 'rgba(250, 250, 250, 0.5)',
dark: 'rgba(18, 18, 18, 0.5)' dark: 'rgba(0, 0, 0, 0.5)'
}, },
backgroundGradientEnd: { backgroundOverlayInvert: {
light: 'rgba(250, 250, 250, 1)',
dark: 'rgba(18, 18, 18, 1)'
},
backgroundOverlay: {
light: 'rgba(25, 25, 25, 0.5)', light: 'rgba(25, 25, 25, 0.5)',
dark: 'rgba(0, 0, 0, 0.5)' dark: 'rgba(0, 0, 0, 0.5)'
}, },
border: { border: {
light: 'rgba(25, 25, 25, 0.3)', light: 'rgba(25, 25, 25, 0.3)',
dark: 'rgba(255, 255, 255, 0.3)' dark: 'rgba(255, 255, 255, 0.3)'
}, },
shimmerDefault: { shimmerDefault: {
light: 'rgba(25, 25, 25, 0.05)', light: 'rgba(25, 25, 25, 0.05)',
dark: 'rgba(250, 250, 250, 0.05)' dark: 'rgba(250, 250, 250, 0.05)'
@ -91,10 +98,10 @@ const themes = {
...DefaultTheme, ...DefaultTheme,
colors: { colors: {
...DefaultTheme.colors, ...DefaultTheme.colors,
primary: themeColors.primary.light, primary: themeColors.primaryDefault.light,
background: themeColors.background.light, background: themeColors.backgroundDefault.light,
card: themeColors.background.light, card: themeColors.backgroundDefault.light,
text: themeColors.primary.light, text: themeColors.primaryDefault.light,
border: themeColors.border.light, border: themeColors.border.light,
notification: themeColors.red.light notification: themeColors.red.light
} }
@ -103,10 +110,10 @@ const themes = {
...DarkTheme, ...DarkTheme,
colors: { colors: {
...DarkTheme.colors, ...DarkTheme.colors,
primary: themeColors.primary.dark, primary: themeColors.primaryDefault.dark,
background: themeColors.background.dark, background: themeColors.backgroundDefault.dark,
card: themeColors.background.dark, card: themeColors.backgroundDefault.dark,
text: themeColors.primary.dark, text: themeColors.primaryDefault.dark,
border: themeColors.border.dark, border: themeColors.border.dark,
notification: themeColors.red.dark notification: themeColors.red.dark
} }