From b58c264556c307f0a5ebdb0f6f405730f01c4849 Mon Sep 17 00:00:00 2001
From: GleidsonDaniel <gleidson10daniel@hotmail.com>
Date: Mon, 18 Mar 2024 15:36:52 -0300
Subject: [PATCH] wip: end colors

---
 .../index.tsx                                 |  6 +-
 .../ActionSheet/BottomSheetContent.tsx        |  2 +-
 app/containers/AudioPlayer/PlayButton.tsx     |  2 +-
 app/containers/AudioPlayer/Seek.tsx           |  2 +-
 app/containers/BackgroundContainer/index.tsx  |  4 +-
 app/containers/Button/index.tsx               |  2 +-
 app/containers/Check.tsx                      |  2 +-
 app/containers/Chip/index.tsx                 |  6 +-
 app/containers/CollapsibleText/index.tsx      |  8 +-
 .../HeaderButton/HeaderButtons.stories.tsx    |  2 +-
 .../IncomingCallNotification/style.tsx        |  2 +-
 app/containers/List/ListHeader.tsx            |  2 +-
 app/containers/List/ListInfo.tsx              |  2 +-
 app/containers/List/ListItem.tsx              |  2 +-
 .../LoginServices/ServicesSeparator.tsx       |  2 +-
 app/containers/OrSeparator.tsx                |  2 +-
 app/containers/ReactionsList/AllTab.tsx       |  2 +-
 .../ReactionsList/ReactionsTabBar.tsx         |  4 +-
 app/containers/ReactionsList/UsersList.tsx    |  2 +-
 app/containers/RoomItem/Actions.tsx           |  2 +-
 app/containers/RoomItem/LastMessage.tsx       |  2 +-
 app/containers/RoomItem/Tag.tsx               |  4 +-
 app/containers/RoomItem/UpdatedAt.tsx         |  2 +-
 app/containers/ServerItem/index.tsx           |  4 +-
 .../SupportedVersionsExpired.tsx              |  4 +-
 .../SupportedVersionsWarning.tsx              |  6 +-
 app/containers/TextInput/FormTextInput.tsx    |  6 +-
 app/containers/ThreadDetails.tsx              |  2 +-
 app/containers/Touch.tsx                      |  4 +-
 app/containers/UIKit/DatePicker.tsx           |  6 +-
 app/containers/UIKit/MultiSelect/Chips.tsx    |  2 +-
 app/containers/UIKit/MultiSelect/Input.tsx    |  2 +-
 app/containers/UIKit/MultiSelect/Items.tsx    |  2 +-
 app/containers/UIKit/Overflow.tsx             |  6 +-
 app/containers/UIKit/Section.tsx              |  2 +-
 .../VideoConferenceBlock/components/styles.ts |  4 +-
 app/containers/UIKit/index.tsx                |  2 +-
 app/containers/UserGeneratedContentRules.tsx  |  4 +-
 app/containers/UserItem.tsx                   |  8 +-
 app/containers/markdown/AtMention.tsx         |  2 +-
 app/containers/markdown/BlockQuote.tsx        |  2 +-
 app/containers/markdown/Emoji.tsx             |  2 +-
 app/containers/markdown/Hashtag.tsx           |  2 +-
 app/containers/markdown/Link.tsx              |  2 +-
 app/containers/markdown/ListItem.tsx          |  2 +-
 app/containers/markdown/Preview.tsx           |  2 +-
 app/containers/markdown/Table.tsx             |  4 +-
 app/containers/markdown/TableCell.tsx         |  4 +-
 app/containers/markdown/TableRow.tsx          |  2 +-
 app/containers/markdown/index.tsx             | 16 ++--
 app/containers/markdown/new/Code.tsx          |  4 +-
 app/containers/markdown/new/CodeLine.tsx      |  2 +-
 app/containers/markdown/new/Emoji.tsx         |  4 +-
 app/containers/markdown/new/Heading.tsx       |  2 +-
 app/containers/markdown/new/Image.tsx         |  4 +-
 app/containers/markdown/new/InlineCode.tsx    |  6 +-
 app/containers/markdown/new/Katex.tsx         |  4 +-
 app/containers/markdown/new/Link.tsx          |  2 +-
 app/containers/markdown/new/OrderedList.tsx   |  4 +-
 app/containers/markdown/new/Paragraph.tsx     |  2 +-
 app/containers/markdown/new/Quote.tsx         |  2 +-
 app/containers/markdown/new/TaskList.tsx      |  4 +-
 app/containers/markdown/new/UnorderedList.tsx |  4 +-
 app/containers/message/Broadcast.tsx          |  4 +-
 app/containers/message/CallButton.tsx         |  4 +-
 .../Components/CollapsibleQuote/index.tsx     |  4 +-
 .../Components/RightIcons/MessageError.tsx    |  2 +-
 .../Components/RightIcons/ReadReceipt.tsx     |  2 +-
 app/containers/message/Discussion.tsx         |  6 +-
 app/containers/message/Image.tsx              |  4 +-
 app/containers/message/Reactions.tsx          | 14 ++--
 app/containers/message/RepliedThread.tsx      |  4 +-
 app/containers/message/Reply.tsx              | 14 ++--
 app/containers/message/Thread.tsx             |  2 +-
 app/containers/message/Urls.tsx               |  6 +-
 app/containers/message/Video.tsx              |  2 +-
 .../OmnichannelHeader/OmnichannelQueue.tsx    | 10 +--
 .../containers/OmnichannelHeader/index.tsx    |  2 +-
 app/lib/constants/colors.ts                   | 75 ++++++-------------
 .../useVideoConf/StartACallActionSheet.tsx    |  2 +-
 app/lib/methods/helpers/navigation/index.ts   |  2 +-
 app/views/AuthLoadingView.tsx                 |  2 +-
 app/views/AutoTranslateView/index.tsx         |  2 +-
 app/views/CannedResponseDetail.tsx            |  4 +-
 .../CannedResponseItem.tsx                    |  6 +-
 .../ChangeAvatarView/AvatarSuggestionItem.tsx |  2 +-
 app/views/ChangeAvatarView/index.tsx          |  2 +-
 app/views/CloseLivechatView.tsx               |  2 +-
 app/views/DefaultBrowserView/Item.tsx         |  2 +-
 app/views/DirectoryView/Options.tsx           | 10 +--
 app/views/DirectoryView/index.tsx             |  6 +-
 app/views/DisplayPrefsView.tsx                |  4 +-
 .../ChangePassword.tsx                        |  2 +-
 app/views/E2EEncryptionSecurityView/index.tsx |  2 +-
 app/views/E2EEnterYourPasswordView.tsx        |  4 +-
 app/views/E2EHowItWorksView.tsx               |  2 +-
 app/views/E2ESaveYourPasswordView.tsx         |  6 +-
 .../SelectPersonOrChannel.tsx                 |  2 +-
 app/views/ForwardMessageView/index.tsx        |  2 +-
 app/views/InviteUsersEditView/Picker.tsx      |  2 +-
 app/views/LanguageView/LanguageItem.tsx       |  2 +-
 app/views/LoginView/UserForm.tsx              |  2 +-
 .../MediaAutoDownloadView/ListPicker.tsx      |  2 +-
 app/views/NewMessageView/ButtonCreate.tsx     |  4 +-
 app/views/NewServerView/ServerInput/Item.tsx  |  2 +-
 app/views/NewServerView/index.tsx             |  2 +-
 .../NotificationPreferencesView/index.tsx     |  2 +-
 app/views/PickerView.tsx                      |  2 +-
 .../DeleteAccountActionSheetContent/index.tsx |  4 +-
 app/views/ProfileView/index.tsx               |  4 +-
 app/views/ReadReceiptView/index.tsx           |  2 +-
 app/views/RegisterView.tsx                    |  2 +-
 app/views/ReportUserView/index.tsx            |  2 +-
 app/views/RoomActionsView/index.tsx           | 12 +--
 app/views/RoomInfoEditView/index.tsx          |  2 +-
 .../components/RoomInfoButtons.tsx            |  2 +-
 app/views/RoomView/Banner.tsx                 |  4 +-
 .../RoomView/List/components/NavBottomFAB.tsx |  4 +-
 app/views/RoomView/Separator.tsx              |  6 +-
 app/views/RoomView/UploadProgress.tsx         |  8 +-
 app/views/RoomView/index.tsx                  |  4 +-
 app/views/RoomsListView/ListHeader/index.tsx  |  2 +-
 app/views/RoomsListView/ServerDropdown.tsx    |  4 +-
 app/views/RoomsListView/index.tsx             |  4 +-
 app/views/ScreenLockConfigView.tsx            |  2 +-
 app/views/SelectListView.tsx                  | 10 +--
 app/views/SelectedUsersView/Header.tsx        |  2 +-
 app/views/SelectedUsersView/index.tsx         |  2 +-
 app/views/SettingsView/index.tsx              |  4 +-
 app/views/ShareListView/index.tsx             |  2 +-
 app/views/ShareView/Preview.tsx               |  4 +-
 app/views/ShareView/Thumbs.tsx                | 16 ++--
 app/views/SidebarView/SidebarItem.tsx         |  2 +-
 app/views/SidebarView/index.tsx               |  2 +-
 app/views/ThemeView.tsx                       |  2 +-
 app/views/UserPreferencesView/ListPicker.tsx  |  2 +-
 app/views/WorkspaceView/ServerAvatar.tsx      |  2 +-
 137 files changed, 271 insertions(+), 302 deletions(-)

diff --git a/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx b/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
index d613039d1..e449ed96a 100644
--- a/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
+++ b/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
@@ -54,7 +54,7 @@ const FooterButtons = ({
 				onPress={cancelAction}
 			/>
 			<Button
-				style={{ flex: 1, backgroundColor: confirmBackgroundColor || colors.dangerColor }}
+				style={{ flex: 1, backgroundColor: confirmBackgroundColor || colors.buttonBackgroundDangerDefault }}
 				title={confirmTitle}
 				onPress={confirmAction}
 				disabled={disabled}
@@ -100,7 +100,7 @@ const ActionSheetContentWithInputAndSubmit = ({
 		<View style={sharedStyles.containerScrollView} testID='action-sheet-content-with-input-and-submit'>
 			<>
 				<View style={styles.titleContainer}>
-					{iconName ? <CustomIcon name={iconName} size={32} color={iconColor || colors.dangerColor} /> : null}
+					{iconName ? <CustomIcon name={iconName} size={32} color={iconColor || colors.buttonBackgroundDangerDefault} /> : null}
 					<Text style={[styles.titleContainerText, { color: colors.fontDefault, paddingLeft: iconName ? 16 : 0 }]}>
 						{title}
 					</Text>
@@ -126,7 +126,7 @@ const ActionSheetContentWithInputAndSubmit = ({
 				/>
 			) : null}
 			<FooterButtons
-				confirmBackgroundColor={confirmBackgroundColor || colors.actionTintColor}
+				confirmBackgroundColor={confirmBackgroundColor || colors.strokeHighlight}
 				cancelAction={onCancel || hideActionSheet}
 				confirmAction={() => onSubmit(inputValue)}
 				cancelTitle={i18n.t('Cancel')}
diff --git a/app/containers/ActionSheet/BottomSheetContent.tsx b/app/containers/ActionSheet/BottomSheetContent.tsx
index 44780b9b9..77c016bd9 100644
--- a/app/containers/ActionSheet/BottomSheetContent.tsx
+++ b/app/containers/ActionSheet/BottomSheetContent.tsx
@@ -30,7 +30,7 @@ const BottomSheetContent = React.memo(({ options, hasCancel, hide, children, onL
 				style={[styles.button, { backgroundColor: colors.surfaceHover }]}
 				accessibilityLabel={I18n.t('Cancel')}
 			>
-				<Text style={[styles.text, { color: colors.bodyText }]}>{I18n.t('Cancel')}</Text>
+				<Text style={[styles.text, { color: colors.fontDefault }]}>{I18n.t('Cancel')}</Text>
 			</Touch>
 		) : null;
 
diff --git a/app/containers/AudioPlayer/PlayButton.tsx b/app/containers/AudioPlayer/PlayButton.tsx
index 6e13c5079..414e020a0 100644
--- a/app/containers/AudioPlayer/PlayButton.tsx
+++ b/app/containers/AudioPlayer/PlayButton.tsx
@@ -31,7 +31,7 @@ const Icon = ({ audioState, disabled }: { audioState: TAudioState; disabled: boo
 		customIconName = 'play-shape-filled';
 	}
 
-	return <CustomIcon name={customIconName} size={24} color={disabled ? colors.tintDisabled : colors.buttonFontPrimary} />;
+	return <CustomIcon name={customIconName} size={24} color={disabled ? colors.buttonBackgroundPrimaryDisabled : colors.buttonFontPrimary} />;
 };
 
 const PlayButton = ({ onPress, disabled = false, audioState }: IButton): React.ReactElement => {
diff --git a/app/containers/AudioPlayer/Seek.tsx b/app/containers/AudioPlayer/Seek.tsx
index a63dd32ca..4ae961b2e 100644
--- a/app/containers/AudioPlayer/Seek.tsx
+++ b/app/containers/AudioPlayer/Seek.tsx
@@ -101,7 +101,7 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) =>
 		} as TextInputProps;
 	}, [timeLabel, duration, currentTime]);
 
-	const thumbColor = loaded ? colors.buttonBackgroundPrimaryDefault : colors.tintDisabled;
+	const thumbColor = loaded ? colors.buttonBackgroundPrimaryDefault : colors.buttonBackgroundPrimaryDisabled;
 
 	// TouchableNativeFeedback is avoiding do a long press message when seeking the audio
 	return (
diff --git a/app/containers/BackgroundContainer/index.tsx b/app/containers/BackgroundContainer/index.tsx
index 34601df92..2d138b4ba 100644
--- a/app/containers/BackgroundContainer/index.tsx
+++ b/app/containers/BackgroundContainer/index.tsx
@@ -36,8 +36,8 @@ const BackgroundContainer = ({ text, loading }: IBackgroundContainer): React.Rea
 	return (
 		<View style={styles.container}>
 			<ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} />
-			{text && !loading ? <Text style={[styles.text, { color: themes[theme].auxiliaryTintColor }]}>{text}</Text> : null}
-			{loading ? <ActivityIndicator style={styles.text} color={themes[theme].auxiliaryTintColor} /> : null}
+			{text && !loading ? <Text style={[styles.text, { color: themes[theme].strokeHighlight }]}>{text}</Text> : null}
+			{loading ? <ActivityIndicator style={styles.text} color={themes[theme].strokeHighlight} /> : null}
 		</View>
 	);
 };
diff --git a/app/containers/Button/index.tsx b/app/containers/Button/index.tsx
index 3be8c990c..dc0dd9e72 100644
--- a/app/containers/Button/index.tsx
+++ b/app/containers/Button/index.tsx
@@ -50,7 +50,7 @@ const Button = ({
 	const { colors } = useTheme();
 	const isPrimary = type === 'primary';
 
-	let textColor = isPrimary ? colors.fontWhite : colors.bodyText;
+	let textColor = isPrimary ? colors.fontWhite : colors.fontDefault;
 	if (color) {
 		textColor = color;
 	}
diff --git a/app/containers/Check.tsx b/app/containers/Check.tsx
index a931fe678..d97b71f9e 100644
--- a/app/containers/Check.tsx
+++ b/app/containers/Check.tsx
@@ -15,7 +15,7 @@ const styles = StyleSheet.create({
 
 const Check = React.memo(() => {
 	const { theme } = useTheme();
-	return <CustomIcon style={styles.icon} color={themes[theme].tintColor} size={22} name='check' />;
+	return <CustomIcon style={styles.icon} color={themes[theme].badgeBackgroundLevel2} size={22} name='check' />;
 });
 
 export default Check;
diff --git a/app/containers/Chip/index.tsx b/app/containers/Chip/index.tsx
index f65e9539e..6c41e8647 100644
--- a/app/containers/Chip/index.tsx
+++ b/app/containers/Chip/index.tsx
@@ -49,20 +49,20 @@ const Chip = ({ avatar, text, onPress, testID, style }: IChip) => {
 			style={({ pressed }) => [
 				styles.pressable,
 				{
-					backgroundColor: pressed ? colors.bannerBackground : colors.surfaceHover
+					backgroundColor: pressed ? colors.surfaceNeutral : colors.surfaceHover
 				},
 				style
 			]}
 			disabled={!onPress}
 			onPress={() => onPress?.()}
 			android_ripple={{
-				color: colors.bannerBackground
+				color: colors.surfaceNeutral
 			}}
 		>
 			<View style={styles.container}>
 				{avatar ? <Avatar text={avatar} size={28} style={styles.avatar} /> : null}
 				<View style={styles.textContainer}>
-					<Text style={[styles.name, { color: colors.bodyText }]} numberOfLines={1}>
+					<Text style={[styles.name, { color: colors.fontDefault }]} numberOfLines={1}>
 						{text}
 					</Text>
 				</View>
diff --git a/app/containers/CollapsibleText/index.tsx b/app/containers/CollapsibleText/index.tsx
index 514740b16..082e5a94c 100644
--- a/app/containers/CollapsibleText/index.tsx
+++ b/app/containers/CollapsibleText/index.tsx
@@ -39,10 +39,10 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
 	if (truncatedText && showTruncated) {
 		return (
 			<Text testID={`collapsible-text-truncated-${m}`}>
-				<Text accessibilityLabel={truncatedText} style={[styles.text, { color: colors.bodyText }, ...style]}>
+				<Text accessibilityLabel={truncatedText} style={[styles.text, { color: colors.fontDefault }, ...style]}>
 					{`${truncatedText}... `}
 				</Text>
-				<Text onPress={() => setShowTruncated(false)} style={[styles.textInfo, { color: colors.actionTintColor }]}>
+				<Text onPress={() => setShowTruncated(false)} style={[styles.textInfo, { color: colors.strokeHighlight }]}>
 					{I18n.t('Show_more')}
 				</Text>
 			</Text>
@@ -52,7 +52,7 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
 	return (
 		<Text
 			accessibilityLabel={m}
-			style={[styles.text, { color: colors.bodyText, height: !showTruncated ? undefined : 0 }, ...style]}
+			style={[styles.text, { color: colors.fontDefault, height: !showTruncated ? undefined : 0 }, ...style]}
 			testID={`collapsible-text-${m}`}
 			onTextLayout={event => {
 				const { lines } = event.nativeEvent;
@@ -74,7 +74,7 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
 				<Text
 					testID='collapsible-text-show-less'
 					onPress={() => setShowTruncated(true)}
-					style={[styles.textInfo, { color: colors.actionTintColor }]}
+					style={[styles.textInfo, { color: colors.strokeHighlight }]}
 				>
 					{` ${I18n.t('Show_less')}`}
 				</Text>
diff --git a/app/containers/HeaderButton/HeaderButtons.stories.tsx b/app/containers/HeaderButton/HeaderButtons.stories.tsx
index df28ca672..60a717259 100644
--- a/app/containers/HeaderButton/HeaderButtons.stories.tsx
+++ b/app/containers/HeaderButton/HeaderButtons.stories.tsx
@@ -120,7 +120,7 @@ const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => (
 			<HeaderExample
 				left={() => (
 					<HeaderButton.Container left>
-						<HeaderButton.Drawer badge={() => <HeaderButton.BadgeWarn color={colors[theme].dangerColor} />} />
+						<HeaderButton.Drawer badge={() => <HeaderButton.BadgeWarn color={colors[theme].buttonBackgroundDangerDefault} />} />
 						<HeaderButton.Item iconName='threads' />
 					</HeaderButton.Container>
 				)}
diff --git a/app/containers/InAppNotification/IncomingCallNotification/style.tsx b/app/containers/InAppNotification/IncomingCallNotification/style.tsx
index aa0149784..4b3319afa 100644
--- a/app/containers/InAppNotification/IncomingCallNotification/style.tsx
+++ b/app/containers/InAppNotification/IncomingCallNotification/style.tsx
@@ -36,7 +36,7 @@ export const useStyle = () => {
 		},
 		cancelButton: {
 			borderRadius: 4,
-			backgroundColor: colors.dangerColor,
+			backgroundColor: colors.buttonBackgroundDangerDefault,
 			marginRight: 8,
 			flex: 2,
 			alignItems: 'center',
diff --git a/app/containers/List/ListHeader.tsx b/app/containers/List/ListHeader.tsx
index 4927d9c67..5d22869c5 100644
--- a/app/containers/List/ListHeader.tsx
+++ b/app/containers/List/ListHeader.tsx
@@ -28,7 +28,7 @@ const ListHeader = React.memo(({ title, translateTitle = true }: IListHeader) =>
 
 	return (
 		<View style={styles.container}>
-			<Text style={[styles.title, { color: themes[theme].infoText }]} numberOfLines={1}>
+			<Text style={[styles.title, { color: themes[theme].fontHint }]} numberOfLines={1}>
 				{translateTitle ? I18n.t(title) : title}
 			</Text>
 		</View>
diff --git a/app/containers/List/ListInfo.tsx b/app/containers/List/ListInfo.tsx
index 1a8dc8910..98050d16b 100644
--- a/app/containers/List/ListInfo.tsx
+++ b/app/containers/List/ListInfo.tsx
@@ -27,7 +27,7 @@ const ListInfo = React.memo(({ info, translateInfo = true }: IListInfo) => {
 	const { theme } = useTheme();
 	return (
 		<View style={styles.container}>
-			<Text style={[styles.text, { color: themes[theme].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text>
+			<Text style={[styles.text, { color: themes[theme].fontHint }]}>{translateInfo ? I18n.t(info) : info}</Text>
 		</View>
 	);
 });
diff --git a/app/containers/List/ListItem.tsx b/app/containers/List/ListItem.tsx
index 9df7f7d8f..862bdccab 100644
--- a/app/containers/List/ListItem.tsx
+++ b/app/containers/List/ListItem.tsx
@@ -101,7 +101,7 @@ const Content = React.memo(
 							{translateTitle && title ? I18n.t(title) : title}
 						</Text>
 						{alert ? (
-							<CustomIcon name='info' size={ICON_SIZE} color={themes[theme].dangerColor} style={styles.alertIcon} />
+							<CustomIcon name='info' size={ICON_SIZE} color={themes[theme].buttonBackgroundDangerDefault} style={styles.alertIcon} />
 						) : null}
 					</View>
 					{subtitle ? (
diff --git a/app/containers/LoginServices/ServicesSeparator.tsx b/app/containers/LoginServices/ServicesSeparator.tsx
index 17727ff11..fc6cdec5a 100644
--- a/app/containers/LoginServices/ServicesSeparator.tsx
+++ b/app/containers/LoginServices/ServicesSeparator.tsx
@@ -20,7 +20,7 @@ const ServicesSeparator = ({ services, separator, collapsed, onPress }: IService
 					type='secondary'
 					onPress={onPress}
 					style={styles.options}
-					color={colors.actionTintColor}
+					color={colors.strokeHighlight}
 				/>
 				<OrSeparator theme={theme} />
 			</>
diff --git a/app/containers/OrSeparator.tsx b/app/containers/OrSeparator.tsx
index bd479b44f..2c505b425 100644
--- a/app/containers/OrSeparator.tsx
+++ b/app/containers/OrSeparator.tsx
@@ -29,7 +29,7 @@ interface IOrSeparator {
 }
 
 const OrSeparator = React.memo(({ theme }: IOrSeparator) => {
-	const line = { backgroundColor: themes[theme].borderColor };
+	const line = { backgroundColor: themes[theme].strokeLight };
 	const text = { color: themes[theme].fontSecondaryInfo };
 	return (
 		<View style={styles.container}>
diff --git a/app/containers/ReactionsList/AllTab.tsx b/app/containers/ReactionsList/AllTab.tsx
index 0d7f51e11..911e73976 100644
--- a/app/containers/ReactionsList/AllTab.tsx
+++ b/app/containers/ReactionsList/AllTab.tsx
@@ -52,7 +52,7 @@ const AllReactionsListItem = ({ item, getCustomEmoji }: IAllReactionsListItemPro
 				getCustomEmoji={getCustomEmoji}
 			/>
 			<View style={styles.textContainer}>
-				<Text style={[styles.allListNPeopleReacted, { color: colors.bodyText }]}>
+				<Text style={[styles.allListNPeopleReacted, { color: colors.fontDefault }]}>
 					{count === 1 ? I18n.t('1_person_reacted') : I18n.t('N_people_reacted', { n: count })}
 				</Text>
 				<Text style={[styles.allListWhoReacted, { color: colors.fontSecondaryInfo }]}>{displayNames}</Text>
diff --git a/app/containers/ReactionsList/ReactionsTabBar.tsx b/app/containers/ReactionsList/ReactionsTabBar.tsx
index 75076fb18..8842e6384 100644
--- a/app/containers/ReactionsList/ReactionsTabBar.tsx
+++ b/app/containers/ReactionsList/ReactionsTabBar.tsx
@@ -37,7 +37,7 @@ const TabBarItem = ({ tab, index, goToPage, getCustomEmoji }: ITabBarItem) => {
 		>
 			<View style={styles.tabBarItem}>
 				{tab._id === 'All' ? (
-					<Text style={[styles.allTabItem, { color: colors.auxiliaryTintColor }]}>{I18n.t('All')}</Text>
+					<Text style={[styles.allTabItem, { color: colors.strokeHighlight }]}>{I18n.t('All')}</Text>
 				) : (
 					<>
 						<Emoji
@@ -46,7 +46,7 @@ const TabBarItem = ({ tab, index, goToPage, getCustomEmoji }: ITabBarItem) => {
 							customEmojiStyle={styles.customEmojiStyle}
 							getCustomEmoji={getCustomEmoji}
 						/>
-						<Text style={[styles.reactionCount, { color: colors.auxiliaryTintColor }]}>{tab.usernames.length}</Text>
+						<Text style={[styles.reactionCount, { color: colors.strokeHighlight }]}>{tab.usernames.length}</Text>
 					</>
 				)}
 			</View>
diff --git a/app/containers/ReactionsList/UsersList.tsx b/app/containers/ReactionsList/UsersList.tsx
index 8c2493321..9fa33d3c9 100644
--- a/app/containers/ReactionsList/UsersList.tsx
+++ b/app/containers/ReactionsList/UsersList.tsx
@@ -32,7 +32,7 @@ const UsersList = ({ tabLabel }: { tabLabel: IReaction }): React.ReactElement =>
 				<View style={styles.listItemContainer} testID='userItem'>
 					<Avatar text={item.username} size={36} />
 					<View style={styles.textContainer}>
-						<Text style={[styles.usernameText, { color: colors.bodyText }]} numberOfLines={1}>
+						<Text style={[styles.usernameText, { color: colors.fontDefault }]} numberOfLines={1}>
 							{useRealName && item.name ? item.name : item.username}
 						</Text>
 					</View>
diff --git a/app/containers/RoomItem/Actions.tsx b/app/containers/RoomItem/Actions.tsx
index 2aab3bffa..69bacbfcc 100644
--- a/app/containers/RoomItem/Actions.tsx
+++ b/app/containers/RoomItem/Actions.tsx
@@ -38,7 +38,7 @@ export const LeftActions = React.memo(({ transX, isRead, width, onToggleReadPres
 			<Animated.View
 				style={[
 					styles.actionLeftButtonContainer,
-					{ width: width * 2, backgroundColor: colors.tintColor, right: '100%' },
+					{ width: width * 2, backgroundColor: colors.badgeBackgroundLevel2, right: '100%' },
 					viewHeight,
 					animatedStyles
 				]}
diff --git a/app/containers/RoomItem/LastMessage.tsx b/app/containers/RoomItem/LastMessage.tsx
index 91b8e9aab..e968edba9 100644
--- a/app/containers/RoomItem/LastMessage.tsx
+++ b/app/containers/RoomItem/LastMessage.tsx
@@ -75,7 +75,7 @@ const LastMessage = React.memo(({ lastMessage, type, showLastMessage, username,
 				username,
 				useRealName
 			})}
-			style={[styles.markdownText, { color: alert ? colors.bodyText : colors.fontSecondaryInfo }, alignSelf]}
+			style={[styles.markdownText, { color: alert ? colors.fontDefault : colors.fontSecondaryInfo }, alignSelf]}
 			numberOfLines={2}
 		/>
 	);
diff --git a/app/containers/RoomItem/Tag.tsx b/app/containers/RoomItem/Tag.tsx
index 68b2b444b..cb70d1c84 100644
--- a/app/containers/RoomItem/Tag.tsx
+++ b/app/containers/RoomItem/Tag.tsx
@@ -14,8 +14,8 @@ const Tag = React.memo(({ name, testID }: ITag) => {
 	const { theme } = useTheme();
 
 	return (
-		<View style={[styles.tagContainer, { backgroundColor: themes[theme].borderColor }]}>
-			<Text style={[styles.tagText, { color: themes[theme].infoText }]} numberOfLines={1} testID={testID}>
+		<View style={[styles.tagContainer, { backgroundColor: themes[theme].strokeLight }]}>
+			<Text style={[styles.tagText, { color: themes[theme].fontHint }]} numberOfLines={1} testID={testID}>
 				{name}
 			</Text>
 		</View>
diff --git a/app/containers/RoomItem/UpdatedAt.tsx b/app/containers/RoomItem/UpdatedAt.tsx
index 707a646e2..efb5ada10 100644
--- a/app/containers/RoomItem/UpdatedAt.tsx
+++ b/app/containers/RoomItem/UpdatedAt.tsx
@@ -23,7 +23,7 @@ const UpdatedAt = React.memo(({ date, hideUnreadStatus, alert }: IUpdatedAtProps
 					!hideUnreadStatus && [
 						styles.updateAlert,
 						{
-							color: colors.tintColor
+							color: colors.badgeBackgroundLevel2
 						}
 					]
 			]}
diff --git a/app/containers/ServerItem/index.tsx b/app/containers/ServerItem/index.tsx
index 0ca8310a4..780b5640c 100644
--- a/app/containers/ServerItem/index.tsx
+++ b/app/containers/ServerItem/index.tsx
@@ -31,9 +31,9 @@ const ServerItem = React.memo(({ item, onPress, onLongPress, hasCheck }: IServer
 			onPress={onPress}
 			onLongPress={() => onLongPress?.()}
 			testID={`rooms-list-header-server-${item.id}`}
-			android_ripple={{ color: themes[theme].bannerBackground }}
+			android_ripple={{ color: themes[theme].surfaceNeutral }}
 			style={({ pressed }: { pressed: boolean }) => ({
-				backgroundColor: isIOS && pressed ? themes[theme].bannerBackground : themes[theme].surfaceRoom
+				backgroundColor: isIOS && pressed ? themes[theme].surfaceNeutral : themes[theme].surfaceRoom
 			})}
 		>
 			<View style={styles.serverItemContainer}>
diff --git a/app/containers/SupportedVersions/SupportedVersionsExpired.tsx b/app/containers/SupportedVersions/SupportedVersionsExpired.tsx
index a235b3cdc..06f0442c5 100644
--- a/app/containers/SupportedVersions/SupportedVersionsExpired.tsx
+++ b/app/containers/SupportedVersions/SupportedVersionsExpired.tsx
@@ -48,12 +48,12 @@ export const SupportedVersionsExpired = () => {
 	return (
 		<View style={[styles.container, { paddingTop: 120, backgroundColor: colors.surfaceLight }]}>
 			<View style={styles.iconContainer}>
-				<CustomIcon name='warning' size={36} color={colors.dangerColor} />
+				<CustomIcon name='warning' size={36} color={colors.buttonBackgroundDangerDefault} />
 			</View>
 			<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>
 				{I18n.t('Supported_versions_expired_title', { workspace_name: name })}
 			</Text>
-			<Text style={[styles.description, { color: colors.bodyText }]}>{I18n.t('Supported_versions_expired_description')}</Text>
+			<Text style={[styles.description, { color: colors.fontDefault }]}>{I18n.t('Supported_versions_expired_description')}</Text>
 			<Button title={I18n.t('Check_again')} type='primary' onPress={checkAgain} loading={checking} />
 			<Button
 				title={I18n.t('Learn_more')}
diff --git a/app/containers/SupportedVersions/SupportedVersionsWarning.tsx b/app/containers/SupportedVersions/SupportedVersionsWarning.tsx
index e61d8bb0d..9d6758726 100644
--- a/app/containers/SupportedVersions/SupportedVersionsWarning.tsx
+++ b/app/containers/SupportedVersions/SupportedVersionsWarning.tsx
@@ -33,7 +33,7 @@ export const SupportedVersionsWarning = ({ navigation, route }: { navigation?: a
 	return (
 		<View style={[styles.container, { backgroundColor: colors.surfaceLight }]}>
 			<View style={styles.iconContainer}>
-				<CustomIcon name='warning' size={36} color={colors.dangerColor} />
+				<CustomIcon name='warning' size={36} color={colors.buttonBackgroundDangerDefault} />
 			</View>
 			{message.title ? (
 				<Text testID='sv-warn-title' style={[styles.title, { color: colors.fontTitlesLabels }]}>
@@ -41,12 +41,12 @@ export const SupportedVersionsWarning = ({ navigation, route }: { navigation?: a
 				</Text>
 			) : null}
 			{message.subtitle ? (
-				<Text testID='sv-warn-subtitle' style={[styles.subtitle, { color: colors.bodyText }]}>
+				<Text testID='sv-warn-subtitle' style={[styles.subtitle, { color: colors.fontDefault }]}>
 					{message.subtitle}
 				</Text>
 			) : null}
 			{message.description ? (
-				<Text testID='sv-warn-description' style={[styles.description, { color: colors.bodyText }]}>
+				<Text testID='sv-warn-description' style={[styles.description, { color: colors.fontDefault }]}>
 					{message.description}
 				</Text>
 			) : null}
diff --git a/app/containers/TextInput/FormTextInput.tsx b/app/containers/TextInput/FormTextInput.tsx
index d75729955..bbc5865b6 100644
--- a/app/containers/TextInput/FormTextInput.tsx
+++ b/app/containers/TextInput/FormTextInput.tsx
@@ -108,8 +108,8 @@ export const FormTextInput = ({
 							color: colors.fontTitlesLabels
 						},
 						error?.error && {
-							color: colors.dangerColor,
-							borderColor: colors.dangerColor
+							color: colors.buttonBackgroundDangerDefault,
+							borderColor: colors.buttonBackgroundDangerDefault
 						},
 						inputStyle
 					]}
@@ -167,7 +167,7 @@ export const FormTextInput = ({
 				{loading ? (
 					<ActivityIndicator
 						style={[styles.iconContainer, styles.iconRight]}
-						color={colors.bodyText}
+						color={colors.fontDefault}
 						testID={testID ? `${testID}-loading` : undefined}
 					/>
 				) : null}
diff --git a/app/containers/ThreadDetails.tsx b/app/containers/ThreadDetails.tsx
index 1c5830b5a..5846adbf6 100644
--- a/app/containers/ThreadDetails.tsx
+++ b/app/containers/ThreadDetails.tsx
@@ -91,7 +91,7 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style }: IT
 					<CustomIcon
 						size={24}
 						name={isFollowing ? 'notification' : 'notification-disabled'}
-						color={themes[theme].auxiliaryTintColor}
+						color={themes[theme].strokeHighlight}
 					/>
 				</Touchable>
 			</View>
diff --git a/app/containers/Touch.tsx b/app/containers/Touch.tsx
index 190a74a2c..aca34be8b 100644
--- a/app/containers/Touch.tsx
+++ b/app/containers/Touch.tsx
@@ -17,8 +17,8 @@ const Touch = React.forwardRef<RectButton, ITouchProps>(({ children, onPress, un
 			ref={ref}
 			onPress={onPress}
 			activeOpacity={1}
-			underlayColor={underlayColor || colors.bannerBackground}
-			rippleColor={colors.bannerBackground}
+			underlayColor={underlayColor || colors.surfaceNeutral}
+			rippleColor={colors.surfaceNeutral}
 			{...props}
 		>
 			{children}
diff --git a/app/containers/UIKit/DatePicker.tsx b/app/containers/UIKit/DatePicker.tsx
index 58d0453da..746e13529 100644
--- a/app/containers/UIKit/DatePicker.tsx
+++ b/app/containers/UIKit/DatePicker.tsx
@@ -67,9 +67,9 @@ export const DatePicker = ({ element, language, action, context, loading, value,
 			<Touchable
 				onPress={() => onShow(!show)}
 				style={{ backgroundColor: themes[theme].surfaceRoom }}
-				background={Touchable.Ripple(themes[theme].bannerBackground)}
+				background={Touchable.Ripple(themes[theme].surfaceNeutral)}
 			>
-				<View style={[styles.input, { borderColor: error ? themes[theme].dangerColor : themes[theme].strokeLight }]}>
+				<View style={[styles.input, { borderColor: error ? themes[theme].buttonBackgroundDangerDefault : themes[theme].strokeLight }]}>
 					<Text style={[styles.inputText, { color: error ? themes[theme].fontDanger : themes[theme].fontTitlesLabels }]}>
 						{currentDate.toLocaleDateString(language)}
 					</Text>
@@ -79,7 +79,7 @@ export const DatePicker = ({ element, language, action, context, loading, value,
 						<CustomIcon
 							name='calendar'
 							size={20}
-							color={error ? themes[theme].dangerColor : themes[theme].fontSecondaryInfo}
+							color={error ? themes[theme].buttonBackgroundDangerDefault : themes[theme].fontSecondaryInfo}
 							style={styles.icon}
 						/>
 					)}
diff --git a/app/containers/UIKit/MultiSelect/Chips.tsx b/app/containers/UIKit/MultiSelect/Chips.tsx
index 84394d230..f6a6c2964 100644
--- a/app/containers/UIKit/MultiSelect/Chips.tsx
+++ b/app/containers/UIKit/MultiSelect/Chips.tsx
@@ -30,7 +30,7 @@ const Chip = ({ item, onSelect, style }: IChip) => {
 			key={item.value}
 			onPress={() => onSelect(item)}
 			style={[styles.chip, { backgroundColor: colors.surfaceHover }, style]}
-			background={Touchable.Ripple(colors.bannerBackground)}
+			background={Touchable.Ripple(colors.surfaceNeutral)}
 			testID={`multi-select-chip-${item.value}`}
 		>
 			<>
diff --git a/app/containers/UIKit/MultiSelect/Input.tsx b/app/containers/UIKit/MultiSelect/Input.tsx
index e39446c09..6d3421e75 100644
--- a/app/containers/UIKit/MultiSelect/Input.tsx
+++ b/app/containers/UIKit/MultiSelect/Input.tsx
@@ -23,7 +23,7 @@ const Input = ({ children, onPress, loading, inputStyle, placeholder, disabled,
 		<Touchable
 			onPress={onPress}
 			style={[{ backgroundColor: colors.surfaceRoom }, styles.inputBorder, inputStyle]}
-			background={Touchable.Ripple(colors.bannerBackground)}
+			background={Touchable.Ripple(colors.surfaceNeutral)}
 			disabled={disabled}
 		>
 			<View style={[styles.input, styles.inputBorder, { borderColor: colors.strokeLight }, innerInputStyle]}>
diff --git a/app/containers/UIKit/MultiSelect/Items.tsx b/app/containers/UIKit/MultiSelect/Items.tsx
index 6d647a98b..cbaac4ee5 100644
--- a/app/containers/UIKit/MultiSelect/Items.tsx
+++ b/app/containers/UIKit/MultiSelect/Items.tsx
@@ -40,7 +40,7 @@ const Item = ({ item, selected, onSelect }: IItem) => {
 						{textParser([item.text])}
 					</Text>
 				</View>
-				<View style={styles.flexZ}>{selected ? <CustomIcon color={colors.tintColor} size={22} name='check' /> : null}</View>
+				<View style={styles.flexZ}>{selected ? <CustomIcon color={colors.badgeBackgroundLevel2} size={22} name='check' /> : null}</View>
 			</View>
 		</Touchable>
 	);
diff --git a/app/containers/UIKit/Overflow.tsx b/app/containers/UIKit/Overflow.tsx
index da24e2ae0..f05eb6eb7 100644
--- a/app/containers/UIKit/Overflow.tsx
+++ b/app/containers/UIKit/Overflow.tsx
@@ -29,7 +29,7 @@ const styles = StyleSheet.create({
 const Option = ({ option: { text, value }, onOptionPress, parser, theme }: IOption) => (
 	<Touchable
 		onPress={() => onOptionPress({ value })}
-		background={Touchable.Ripple(themes[theme].bannerBackground)}
+		background={Touchable.Ripple(themes[theme].surfaceNeutral)}
 		style={styles.option}
 	>
 		<Text>{parser.text(text)}</Text>
@@ -62,13 +62,13 @@ export const Overflow = ({ element, loading, action, parser }: IOverflow) => {
 		<>
 			<Touchable
 				ref={ref => (touchable[blockId] = ref)}
-				background={Touchable.Ripple(themes[theme].bannerBackground)}
+				background={Touchable.Ripple(themes[theme].surfaceNeutral)}
 				onPress={() => onShow(!show)}
 				hitSlop={BUTTON_HIT_SLOP}
 				style={styles.menu}
 			>
 				{!loading ? (
-					<CustomIcon size={18} name='kebab' color={themes[theme].bodyText} />
+					<CustomIcon size={18} name='kebab' color={themes[theme].fontDefault} />
 				) : (
 					<ActivityIndicator style={styles.loading} />
 				)}
diff --git a/app/containers/UIKit/Section.tsx b/app/containers/UIKit/Section.tsx
index 7c5e4f99f..6d3ee2a56 100644
--- a/app/containers/UIKit/Section.tsx
+++ b/app/containers/UIKit/Section.tsx
@@ -31,7 +31,7 @@ const Accessory = ({ element, parser }: IAccessoryComponent) =>
 const Fields = ({ fields, parser, theme }: IFields) => (
 	<>
 		{fields.map(field => (
-			<Text style={[styles.text, styles.field, { color: themes[theme].bodyText }]}>{parser.text(field)}</Text>
+			<Text style={[styles.text, styles.field, { color: themes[theme].fontDefault }]}>{parser.text(field)}</Text>
 		))}
 	</>
 );
diff --git a/app/containers/UIKit/VideoConferenceBlock/components/styles.ts b/app/containers/UIKit/VideoConferenceBlock/components/styles.ts
index 33ac1c2ad..a852bd4d6 100644
--- a/app/containers/UIKit/VideoConferenceBlock/components/styles.ts
+++ b/app/containers/UIKit/VideoConferenceBlock/components/styles.ts
@@ -12,7 +12,7 @@ export default function useStyle() {
 			fontSize: 12,
 			marginLeft: 8,
 			...sharedStyles.textBold,
-			color: colors.auxiliaryTintColor
+			color: colors.strokeHighlight
 		},
 		iconContainer: {
 			width: 28,
@@ -39,7 +39,7 @@ export default function useStyle() {
 			color: colors.surfaceDark
 		},
 		callToActionButton: {
-			backgroundColor: colors.tintColor,
+			backgroundColor: colors.badgeBackgroundLevel2,
 			minWidth: 50,
 			alignItems: 'center',
 			justifyContent: 'center',
diff --git a/app/containers/UIKit/index.tsx b/app/containers/UIKit/index.tsx
index b3a115f4d..8b35c472b 100644
--- a/app/containers/UIKit/index.tsx
+++ b/app/containers/UIKit/index.tsx
@@ -65,7 +65,7 @@ class MessageParser extends UiKitParserMessage<React.ReactElement> {
 				<MarkdownPreview msg={element.text} style={[isContext && { color: themes[theme].fontSecondaryInfo }]} numberOfLines={0} />
 			);
 		}
-		return <Text style={[styles.text, { color: themes[theme].bodyText }]}>{element.text}</Text>;
+		return <Text style={[styles.text, { color: themes[theme].fontDefault }]}>{element.text}</Text>;
 	}
 
 	mrkdwn(element: IMarkdown, context: BlockContext) {
diff --git a/app/containers/UserGeneratedContentRules.tsx b/app/containers/UserGeneratedContentRules.tsx
index 62b634209..885d2a6fe 100644
--- a/app/containers/UserGeneratedContentRules.tsx
+++ b/app/containers/UserGeneratedContentRules.tsx
@@ -43,14 +43,14 @@ const UGCRules = ({ styleContainer }: { styleContainer?: ViewStyle }) => {
 			<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>
 				{`${I18n.t('Onboarding_agree_terms')}\n`}
 				<Text
-					style={[styles.bottomContainerTextBold, { color: colors.actionTintColor }]}
+					style={[styles.bottomContainerTextBold, { color: colors.strokeHighlight }]}
 					onPress={() => openContract('terms-of-service')}
 				>
 					{I18n.t('Terms_of_Service')}
 				</Text>{' '}
 				{I18n.t('and')}
 				<Text
-					style={[styles.bottomContainerTextBold, { color: colors.actionTintColor }]}
+					style={[styles.bottomContainerTextBold, { color: colors.strokeHighlight }]}
 					onPress={() => openContract('privacy-policy')}
 				>
 					{' '}
diff --git a/app/containers/UserItem.tsx b/app/containers/UserItem.tsx
index 02739d2f8..6d4969424 100644
--- a/app/containers/UserItem.tsx
+++ b/app/containers/UserItem.tsx
@@ -54,20 +54,20 @@ const UserItem = ({ name, username, onPress, testID, onLongPress, style, icon, i
 			onLongPress={onLongPress}
 			testID={testID}
 			android_ripple={{
-				color: colors.bannerBackground
+				color: colors.surfaceNeutral
 			}}
 			style={({ pressed }: any) => ({
-				backgroundColor: isIOS && pressed ? colors.bannerBackground : 'transparent'
+				backgroundColor: isIOS && pressed ? colors.surfaceNeutral : 'transparent'
 			})}
 		>
 			<View style={[styles.container, styles.button, style]}>
 				<Avatar text={username} size={30} style={styles.avatar} />
 				<View style={styles.textContainer}>
-					<Text style={[styles.name, { color: colors.bodyText }]} numberOfLines={1}>
+					<Text style={[styles.name, { color: colors.fontDefault }]} numberOfLines={1}>
 						{name}
 					</Text>
 				</View>
-				{icon ? <CustomIcon name={icon} size={22} color={iconColor || colors.actionTintColor} style={styles.icon} /> : null}
+				{icon ? <CustomIcon name={icon} size={22} color={iconColor || colors.strokeHighlight} style={styles.icon} /> : null}
 			</View>
 		</Pressable>
 	);
diff --git a/app/containers/markdown/AtMention.tsx b/app/containers/markdown/AtMention.tsx
index 27577f59c..58b527446 100644
--- a/app/containers/markdown/AtMention.tsx
+++ b/app/containers/markdown/AtMention.tsx
@@ -68,7 +68,7 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
 		);
 	}
 
-	return <Text style={[styles.text, { color: themes[theme].bodyText }, ...style]}>{`@${mention}`}</Text>;
+	return <Text style={[styles.text, { color: themes[theme].fontDefault }, ...style]}>{`@${mention}`}</Text>;
 });
 
 export default AtMention;
diff --git a/app/containers/markdown/BlockQuote.tsx b/app/containers/markdown/BlockQuote.tsx
index 58af09188..14db049d1 100644
--- a/app/containers/markdown/BlockQuote.tsx
+++ b/app/containers/markdown/BlockQuote.tsx
@@ -12,7 +12,7 @@ interface IBlockQuote {
 
 const BlockQuote = React.memo(({ children, theme }: IBlockQuote) => (
 	<View style={styles.container}>
-		<View style={[styles.quote, { backgroundColor: themes[theme].borderColor }]} />
+		<View style={[styles.quote, { backgroundColor: themes[theme].strokeLight }]} />
 		<View style={styles.childContainer}>{children}</View>
 	</View>
 ));
diff --git a/app/containers/markdown/Emoji.tsx b/app/containers/markdown/Emoji.tsx
index 2980e8ada..fec3247bf 100644
--- a/app/containers/markdown/Emoji.tsx
+++ b/app/containers/markdown/Emoji.tsx
@@ -24,7 +24,7 @@ const Emoji = React.memo(({ literal, isMessageContainsOnlyEmoji, getCustomEmoji,
 		return <CustomEmoji style={[isMessageContainsOnlyEmoji ? styles.customEmojiBig : styles.customEmoji]} emoji={emoji} />;
 	}
 	return (
-		<Text style={[{ color: colors.bodyText }, isMessageContainsOnlyEmoji ? styles.textBig : styles.text, style]}>
+		<Text style={[{ color: colors.fontDefault }, isMessageContainsOnlyEmoji ? styles.textBig : styles.text, style]}>
 			{emojiUnicode}
 		</Text>
 	);
diff --git a/app/containers/markdown/Hashtag.tsx b/app/containers/markdown/Hashtag.tsx
index 178cea7a0..74e2e26d8 100644
--- a/app/containers/markdown/Hashtag.tsx
+++ b/app/containers/markdown/Hashtag.tsx
@@ -64,7 +64,7 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IH
 			</Text>
 		);
 	}
-	return <Text style={[styles.text, { color: themes[theme].bodyText }, ...style]}>{`#${hashtag}`}</Text>;
+	return <Text style={[styles.text, { color: themes[theme].fontDefault }, ...style]}>{`#${hashtag}`}</Text>;
 });
 
 export default Hashtag;
diff --git a/app/containers/markdown/Link.tsx b/app/containers/markdown/Link.tsx
index d3dce93db..5b68e519f 100644
--- a/app/containers/markdown/Link.tsx
+++ b/app/containers/markdown/Link.tsx
@@ -37,7 +37,7 @@ const Link = React.memo(({ children, link, theme, onLinkPress }: ILink) => {
 
 	// if you have a [](https://rocket.chat) render https://rocket.chat
 	return (
-		<Text onPress={handlePress} onLongPress={onLongPress} style={{ ...styles.link, color: themes[theme].actionTintColor }}>
+		<Text onPress={handlePress} onLongPress={onLongPress} style={{ ...styles.link, color: themes[theme].strokeHighlight }}>
 			{childLength !== 0 ? children : link}
 		</Text>
 	);
diff --git a/app/containers/markdown/ListItem.tsx b/app/containers/markdown/ListItem.tsx
index af0bdf922..255f36a48 100644
--- a/app/containers/markdown/ListItem.tsx
+++ b/app/containers/markdown/ListItem.tsx
@@ -44,7 +44,7 @@ const ListItem = React.memo(({ children, level, bulletWidth, continue: _continue
 	return (
 		<View style={style.container}>
 			<View style={[{ width: bulletWidth }, style.bullet]}>
-				<Text style={[styles.text, styles.listPrefix, { color: themes[theme].bodyText }]}>{bullet}</Text>
+				<Text style={[styles.text, styles.listPrefix, { color: themes[theme].fontDefault }]}>{bullet}</Text>
 			</View>
 			<View style={style.contents}>{children}</View>
 		</View>
diff --git a/app/containers/markdown/Preview.tsx b/app/containers/markdown/Preview.tsx
index 7cd9471cd..f473c6915 100644
--- a/app/containers/markdown/Preview.tsx
+++ b/app/containers/markdown/Preview.tsx
@@ -24,7 +24,7 @@ const MarkdownPreview = ({ msg, numberOfLines = 1, style = [], testID }: IMarkdo
 	return (
 		<Text
 			accessibilityLabel={m}
-			style={[styles.text, { color: themes[theme].bodyText }, ...style]}
+			style={[styles.text, { color: themes[theme].fontDefault }, ...style]}
 			numberOfLines={numberOfLines}
 			testID={testID || `markdown-preview-${m}`}
 		>
diff --git a/app/containers/markdown/Table.tsx b/app/containers/markdown/Table.tsx
index 79f35497c..5f2390337 100644
--- a/app/containers/markdown/Table.tsx
+++ b/app/containers/markdown/Table.tsx
@@ -22,7 +22,7 @@ const Table = React.memo(({ children, numColumns, theme }: ITable) => {
 	const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
 
 	const renderRows = (drawExtraBorders = true) => {
-		const tableStyle: ViewStyle[] = [styles.table, { borderColor: themes[theme].borderColor }];
+		const tableStyle: ViewStyle[] = [styles.table, { borderColor: themes[theme].strokeLight }];
 		if (drawExtraBorders) {
 			tableStyle.push(styles.tableExtraBorders);
 		}
@@ -54,7 +54,7 @@ const Table = React.memo(({ children, numColumns, theme }: ITable) => {
 				showsVerticalScrollIndicator={false}
 				style={[
 					styles.containerTable,
-					{ maxWidth: getTableWidth(), maxHeight: MAX_HEIGHT, borderColor: themes[theme].borderColor }
+					{ maxWidth: getTableWidth(), maxHeight: MAX_HEIGHT, borderColor: themes[theme].strokeLight }
 				]}
 			>
 				{renderRows(false)}
diff --git a/app/containers/markdown/TableCell.tsx b/app/containers/markdown/TableCell.tsx
index 98fca8300..906dea229 100644
--- a/app/containers/markdown/TableCell.tsx
+++ b/app/containers/markdown/TableCell.tsx
@@ -15,7 +15,7 @@ interface ITableCell {
 export const CELL_WIDTH = 100;
 
 const TableCell = React.memo(({ isLastCell, align, children, theme }: ITableCell) => {
-	const cellStyle: ViewStyle[] = [styles.cell, { borderColor: themes[theme].borderColor }];
+	const cellStyle: ViewStyle[] = [styles.cell, { borderColor: themes[theme].strokeLight }];
 	if (!isLastCell) {
 		cellStyle.push(styles.cellRightBorder);
 	}
@@ -29,7 +29,7 @@ const TableCell = React.memo(({ isLastCell, align, children, theme }: ITableCell
 
 	return (
 		<View style={[...cellStyle, { width: CELL_WIDTH }]}>
-			<Text style={[textStyle, { color: themes[theme].bodyText }]}>{children}</Text>
+			<Text style={[textStyle, { color: themes[theme].fontDefault }]}>{children}</Text>
 		</View>
 	);
 });
diff --git a/app/containers/markdown/TableRow.tsx b/app/containers/markdown/TableRow.tsx
index 2fbbbdd2b..a5abb704f 100644
--- a/app/containers/markdown/TableRow.tsx
+++ b/app/containers/markdown/TableRow.tsx
@@ -12,7 +12,7 @@ interface ITableRow {
 }
 
 const TableRow = React.memo(({ isLastRow, children: _children, theme }: ITableRow) => {
-	const rowStyle: ViewStyle[] = [styles.row, { borderColor: themes[theme].borderColor }];
+	const rowStyle: ViewStyle[] = [styles.row, { borderColor: themes[theme].strokeLight }];
 	if (!isLastRow) {
 		rowStyle.push(styles.rowBottomBorder);
 	}
diff --git a/app/containers/markdown/index.tsx b/app/containers/markdown/index.tsx
index e64b726bb..130b43909 100644
--- a/app/containers/markdown/index.tsx
+++ b/app/containers/markdown/index.tsx
@@ -156,9 +156,9 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 				style={[
 					{
 						...styles.codeInline,
-						color: themes[theme!].bodyText,
-						backgroundColor: themes[theme!].bannerBackground,
-						borderColor: themes[theme!].bannerBackground
+						color: themes[theme!].fontDefault,
+						backgroundColor: themes[theme!].surfaceNeutral,
+						borderColor: themes[theme!].surfaceNeutral
 					},
 					...style
 				]}
@@ -175,13 +175,13 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 				style={[
 					{
 						...styles.codeBlock,
-						backgroundColor: themes[theme!].bannerBackground,
-						borderColor: themes[theme!].borderColor
+						backgroundColor: themes[theme!].surfaceNeutral,
+						borderColor: themes[theme!].strokeLight
 					},
 					...style
 				]}
 			>
-				<Text style={[styles.codeBlockText, { color: themes[theme!].bodyText }]}>{literal}</Text>
+				<Text style={[styles.codeBlockText, { color: themes[theme!].fontDefault }]}>{literal}</Text>
 			</View>
 		);
 	};
@@ -197,7 +197,7 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 			return null;
 		}
 		return (
-			<Text style={[styles.text, { color: themes[theme!].bodyText }, ...style]} numberOfLines={numberOfLines}>
+			<Text style={[styles.text, { color: themes[theme!].fontDefault }, ...style]} numberOfLines={numberOfLines}>
 				{children}
 			</Text>
 		);
@@ -257,7 +257,7 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 		// @ts-ignore
 		const textStyle = styles[`heading${level}Text`];
 		return (
-			<Text numberOfLines={numberOfLines} style={[textStyle, { color: themes[theme!].bodyText }]}>
+			<Text numberOfLines={numberOfLines} style={[textStyle, { color: themes[theme!].fontDefault }]}>
 				{children}
 			</Text>
 		);
diff --git a/app/containers/markdown/new/Code.tsx b/app/containers/markdown/new/Code.tsx
index c47f81dd6..7352790b3 100644
--- a/app/containers/markdown/new/Code.tsx
+++ b/app/containers/markdown/new/Code.tsx
@@ -18,8 +18,8 @@ const Code = ({ value }: ICodeProps): React.ReactElement => {
 			style={[
 				styles.codeBlock,
 				{
-					backgroundColor: colors.bannerBackground,
-					borderColor: colors.borderColor
+					backgroundColor: colors.surfaceNeutral,
+					borderColor: colors.strokeLight
 				}
 			]}
 		>
diff --git a/app/containers/markdown/new/CodeLine.tsx b/app/containers/markdown/new/CodeLine.tsx
index 7c836c28e..401ffb32a 100644
--- a/app/containers/markdown/new/CodeLine.tsx
+++ b/app/containers/markdown/new/CodeLine.tsx
@@ -15,7 +15,7 @@ const CodeLine = ({ value }: ICodeLineProps): React.ReactElement | null => {
 		return null;
 	}
 
-	return <Text style={[styles.codeBlockText, { color: colors.bodyText }]}>{value.value}</Text>;
+	return <Text style={[styles.codeBlockText, { color: colors.fontDefault }]}>{value.value}</Text>;
 };
 
 export default CodeLine;
diff --git a/app/containers/markdown/new/Emoji.tsx b/app/containers/markdown/new/Emoji.tsx
index 7ca4b89f0..e22be829d 100644
--- a/app/containers/markdown/new/Emoji.tsx
+++ b/app/containers/markdown/new/Emoji.tsx
@@ -18,7 +18,7 @@ const Emoji = ({ block, isBigEmoji }: IEmojiProps) => {
 	const { getCustomEmoji } = useContext(MarkdownContext);
 
 	if ('unicode' in block) {
-		return <Text style={[{ color: colors.bodyText }, isBigEmoji ? styles.textBig : styles.text]}>{block.unicode}</Text>;
+		return <Text style={[{ color: colors.fontDefault }, isBigEmoji ? styles.textBig : styles.text]}>{block.unicode}</Text>;
 	}
 	const emojiToken = block?.shortCode ? `:${block.shortCode}:` : `:${block.value?.value}:`;
 	const emojiUnicode = shortnameToUnicode(emojiToken);
@@ -28,7 +28,7 @@ const Emoji = ({ block, isBigEmoji }: IEmojiProps) => {
 		return <CustomEmoji style={[isBigEmoji ? styles.customEmojiBig : styles.customEmoji]} emoji={emoji} />;
 	}
 	return (
-		<Text style={[{ color: colors.bodyText }, isBigEmoji && emojiToken !== emojiUnicode ? styles.textBig : styles.text]}>
+		<Text style={[{ color: colors.fontDefault }, isBigEmoji && emojiToken !== emojiUnicode ? styles.textBig : styles.text]}>
 			{emojiUnicode}
 		</Text>
 	);
diff --git a/app/containers/markdown/new/Heading.tsx b/app/containers/markdown/new/Heading.tsx
index 56db6a7fd..2472bf40b 100644
--- a/app/containers/markdown/new/Heading.tsx
+++ b/app/containers/markdown/new/Heading.tsx
@@ -16,7 +16,7 @@ const Heading = ({ value, level }: IHeadingProps) => {
 	const textStyle = styles[`heading${level}`];
 
 	return (
-		<Text style={[textStyle, { color: themes[theme].bodyText }]}>
+		<Text style={[textStyle, { color: themes[theme].fontDefault }]}>
 			{value.map(block => {
 				switch (block.type) {
 					case 'PLAIN_TEXT':
diff --git a/app/containers/markdown/new/Image.tsx b/app/containers/markdown/new/Image.tsx
index d21ed9215..a845a2f86 100644
--- a/app/containers/markdown/new/Image.tsx
+++ b/app/containers/markdown/new/Image.tsx
@@ -21,12 +21,12 @@ const ImageProgress = createImageProgress(FastImage);
 
 const MessageImage = ({ img, theme }: TMessageImage) => (
 	<ImageProgress
-		style={[styles.inlineImage, { borderColor: themes[theme].borderColor }]}
+		style={[styles.inlineImage, { borderColor: themes[theme].strokeLight }]}
 		source={{ uri: encodeURI(img) }}
 		resizeMode={FastImage.resizeMode.cover}
 		indicator={Progress.Pie}
 		indicatorProps={{
-			color: themes[theme].actionTintColor
+			color: themes[theme].strokeHighlight
 		}}
 	/>
 );
diff --git a/app/containers/markdown/new/InlineCode.tsx b/app/containers/markdown/new/InlineCode.tsx
index 7934aea3a..5ec0e7f16 100644
--- a/app/containers/markdown/new/InlineCode.tsx
+++ b/app/containers/markdown/new/InlineCode.tsx
@@ -18,9 +18,9 @@ const InlineCode = ({ value }: IInlineCodeProps) => {
 			style={[
 				styles.codeInline,
 				{
-					color: themes[theme].bodyText,
-					backgroundColor: themes[theme].bannerBackground,
-					borderColor: themes[theme].borderColor
+					color: themes[theme].fontDefault,
+					backgroundColor: themes[theme].surfaceNeutral,
+					borderColor: themes[theme].strokeLight
 				}
 			]}
 		>
diff --git a/app/containers/markdown/new/Katex.tsx b/app/containers/markdown/new/Katex.tsx
index 3dd4b4a01..b2cb59075 100644
--- a/app/containers/markdown/new/Katex.tsx
+++ b/app/containers/markdown/new/Katex.tsx
@@ -19,7 +19,7 @@ export const KaTeX = ({ value }: IKaTeXProps): React.ReactElement | null => {
 	return (
 		<MathView
 			math={value}
-			style={{ color: colors.bodyText }}
+			style={{ color: colors.fontDefault }}
 			renderError={() => (
 				<Katex expression={value} style={[{ flex: 1, height: DEFAULT_MESSAGE_HEIGHT }, fixAndroidWebviewCrashStyle]} />
 			)}
@@ -29,5 +29,5 @@ export const KaTeX = ({ value }: IKaTeXProps): React.ReactElement | null => {
 
 export const InlineKaTeX = ({ value }: IKaTeXProps): React.ReactElement | null => {
 	const { colors } = useTheme();
-	return <MathText color value={`$$${value}$$`} direction='ltr' style={{ color: colors.bodyText }} />;
+	return <MathText color value={`$$${value}$$`} direction='ltr' style={{ color: colors.fontDefault }} />;
 };
diff --git a/app/containers/markdown/new/Link.tsx b/app/containers/markdown/new/Link.tsx
index 47ffc9e58..b0b078f50 100644
--- a/app/containers/markdown/new/Link.tsx
+++ b/app/containers/markdown/new/Link.tsx
@@ -39,7 +39,7 @@ const Link = ({ value }: ILinkProps) => {
 	};
 
 	return (
-		<Text onPress={handlePress} onLongPress={onLongPress} style={[styles.link, { color: themes[theme].actionTintColor }]}>
+		<Text onPress={handlePress} onLongPress={onLongPress} style={[styles.link, { color: themes[theme].strokeHighlight }]}>
 			{(block => {
 				const blockArray = Array.isArray(block) ? block : [block];
 				return blockArray.map(blockInArray => {
diff --git a/app/containers/markdown/new/OrderedList.tsx b/app/containers/markdown/new/OrderedList.tsx
index 2ccc2687f..feb755dd2 100644
--- a/app/containers/markdown/new/OrderedList.tsx
+++ b/app/containers/markdown/new/OrderedList.tsx
@@ -16,8 +16,8 @@ const OrderedList = ({ value }: IOrderedListProps): React.ReactElement => {
 		<View>
 			{value.map(item => (
 				<View style={styles.row} key={item.number?.toString()}>
-					<Text style={[styles.text, styles.listPrefix, { color: colors.bodyText }]}>{item.number}. </Text>
-					<Text style={[styles.text, styles.inline, { color: colors.bodyText }]}>
+					<Text style={[styles.text, styles.listPrefix, { color: colors.fontDefault }]}>{item.number}. </Text>
+					<Text style={[styles.text, styles.inline, { color: colors.fontDefault }]}>
 						<Inline value={item.value} />
 					</Text>
 				</View>
diff --git a/app/containers/markdown/new/Paragraph.tsx b/app/containers/markdown/new/Paragraph.tsx
index 2c8735138..f2701569e 100644
--- a/app/containers/markdown/new/Paragraph.tsx
+++ b/app/containers/markdown/new/Paragraph.tsx
@@ -32,7 +32,7 @@ const Paragraph = ({ value }: IParagraphProps) => {
 		forceTrim = true;
 	}
 	return (
-		<Text style={[styles.text, { color: themes[theme].bodyText }]}>
+		<Text style={[styles.text, { color: themes[theme].fontDefault }]}>
 			<Inline value={value} forceTrim={forceTrim} />
 		</Text>
 	);
diff --git a/app/containers/markdown/new/Quote.tsx b/app/containers/markdown/new/Quote.tsx
index 8578097b3..c2dcc5e3e 100644
--- a/app/containers/markdown/new/Quote.tsx
+++ b/app/containers/markdown/new/Quote.tsx
@@ -15,7 +15,7 @@ const Quote = ({ value }: IQuoteProps) => {
 	const { theme } = useTheme();
 	return (
 		<View style={styles.container}>
-			<View style={[styles.quote, { backgroundColor: themes[theme].borderColor }]} />
+			<View style={[styles.quote, { backgroundColor: themes[theme].strokeLight }]} />
 			<View style={styles.childContainer}>
 				{value.map(item => (
 					<Paragraph value={item.value} />
diff --git a/app/containers/markdown/new/TaskList.tsx b/app/containers/markdown/new/TaskList.tsx
index b893582c7..6777d989d 100644
--- a/app/containers/markdown/new/TaskList.tsx
+++ b/app/containers/markdown/new/TaskList.tsx
@@ -17,14 +17,14 @@ const TaskList = ({ value = [] }: ITasksProps) => {
 		<View>
 			{value.map(item => (
 				<View style={styles.row}>
-					<Text style={[styles.text, { color: colors.bodyText }]}>
+					<Text style={[styles.text, { color: colors.fontDefault }]}>
 						<CustomIcon
 							testID={item.status ? 'task-list-checked' : 'task-list-unchecked'}
 							name={item.status ? 'checkbox-checked' : 'checkbox-unchecked'}
 							size={24}
 						/>
 					</Text>
-					<Text style={[styles.inline, { color: colors.bodyText }]}>
+					<Text style={[styles.inline, { color: colors.fontDefault }]}>
 						<Inline value={item.value} />
 					</Text>
 				</View>
diff --git a/app/containers/markdown/new/UnorderedList.tsx b/app/containers/markdown/new/UnorderedList.tsx
index 67a603291..36c7644b9 100644
--- a/app/containers/markdown/new/UnorderedList.tsx
+++ b/app/containers/markdown/new/UnorderedList.tsx
@@ -17,8 +17,8 @@ const UnorderedList = ({ value }: IUnorderedListProps) => {
 		<View>
 			{value.map(item => (
 				<View style={styles.row}>
-					<Text style={[styles.text, { color: themes[theme].bodyText }]}>{'\u2022'}</Text>
-					<Text style={[styles.inline, { color: themes[theme].bodyText }]}>
+					<Text style={[styles.text, { color: themes[theme].fontDefault }]}>{'\u2022'}</Text>
+					<Text style={[styles.inline, { color: themes[theme].fontDefault }]}>
 						<Inline value={item.value} />
 					</Text>
 				</View>
diff --git a/app/containers/message/Broadcast.tsx b/app/containers/message/Broadcast.tsx
index da7c91871..d37f9573f 100644
--- a/app/containers/message/Broadcast.tsx
+++ b/app/containers/message/Broadcast.tsx
@@ -21,8 +21,8 @@ const Broadcast = React.memo(({ author, broadcast }: IMessageBroadcast) => {
 			<View style={styles.buttonContainer}>
 				<Touchable
 					onPress={replyBroadcast}
-					background={Touchable.Ripple(themes[theme].bannerBackground)}
-					style={[styles.button, { backgroundColor: themes[theme].tintColor }]}
+					background={Touchable.Ripple(themes[theme].surfaceNeutral)}
+					style={[styles.button, { backgroundColor: themes[theme].badgeBackgroundLevel2 }]}
 					hitSlop={BUTTON_HIT_SLOP}
 					testID='message-broadcast-reply'
 				>
diff --git a/app/containers/message/CallButton.tsx b/app/containers/message/CallButton.tsx
index e703192df..bef3c5ec3 100644
--- a/app/containers/message/CallButton.tsx
+++ b/app/containers/message/CallButton.tsx
@@ -16,8 +16,8 @@ const CallButton = React.memo(({ handleEnterCall }: IMessageCallButton) => {
 		<View style={styles.buttonContainer}>
 			<Touchable
 				onPress={handleEnterCall}
-				background={Touchable.Ripple(themes[theme].bannerBackground)}
-				style={[styles.button, { backgroundColor: themes[theme].tintColor }]}
+				background={Touchable.Ripple(themes[theme].surfaceNeutral)}
+				style={[styles.button, { backgroundColor: themes[theme].badgeBackgroundLevel2 }]}
 				hitSlop={BUTTON_HIT_SLOP}
 			>
 				<>
diff --git a/app/containers/message/Components/CollapsibleQuote/index.tsx b/app/containers/message/Components/CollapsibleQuote/index.tsx
index 7f22cc6b3..08f099efe 100644
--- a/app/containers/message/Components/CollapsibleQuote/index.tsx
+++ b/app/containers/message/Components/CollapsibleQuote/index.tsx
@@ -92,7 +92,7 @@ const Fields = React.memo(
 			<>
 				{attachment.fields.map(field => (
 					<View key={field.title} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
-						<Text testID='collapsibleQuoteTouchableFieldTitle' style={[styles.fieldTitle, { color: themes[theme].bodyText }]}>
+						<Text testID='collapsibleQuoteTouchableFieldTitle' style={[styles.fieldTitle, { color: themes[theme].fontDefault }]}>
 							{field.title}
 						</Text>
 						<Markdown
@@ -161,7 +161,7 @@ const CollapsibleQuote = React.memo(
 							borderLeftWidth: 2
 						}
 					]}
-					background={Touchable.Ripple(themes[theme].bannerBackground)}
+					background={Touchable.Ripple(themes[theme].surfaceNeutral)}
 					hitSlop={BUTTON_HIT_SLOP}
 				>
 					<View style={styles.touchableContainer}>
diff --git a/app/containers/message/Components/RightIcons/MessageError.tsx b/app/containers/message/Components/RightIcons/MessageError.tsx
index a33286640..cce2740bd 100644
--- a/app/containers/message/Components/RightIcons/MessageError.tsx
+++ b/app/containers/message/Components/RightIcons/MessageError.tsx
@@ -19,7 +19,7 @@ const MessageError = React.memo(
 
 		return (
 			<Touchable onPress={onErrorPress} style={styles.rightIcons} hitSlop={BUTTON_HIT_SLOP}>
-				<CustomIcon name='warning' color={themes[theme].dangerColor} size={16} />
+				<CustomIcon name='warning' color={themes[theme].buttonBackgroundDangerDefault} size={16} />
 			</Touchable>
 		);
 	},
diff --git a/app/containers/message/Components/RightIcons/ReadReceipt.tsx b/app/containers/message/Components/RightIcons/ReadReceipt.tsx
index 6e9b5e96f..f8ab42ffb 100644
--- a/app/containers/message/Components/RightIcons/ReadReceipt.tsx
+++ b/app/containers/message/Components/RightIcons/ReadReceipt.tsx
@@ -10,7 +10,7 @@ const ReadReceipt = React.memo(({ isReadReceiptEnabled, unread }: { isReadReceip
 		return (
 			<CustomIcon
 				name='check'
-				color={!unread && unread !== null ? colors.tintColor : colors.auxiliaryTintColor}
+				color={!unread && unread !== null ? colors.badgeBackgroundLevel2 : colors.strokeHighlight}
 				size={16}
 				style={styles.rightIcons}
 			/>
diff --git a/app/containers/message/Discussion.tsx b/app/containers/message/Discussion.tsx
index 4f4692672..04fcfcbeb 100644
--- a/app/containers/message/Discussion.tsx
+++ b/app/containers/message/Discussion.tsx
@@ -25,12 +25,12 @@ const Discussion = React.memo(
 		return (
 			<>
 				<Text style={[styles.startedDiscussion, { color: themes[theme].fontSecondaryInfo }]}>{I18n.t('Started_discussion')}</Text>
-				<Text style={[styles.text, { color: themes[theme].bodyText }]}>{msg}</Text>
+				<Text style={[styles.text, { color: themes[theme].fontDefault }]}>{msg}</Text>
 				<View style={styles.buttonContainer}>
 					<Touchable
 						onPress={onDiscussionPress}
-						background={Touchable.Ripple(themes[theme].bannerBackground)}
-						style={[styles.button, { backgroundColor: themes[theme].tintColor }]}
+						background={Touchable.Ripple(themes[theme].surfaceNeutral)}
+						style={[styles.button, { backgroundColor: themes[theme].badgeBackgroundLevel2 }]}
 						hitSlop={BUTTON_HIT_SLOP}
 					>
 						<>
diff --git a/app/containers/message/Image.tsx b/app/containers/message/Image.tsx
index 23ed6e607..695ef8c03 100644
--- a/app/containers/message/Image.tsx
+++ b/app/containers/message/Image.tsx
@@ -45,7 +45,7 @@ const Button = React.memo(({ children, onPress, disabled }: IMessageButton) => {
 			disabled={disabled}
 			onPress={onPress}
 			style={styles.imageContainer}
-			background={Touchable.Ripple(colors.bannerBackground)}
+			background={Touchable.Ripple(colors.surfaceNeutral)}
 		>
 			{children}
 		</Touchable>
@@ -57,7 +57,7 @@ export const MessageImage = React.memo(({ imgUri, cached, loading }: { imgUri: s
 	return (
 		<>
 			<FastImage
-				style={[styles.image, { borderColor: colors.borderColor }]}
+				style={[styles.image, { borderColor: colors.strokeLight }]}
 				source={{ uri: encodeURI(imgUri) }}
 				resizeMode={FastImage.resizeMode.cover}
 			/>
diff --git a/app/containers/message/Reactions.tsx b/app/containers/message/Reactions.tsx
index 5bfa3c7ef..9ebf97516 100644
--- a/app/containers/message/Reactions.tsx
+++ b/app/containers/message/Reactions.tsx
@@ -36,11 +36,11 @@ const AddReaction = React.memo(({ theme }: { theme: TSupportedThemes }) => {
 			key='message-add-reaction'
 			testID='message-add-reaction'
 			style={[styles.reactionButton, { backgroundColor: themes[theme].surfaceRoom }]}
-			background={Touchable.Ripple(themes[theme].bannerBackground)}
+			background={Touchable.Ripple(themes[theme].surfaceNeutral)}
 			hitSlop={BUTTON_HIT_SLOP}
 		>
-			<View style={[styles.reactionContainer, { borderColor: themes[theme].borderColor }]}>
-				<CustomIcon name='reaction-add' size={21} color={themes[theme].tintColor} />
+			<View style={[styles.reactionContainer, { borderColor: themes[theme].strokeLight }]}>
+				<CustomIcon name='reaction-add' size={21} color={themes[theme].badgeBackgroundLevel2} />
 			</View>
 		</Touchable>
 	);
@@ -57,19 +57,19 @@ const Reaction = React.memo(({ reaction, getCustomEmoji, theme }: IMessageReacti
 			testID={`message-reaction-${reaction.emoji}`}
 			style={[
 				styles.reactionButton,
-				{ backgroundColor: reacted ? themes[theme].bannerBackground : themes[theme].surfaceRoom }
+				{ backgroundColor: reacted ? themes[theme].surfaceNeutral : themes[theme].surfaceRoom }
 			]}
-			background={Touchable.Ripple(themes[theme].bannerBackground)}
+			background={Touchable.Ripple(themes[theme].surfaceNeutral)}
 			hitSlop={BUTTON_HIT_SLOP}
 		>
-			<View style={[styles.reactionContainer, { borderColor: reacted ? themes[theme].tintColor : themes[theme].borderColor }]}>
+			<View style={[styles.reactionContainer, { borderColor: reacted ? themes[theme].badgeBackgroundLevel2 : themes[theme].strokeLight }]}>
 				<Emoji
 					content={reaction.emoji}
 					standardEmojiStyle={styles.reactionEmoji}
 					customEmojiStyle={styles.reactionCustomEmoji}
 					getCustomEmoji={getCustomEmoji}
 				/>
-				<Text style={[styles.reactionCount, { color: themes[theme].tintColor }]}>{reaction.usernames.length}</Text>
+				<Text style={[styles.reactionCount, { color: themes[theme].badgeBackgroundLevel2 }]}>{reaction.usernames.length}</Text>
 			</View>
 		</Touchable>
 	);
diff --git a/app/containers/message/RepliedThread.tsx b/app/containers/message/RepliedThread.tsx
index 4e8ba688e..c0a2c7d68 100644
--- a/app/containers/message/RepliedThread.tsx
+++ b/app/containers/message/RepliedThread.tsx
@@ -34,8 +34,8 @@ const RepliedThread = memo(({ tmid, tmsg, isHeader, fetchThreadName, id, isEncry
 
 	return (
 		<View style={styles.repliedThread} testID={`message-thread-replied-on-${msg}`}>
-			<CustomIcon name='threads' size={20} style={styles.repliedThreadIcon} color={themes[theme].tintColor} />
-			<MarkdownPreview msg={msg} style={[styles.repliedThreadName, { color: themes[theme].tintColor }]} />
+			<CustomIcon name='threads' size={20} style={styles.repliedThreadIcon} color={themes[theme].badgeBackgroundLevel2} />
+			<MarkdownPreview msg={msg} style={[styles.repliedThreadName, { color: themes[theme].badgeBackgroundLevel2 }]} />
 			<View style={styles.repliedThreadDisclosure}>
 				<CustomIcon name='chevron-right' color={themes[theme].fontSecondaryInfo} size={20} />
 			</View>
diff --git a/app/containers/message/Reply.tsx b/app/containers/message/Reply.tsx
index 33e7dc019..a0ad402e6 100644
--- a/app/containers/message/Reply.tsx
+++ b/app/containers/message/Reply.tsx
@@ -101,12 +101,12 @@ const Title = React.memo(
 		return (
 			<View style={styles.authorContainer}>
 				{attachment.author_name ? (
-					<Text numberOfLines={1} style={[styles.author, { color: themes[theme].auxiliaryTintColor }]}>
+					<Text numberOfLines={1} style={[styles.author, { color: themes[theme].strokeHighlight }]}>
 						{attachment.author_name}
 					</Text>
 				) : null}
 				{time ? <Text style={[messageStyles.time, { color: themes[theme].fontSecondaryInfo }]}>{time}</Text> : null}
-				{attachment.title ? <Text style={[styles.title, { color: themes[theme].bodyText }]}>{attachment.title}</Text> : null}
+				{attachment.title ? <Text style={[styles.title, { color: themes[theme].fontDefault }]}>{attachment.title}</Text> : null}
 			</View>
 		);
 	}
@@ -132,7 +132,7 @@ const Description = React.memo(
 		return (
 			<Markdown
 				msg={text}
-				style={[{ color: themes[theme].auxiliaryTintColor, fontSize: 14 }]}
+				style={[{ color: themes[theme].strokeHighlight, fontSize: 14 }]}
 				username={user.username}
 				getCustomEmoji={getCustomEmoji}
 				theme={theme}
@@ -187,7 +187,7 @@ const Fields = React.memo(
 			<View style={styles.fieldsContainer}>
 				{attachment.fields.map(field => (
 					<View key={field.title} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
-						<Text style={[styles.fieldTitle, { color: themes[theme].bodyText }]}>{field.title}</Text>
+						<Text style={[styles.fieldTitle, { color: themes[theme].fontDefault }]}>{field.title}</Text>
 						<Markdown msg={field?.value || ''} username={user.username} getCustomEmoji={getCustomEmoji} theme={theme} />
 					</View>
 				))}
@@ -242,7 +242,7 @@ const Reply = React.memo(
 							borderColor
 						}
 					]}
-					background={Touchable.Ripple(themes[theme].bannerBackground)}
+					background={Touchable.Ripple(themes[theme].surfaceNeutral)}
 					disabled={loading || attachment.message_link}
 				>
 					<View style={styles.attachmentContainer}>
@@ -253,7 +253,7 @@ const Reply = React.memo(
 							attachments={attachment.attachments}
 							getCustomEmoji={getCustomEmoji}
 							timeFormat={timeFormat}
-							style={[{ color: themes[theme].auxiliaryTintColor, fontSize: 14, marginBottom: 8 }]}
+							style={[{ color: themes[theme].strokeHighlight, fontSize: 14, marginBottom: 8 }]}
 							isReply
 							showAttachment={showAttachment}
 						/>
@@ -263,7 +263,7 @@ const Reply = React.memo(
 								<View
 									style={[
 										styles.backdrop,
-										{ backgroundColor: themes[theme].bannerBackground, opacity: themes[theme].attachmentLoadingOpacity }
+										{ backgroundColor: themes[theme].surfaceNeutral, opacity: themes[theme].attachmentLoadingOpacity }
 									]}
 								></View>
 								<RCActivityIndicator />
diff --git a/app/containers/message/Thread.tsx b/app/containers/message/Thread.tsx
index 5a234b4cc..a96594615 100644
--- a/app/containers/message/Thread.tsx
+++ b/app/containers/message/Thread.tsx
@@ -20,7 +20,7 @@ const Thread = React.memo(
 
 		return (
 			<View style={styles.buttonContainer}>
-				<View style={[styles.button, { backgroundColor: themes[theme].tintColor }]} testID={`message-thread-button-${msg}`}>
+				<View style={[styles.button, { backgroundColor: themes[theme].badgeBackgroundLevel2 }]} testID={`message-thread-button-${msg}`}>
 					<Text style={[styles.buttonText, { color: themes[theme].fontWhite }]}>{I18n.t('Reply')}</Text>
 				</View>
 				<ThreadDetails
diff --git a/app/containers/message/Urls.tsx b/app/containers/message/Urls.tsx
index 74a420463..3904ff978 100644
--- a/app/containers/message/Urls.tsx
+++ b/app/containers/message/Urls.tsx
@@ -66,7 +66,7 @@ const UrlContent = React.memo(
 		return (
 			<View style={styles.textContainer}>
 				{title ? (
-					<Text style={[styles.title, { color: colors.tintColor }]} numberOfLines={2}>
+					<Text style={[styles.title, { color: colors.badgeBackgroundLevel2 }]} numberOfLines={2}>
 						{title}
 					</Text>
 				) : null}
@@ -124,11 +124,11 @@ const Url = React.memo(
 					styles.container,
 					{
 						backgroundColor: themes[theme].surfaceTint,
-						borderColor: themes[theme].borderColor
+						borderColor: themes[theme].strokeLight
 					},
 					imageLoadedState === 'loading' && styles.loading
 				]}
-				background={Touchable.Ripple(themes[theme].bannerBackground)}
+				background={Touchable.Ripple(themes[theme].surfaceNeutral)}
 			>
 				<>
 					{image ? (
diff --git a/app/containers/message/Video.tsx b/app/containers/message/Video.tsx
index 0f4e86259..54a8bee4a 100644
--- a/app/containers/message/Video.tsx
+++ b/app/containers/message/Video.tsx
@@ -225,7 +225,7 @@ const Video = ({ file, showAttachment, getCustomEmoji, style, isReply, msg }: IM
 			<Touchable
 				onPress={onPress}
 				style={[styles.button, { backgroundColor: themes[theme].surfaceDark }]}
-				background={Touchable.Ripple(themes[theme].bannerBackground)}
+				background={Touchable.Ripple(themes[theme].surfaceNeutral)}
 			>
 				<Thumbnail loading={loading} cached={cached} />
 			</Touchable>
diff --git a/app/ee/omnichannel/containers/OmnichannelHeader/OmnichannelQueue.tsx b/app/ee/omnichannel/containers/OmnichannelHeader/OmnichannelQueue.tsx
index 7ce8b2320..b46c5fb8c 100644
--- a/app/ee/omnichannel/containers/OmnichannelHeader/OmnichannelQueue.tsx
+++ b/app/ee/omnichannel/containers/OmnichannelHeader/OmnichannelQueue.tsx
@@ -21,19 +21,19 @@ const OmnichannelQueue = ({ queueSize, onPress }: IOmnichannelQueue) => {
 			<List.Item
 				title='Omnichannel_queue'
 				heightContainer={50}
-				left={() => <List.Icon name='queue' size={24} color={themes[theme].auxiliaryTintColor} />}
-				color={themes[theme].bodyText}
+				left={() => <List.Icon name='queue' size={24} color={themes[theme].strokeHighlight} />}
+				color={themes[theme].fontDefault}
 				onPress={queueSize ? onPress : undefined}
 				styleTitle={styles.titleOmnichannelQueue}
 				right={() => (
 					<View style={styles.omnichannelRightContainer}>
 						{queueSize ? (
 							<>
-								<UnreadBadge style={[styles.queueIcon, { backgroundColor: themes[theme].tintColor }]} unread={queueSize} />
-								<CustomIcon name='chevron-right' style={styles.actionIndicator} color={themes[theme].bodyText} size={24} />
+								<UnreadBadge style={[styles.queueIcon, { backgroundColor: themes[theme].badgeBackgroundLevel2 }]} unread={queueSize} />
+								<CustomIcon name='chevron-right' style={styles.actionIndicator} color={themes[theme].fontDefault} size={24} />
 							</>
 						) : (
-							<Text style={[styles.emptyText, { color: themes[theme].auxiliaryTintColor }]}>{i18n.t('Empty')}</Text>
+							<Text style={[styles.emptyText, { color: themes[theme].strokeHighlight }]}>{i18n.t('Empty')}</Text>
 						)}
 					</View>
 				)}
diff --git a/app/ee/omnichannel/containers/OmnichannelHeader/index.tsx b/app/ee/omnichannel/containers/OmnichannelHeader/index.tsx
index 02e682bf2..dc570346c 100644
--- a/app/ee/omnichannel/containers/OmnichannelHeader/index.tsx
+++ b/app/ee/omnichannel/containers/OmnichannelHeader/index.tsx
@@ -61,7 +61,7 @@ const OmnichannelStatus = memo(({ searching, goQueue, queueSize, user }: IOmnich
 		<>
 			<List.Item
 				title='Omnichannel'
-				color={themes[theme].bodyText}
+				color={themes[theme].fontDefault}
 				onPress={toggleLivechat}
 				right={() => (
 					<View style={styles.omnichannelRightContainer}>
diff --git a/app/lib/constants/colors.ts b/app/lib/constants/colors.ts
index 49aa4fdca..adaefac46 100644
--- a/app/lib/constants/colors.ts
+++ b/app/lib/constants/colors.ts
@@ -1,8 +1,6 @@
-const fixedColors = {
-	backdropColor: '#000000'
-};
+const backdropColor = '#000000';
 
-const newColors = {
+const light = {
 	surfaceLight: '#FFFFFF',
 	surfaceTint: '#F7F8FA',
 	surfaceRoom: '#FFFFFF',
@@ -94,7 +92,7 @@ const newColors = {
 	buttonSuccessDisabled: '#FFFFFF'
 };
 
-const newColorsDark = {
+const dark = {
 	surfaceLight: '#262931',
 	surfaceTint: '#1F2329',
 	surfaceRoom: '#1F2329',
@@ -186,20 +184,20 @@ const newColorsDark = {
 	buttonSuccessDisabled: '#757575'
 };
 
-const newColorsBlack = {
+const black = {
 	surfaceLight: '#0d0d0d',
 	surfaceTint: '#16181a',
 	surfaceRoom: '#000000',
-	surfaceNeutral: '#2F343D', //#0d0d0d
-	// surfaceDisabled: '#24272E',
+	surfaceNeutral: '#1f2329',
+	surfaceDisabled: '#24272E',
 	surfaceHover: '#080808',
-	// surfaceSelected: '#3C3F44',
+	surfaceSelected: '#3C3F44',
 	surfaceDark: '#E4E7EA',
-	// surfaceFeatured: '#5F1477',
-	// surfaceFeaturedHover: '#4A105D',
+	surfaceFeatured: '#5F1477',
+	surfaceFeaturedHover: '#4A105D',
 
 	strokeExtraLight: '#2F343D',
-	strokeLight: '#333842',
+	strokeLight: '#1f2329',
 	strokeMedium: '#404754',
 	strokeDark: '#9EA2A8',
 	strokeExtraDark: '#CBCED1',
@@ -280,52 +278,23 @@ const newColorsBlack = {
 
 export const colors = {
 	light: {
-		...newColors,
-		bannerBackground: '#f1f2f4',
-		bodyText: '#2f343d',
-		dangerColor: '#f5455c',
-		successColor: '#2de0a5',
-		borderColor: '#e1e5e8',
-		controlText: '#54585e',
-		infoText: '#6d6d72',
-		tintColor: '#1d74f5',
-		tintDisabled: '#88B4F5',
-		auxiliaryTintColor: '#6C727A',
-		actionTintColor: '#1d74f5',
+		...light,
+		backdropColor,
 		backdropOpacity: 0.3,
-		attachmentLoadingOpacity: 0.7,
+		attachmentLoadingOpacity: 0.7
 	},
 	dark: {
-		...newColorsDark,
-		bannerBackground: '#0e1f38',
-		bodyText: '#cbced1',
-		dangerColor: '#f5455c',
-		successColor: '#2de0a5',
-		borderColor: '#0f213d',
-		controlText: '#dadde6',
-		infoText: '#6D6D72',
-		tintColor: '#1d74f5',
-		tintDisabled: '#88B4F5',
-		auxiliaryTintColor: '#f9f9f9',
-		actionTintColor: '#1d74f5',
+		...dark,
+		backdropColor,
 		backdropOpacity: 0.9,
-		attachmentLoadingOpacity: 0.3,
-	black: {
-		...newColorsDark,
-		bannerBackground: '#1f2329',
-		bodyText: '#cbced1',
-		dangerColor: '#f5455c',
-		successColor: '#2de0a5',
-		borderColor: '#1f2329',
-		controlText: '#dadde6',
-		infoText: '#6d6d72',
-		tintColor: '#1e9bfe',
-		tintDisabled: '#88B4F5', // TODO: Evaluate this with design team
-		auxiliaryTintColor: '#f9f9f9',
-		actionTintColor: '#1e9bfe',
-		backdropOpacity: 0.9,
-		attachmentLoadingOpacity: 0.3,
+		attachmentLoadingOpacity: 0.3
 	},
+	black: {
+		...black,
+		backdropColor,
+		backdropOpacity: 0.9,
+		attachmentLoadingOpacity: 0.3
+	}
 };
 
 export const themes = colors;
diff --git a/app/lib/hooks/useVideoConf/StartACallActionSheet.tsx b/app/lib/hooks/useVideoConf/StartACallActionSheet.tsx
index 2b8bd3c18..b102e6180 100644
--- a/app/lib/hooks/useVideoConf/StartACallActionSheet.tsx
+++ b/app/lib/hooks/useVideoConf/StartACallActionSheet.tsx
@@ -74,7 +74,7 @@ export default function StartACallActionSheet({
 				)}
 			</View>
 			<Button
-				backgroundColor={calling ? colors.buttonBackgroundSecondaryDisabled : colors.actionTintColor}
+				backgroundColor={calling ? colors.buttonBackgroundSecondaryDisabled : colors.strokeHighlight}
 				color={calling ? colors.strokeDark : colors.surfaceLight}
 				onPress={() => {
 					if (calling) {
diff --git a/app/lib/methods/helpers/navigation/index.ts b/app/lib/methods/helpers/navigation/index.ts
index a2d9f81d5..a92f7ac6c 100644
--- a/app/lib/methods/helpers/navigation/index.ts
+++ b/app/lib/methods/helpers/navigation/index.ts
@@ -49,7 +49,7 @@ export const navigationTheme = (theme: TSupportedThemes) => {
 		colors: {
 			...defaultNavTheme.colors,
 			background: themes[theme].surfaceRoom,
-			border: themes[theme].borderColor
+			border: themes[theme].strokeLight
 		}
 	};
 };
diff --git a/app/views/AuthLoadingView.tsx b/app/views/AuthLoadingView.tsx
index c0d42d69a..efe473e3f 100644
--- a/app/views/AuthLoadingView.tsx
+++ b/app/views/AuthLoadingView.tsx
@@ -30,7 +30,7 @@ const AuthLoadingView = React.memo((): React.ReactElement => {
 			{text ? (
 				<>
 					<ActivityIndicator color={colors.fontSecondaryInfo} size='large' />
-					<Text style={[styles.text, { color: colors.bodyText }]}>{`${text}\n${I18n.t('Please_wait')}`}</Text>
+					<Text style={[styles.text, { color: colors.fontDefault }]}>{`${text}\n${I18n.t('Please_wait')}`}</Text>
 				</>
 			) : null}
 		</View>
diff --git a/app/views/AutoTranslateView/index.tsx b/app/views/AutoTranslateView/index.tsx
index f71f0c101..4525d80ab 100644
--- a/app/views/AutoTranslateView/index.tsx
+++ b/app/views/AutoTranslateView/index.tsx
@@ -101,7 +101,7 @@ const AutoTranslateView = (): React.ReactElement => {
 			testID={`auto-translate-view-${language}`}
 			right={() =>
 				selectedLanguage === language ? (
-					<List.Icon testID={`auto-translate-view-${language}-check`} name='check' color={colors.tintColor} />
+					<List.Icon testID={`auto-translate-view-${language}-check`} name='check' color={colors.badgeBackgroundLevel2} />
 				) : null
 			}
 			translateTitle={false}
diff --git a/app/views/CannedResponseDetail.tsx b/app/views/CannedResponseDetail.tsx
index a50a15a9b..dde8659cc 100644
--- a/app/views/CannedResponseDetail.tsx
+++ b/app/views/CannedResponseDetail.tsx
@@ -125,11 +125,11 @@ const CannedResponseDetail = ({ navigation, route }: ICannedResponseDetailProps)
 							{cannedResponse?.tags?.length > 0 ? (
 								cannedResponse.tags.map(t => (
 									<View style={[styles.cannedTagWrap, { backgroundColor: themes[theme].strokeExtraLight }]}>
-										<Text style={[styles.cannedTag, { color: themes[theme].auxiliaryTintColor }]}>{t}</Text>
+										<Text style={[styles.cannedTag, { color: themes[theme].strokeHighlight }]}>{t}</Text>
 									</View>
 								))
 							) : (
-								<Text style={[styles.cannedText, { color: themes[theme].auxiliaryTintColor }]}>-</Text>
+								<Text style={[styles.cannedText, { color: themes[theme].strokeHighlight }]}>-</Text>
 							)}
 						</View>
 					</View>
diff --git a/app/views/CannedResponsesListView/CannedResponseItem.tsx b/app/views/CannedResponsesListView/CannedResponseItem.tsx
index 78ec45749..eb02029c7 100644
--- a/app/views/CannedResponsesListView/CannedResponseItem.tsx
+++ b/app/views/CannedResponsesListView/CannedResponseItem.tsx
@@ -32,7 +32,7 @@ const CannedResponseItem = ({
 			<View style={styles.cannedRow}>
 				<View style={styles.cannedWrapShortcutScope}>
 					<Text style={[styles.cannedShortcut, { color: themes[theme].fontTitlesLabels }]}>!{shortcut}</Text>
-					<Text style={[styles.cannedScope, { color: themes[theme].auxiliaryTintColor }]}>{scope}</Text>
+					<Text style={[styles.cannedScope, { color: themes[theme].strokeHighlight }]}>{scope}</Text>
 				</View>
 
 				<Button
@@ -44,14 +44,14 @@ const CannedResponseItem = ({
 				/>
 			</View>
 
-			<Text ellipsizeMode='tail' numberOfLines={2} style={[styles.cannedText, { color: themes[theme].auxiliaryTintColor }]}>
+			<Text ellipsizeMode='tail' numberOfLines={2} style={[styles.cannedText, { color: themes[theme].strokeHighlight }]}>
 				“{text}”
 			</Text>
 			<View style={styles.cannedTagContainer}>
 				{tags?.length > 0
 					? tags.map(t => (
 							<View style={[styles.cannedTagWrap, { backgroundColor: themes[theme].strokeExtraLight }]}>
-								<Text style={[styles.cannedTag, { color: themes[theme].auxiliaryTintColor }]}>{t}</Text>
+								<Text style={[styles.cannedTag, { color: themes[theme].strokeHighlight }]}>{t}</Text>
 							</View>
 					  ))
 					: null}
diff --git a/app/views/ChangeAvatarView/AvatarSuggestionItem.tsx b/app/views/ChangeAvatarView/AvatarSuggestionItem.tsx
index 2e0d02bb8..1336eb5c4 100644
--- a/app/views/ChangeAvatarView/AvatarSuggestionItem.tsx
+++ b/app/views/ChangeAvatarView/AvatarSuggestionItem.tsx
@@ -31,7 +31,7 @@ const AvatarSuggestionItem = ({
 	const { colors } = useTheme();
 
 	return (
-		<View key={item?.service} testID={testID} style={[styles.container, { backgroundColor: colors.borderColor }]}>
+		<View key={item?.service} testID={testID} style={[styles.container, { backgroundColor: colors.strokeLight }]}>
 			<Avatar avatar={item?.url} text={text} size={64} onPress={() => onPress(item)} />
 		</View>
 	);
diff --git a/app/views/ChangeAvatarView/index.tsx b/app/views/ChangeAvatarView/index.tsx
index e5f62a90a..a672bfe95 100644
--- a/app/views/ChangeAvatarView/index.tsx
+++ b/app/views/ChangeAvatarView/index.tsx
@@ -239,7 +239,7 @@ const ChangeAvatarView = () => {
 							title={I18n.t('Delete_image')}
 							type='primary'
 							disabled={saving}
-							backgroundColor={colors.dangerColor}
+							backgroundColor={colors.buttonBackgroundDangerDefault}
 							onPress={() => dispatchAvatar({ type: AvatarStateActions.RESET_ROOM_AVATAR, payload: { data: null } })}
 							testID='change-avatar-view-delete-my-account'
 						/>
diff --git a/app/views/CloseLivechatView.tsx b/app/views/CloseLivechatView.tsx
index c021a157a..8e5d6a1c5 100644
--- a/app/views/CloseLivechatView.tsx
+++ b/app/views/CloseLivechatView.tsx
@@ -110,7 +110,7 @@ const CloseLivechatView = ({ navigation, route }: IBaseScreen<ChatsStackParamLis
 						title={I18n.t('Close')}
 						onPress={submit}
 						disabled={!canSubmit()}
-						backgroundColor={colors.dangerColor}
+						backgroundColor={colors.buttonBackgroundDangerDefault}
 						type='primary'
 						style={styles.buttonMarginVertical}
 					/>
diff --git a/app/views/DefaultBrowserView/Item.tsx b/app/views/DefaultBrowserView/Item.tsx
index fc5e221cc..2cc0e3bd6 100644
--- a/app/views/DefaultBrowserView/Item.tsx
+++ b/app/views/DefaultBrowserView/Item.tsx
@@ -25,7 +25,7 @@ const Item = ({ title, value, browser, changeDefaultBrowser }: IRenderItem) => {
 			title={I18n.t(title, { defaultValue: title })}
 			onPress={() => changeDefaultBrowser(value)}
 			testID={`default-browser-view-${title}`}
-			right={() => (isSelected ? <List.Icon name='check' color={colors.tintColor} /> : null)}
+			right={() => (isSelected ? <List.Icon name='check' color={colors.badgeBackgroundLevel2} /> : null)}
 			translateTitle={false}
 		/>
 	);
diff --git a/app/views/DirectoryView/Options.tsx b/app/views/DirectoryView/Options.tsx
index acde27754..99ac20bc1 100644
--- a/app/views/DirectoryView/Options.tsx
+++ b/app/views/DirectoryView/Options.tsx
@@ -67,8 +67,8 @@ export default class DirectoryOptions extends PureComponent<IDirectoryOptionsPro
 		return (
 			<Touch onPress={() => changeType(itemType)} style={styles.dropdownItemButton} accessibilityLabel={I18n.t(text)}>
 				<View style={styles.dropdownItemContainer}>
-					<CustomIcon name={icon} size={22} color={themes[theme].bodyText} style={styles.dropdownItemIcon} />
-					<Text style={[styles.dropdownItemText, { color: themes[theme].bodyText }]}>{I18n.t(text)}</Text>
+					<CustomIcon name={icon} size={22} color={themes[theme].fontDefault} style={styles.dropdownItemIcon} />
+					<Text style={[styles.dropdownItemText, { color: themes[theme].fontDefault }]}>{I18n.t(text)}</Text>
 					{propType === itemType ? <Check /> : null}
 				</View>
 			</Touch>
@@ -106,7 +106,7 @@ export default class DirectoryOptions extends PureComponent<IDirectoryOptionsPro
 								style={[styles.dropdownItemIcon, styles.inverted]}
 								size={22}
 								name='chevron-down'
-								color={themes[theme].auxiliaryTintColor}
+								color={themes[theme].strokeHighlight}
 							/>
 						</View>
 					</Touch>
@@ -118,10 +118,10 @@ export default class DirectoryOptions extends PureComponent<IDirectoryOptionsPro
 							<View style={[styles.dropdownSeparator, { backgroundColor: themes[theme].strokeLight }]} />
 							<View style={[styles.dropdownItemContainer, styles.globalUsersContainer]}>
 								<View style={styles.globalUsersTextContainer}>
-									<Text style={[styles.dropdownItemText, { color: themes[theme].infoText }]}>
+									<Text style={[styles.dropdownItemText, { color: themes[theme].fontHint }]}>
 										{I18n.t('Search_global_users')}
 									</Text>
-									<Text style={[styles.dropdownItemDescription, { color: themes[theme].infoText }]}>
+									<Text style={[styles.dropdownItemDescription, { color: themes[theme].fontHint }]}>
 										{I18n.t('Search_global_users_description')}
 									</Text>
 								</View>
diff --git a/app/views/DirectoryView/index.tsx b/app/views/DirectoryView/index.tsx
index 55eca1e19..306f04284 100644
--- a/app/views/DirectoryView/index.tsx
+++ b/app/views/DirectoryView/index.tsx
@@ -222,12 +222,12 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
 							{ borderColor: themes[theme].strokeLight }
 						]}
 					>
-						<CustomIcon name={icon} size={20} color={themes[theme].tintColor} style={styles.toggleDropdownIcon} />
-						<Text style={[styles.toggleDropdownText, { color: themes[theme].tintColor }]}>{I18n.t(text)}</Text>
+						<CustomIcon name={icon} size={20} color={themes[theme].badgeBackgroundLevel2} style={styles.toggleDropdownIcon} />
+						<Text style={[styles.toggleDropdownText, { color: themes[theme].badgeBackgroundLevel2 }]}>{I18n.t(text)}</Text>
 						<CustomIcon
 							name='chevron-down'
 							size={20}
-							color={themes[theme].auxiliaryTintColor}
+							color={themes[theme].strokeHighlight}
 							style={styles.toggleDropdownArrow}
 						/>
 					</View>
diff --git a/app/views/DisplayPrefsView.tsx b/app/views/DisplayPrefsView.tsx
index 0b9537f3c..e28a665bf 100644
--- a/app/views/DisplayPrefsView.tsx
+++ b/app/views/DisplayPrefsView.tsx
@@ -87,7 +87,7 @@ const DisplayPrefsView = (): React.ReactElement => {
 	};
 
 	const renderCheckBox = (value: boolean) => (
-		<List.Icon name={value ? 'checkbox-checked' : 'checkbox-unchecked'} color={value ? colors.actionTintColor : null} />
+		<List.Icon name={value ? 'checkbox-checked' : 'checkbox-unchecked'} color={value ? colors.strokeHighlight : null} />
 	);
 
 	const renderAvatarSwitch = (value: boolean) => (
@@ -95,7 +95,7 @@ const DisplayPrefsView = (): React.ReactElement => {
 	);
 
 	const renderRadio = (value: boolean) => (
-		<RadioButton selected={!!value} color={value ? colors.actionTintColor : colors.fontSecondaryInfo} size={ICON_SIZE} />
+		<RadioButton selected={!!value} color={value ? colors.strokeHighlight : colors.fontSecondaryInfo} size={ICON_SIZE} />
 	);
 
 	return (
diff --git a/app/views/E2EEncryptionSecurityView/ChangePassword.tsx b/app/views/E2EEncryptionSecurityView/ChangePassword.tsx
index 3677127f4..ec61b066d 100644
--- a/app/views/E2EEncryptionSecurityView/ChangePassword.tsx
+++ b/app/views/E2EEncryptionSecurityView/ChangePassword.tsx
@@ -75,7 +75,7 @@ const ChangePassword = () => {
 		<>
 			<List.Section>
 				<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('E2E_encryption_change_password_title')}</Text>
-				<Text style={[styles.description, { color: colors.bodyText }]}>
+				<Text style={[styles.description, { color: colors.fontDefault }]}>
 					{I18n.t('E2E_encryption_change_password_description')}
 				</Text>
 				<FormTextInput
diff --git a/app/views/E2EEncryptionSecurityView/index.tsx b/app/views/E2EEncryptionSecurityView/index.tsx
index 27aa5a1a8..f769d4642 100644
--- a/app/views/E2EEncryptionSecurityView/index.tsx
+++ b/app/views/E2EEncryptionSecurityView/index.tsx
@@ -78,7 +78,7 @@ const E2EEncryptionSecurityView = () => {
 
 					<List.Section>
 						<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('E2E_encryption_reset_title')}</Text>
-						<Text style={[styles.description, { color: colors.bodyText }]}>{I18n.t('E2E_encryption_reset_description')}</Text>
+						<Text style={[styles.description, { color: colors.fontDefault }]}>{I18n.t('E2E_encryption_reset_description')}</Text>
 						<Button
 							onPress={resetOwnKey}
 							title={I18n.t('E2E_encryption_reset_button')}
diff --git a/app/views/E2EEnterYourPasswordView.tsx b/app/views/E2EEnterYourPasswordView.tsx
index 4a91ead41..1687ead7e 100644
--- a/app/views/E2EEnterYourPasswordView.tsx
+++ b/app/views/E2EEnterYourPasswordView.tsx
@@ -61,8 +61,8 @@ const E2EEnterYourPasswordView = (): React.ReactElement => {
 						textContentType='password'
 					/>
 					<Button onPress={submit} title={I18n.t('Confirm')} disabled={!password} testID='e2e-enter-your-password-view-confirm' />
-					<Text style={[styles.info, { color: colors.bodyText }]}>{I18n.t('Enter_Your_Encryption_Password_desc1')}</Text>
-					<Text style={[styles.info, { color: colors.bodyText }]}>{I18n.t('Enter_Your_Encryption_Password_desc2')}</Text>
+					<Text style={[styles.info, { color: colors.fontDefault }]}>{I18n.t('Enter_Your_Encryption_Password_desc1')}</Text>
+					<Text style={[styles.info, { color: colors.fontDefault }]}>{I18n.t('Enter_Your_Encryption_Password_desc2')}</Text>
 				</SafeAreaView>
 			</ScrollView>
 		</KeyboardView>
diff --git a/app/views/E2EHowItWorksView.tsx b/app/views/E2EHowItWorksView.tsx
index 19f5979a9..6ad40fb20 100644
--- a/app/views/E2EHowItWorksView.tsx
+++ b/app/views/E2EHowItWorksView.tsx
@@ -32,7 +32,7 @@ const E2EHowItWorksView = (): React.ReactElement => {
 		});
 	}, []);
 
-	const infoStyle = [styles.info, { color: colors.bodyText }];
+	const infoStyle = [styles.info, { color: colors.fontDefault }];
 
 	return (
 		<SafeAreaView style={[styles.container, { backgroundColor: colors.surfaceRoom }]} testID='e2e-how-it-works-view'>
diff --git a/app/views/E2ESaveYourPasswordView.tsx b/app/views/E2ESaveYourPasswordView.tsx
index 90a318d89..81fb5e32c 100644
--- a/app/views/E2ESaveYourPasswordView.tsx
+++ b/app/views/E2ESaveYourPasswordView.tsx
@@ -107,8 +107,8 @@ const E2ESaveYourPasswordView = () => {
 				<View style={[styles.container, { backgroundColor: colors.surfaceRoom }]}>
 					<Text style={[styles.warning, { color: colors.fontDanger }]}>{I18n.t('Save_Your_Encryption_Password_warning')}</Text>
 					<View style={styles.content}>
-						<Text style={[styles.passwordText, { color: colors.bodyText }]}>{I18n.t('Your_password_is')}</Text>
-						<Text style={[styles.password, { color: colors.bodyText }]}>{password}</Text>
+						<Text style={[styles.passwordText, { color: colors.fontDefault }]}>{I18n.t('Your_password_is')}</Text>
+						<Text style={[styles.password, { color: colors.fontDefault }]}>{password}</Text>
 						<Button
 							onPress={onCopy}
 							style={[styles.copyButton, { backgroundColor: colors.surfaceHover }]}
@@ -117,7 +117,7 @@ const E2ESaveYourPasswordView = () => {
 							fontSize={14}
 						/>
 					</View>
-					<Text style={[styles.info, { color: colors.bodyText }]}>{I18n.t('Save_Your_Encryption_Password_info')}</Text>
+					<Text style={[styles.info, { color: colors.fontDefault }]}>{I18n.t('Save_Your_Encryption_Password_info')}</Text>
 					<Button
 						onPress={onHowItWorks}
 						style={{ backgroundColor: colors.surfaceHover }}
diff --git a/app/views/ForwardMessageView/SelectPersonOrChannel.tsx b/app/views/ForwardMessageView/SelectPersonOrChannel.tsx
index eb1e97042..e4b355276 100644
--- a/app/views/ForwardMessageView/SelectPersonOrChannel.tsx
+++ b/app/views/ForwardMessageView/SelectPersonOrChannel.tsx
@@ -56,7 +56,7 @@ const SelectPersonOrChannel = ({
 
 	return (
 		<View style={styles.inputContainer}>
-			<Text style={[styles.label, { color: colors.bodyText }]}>{I18n.t('Person_or_channel')}</Text>
+			<Text style={[styles.label, { color: colors.fontDefault }]}>{I18n.t('Person_or_channel')}</Text>
 			<MultiSelect
 				onSearch={getRooms}
 				onChange={onRoomSelect}
diff --git a/app/views/ForwardMessageView/index.tsx b/app/views/ForwardMessageView/index.tsx
index 9d43c9d6d..301b5f43e 100644
--- a/app/views/ForwardMessageView/index.tsx
+++ b/app/views/ForwardMessageView/index.tsx
@@ -46,7 +46,7 @@ const ForwardMessageView = () => {
 				<HeaderButton.Container>
 					<HeaderButton.Item
 						title={I18n.t('Send')}
-						color={isSendButtonEnabled ? colors.actionTintColor : colors.fontSecondaryInfo}
+						color={isSendButtonEnabled ? colors.strokeHighlight : colors.fontSecondaryInfo}
 						disabled={!isSendButtonEnabled}
 						onPress={handlePostMessage}
 						testID='forward-message-view-send'
diff --git a/app/views/InviteUsersEditView/Picker.tsx b/app/views/InviteUsersEditView/Picker.tsx
index f8c5ac288..65df0b90d 100644
--- a/app/views/InviteUsersEditView/Picker.tsx
+++ b/app/views/InviteUsersEditView/Picker.tsx
@@ -70,7 +70,7 @@ const Picker = ({ param, first }: { param: 'days' | 'maxUses'; first: string }):
 		dispatch(inviteLinksSetParams(params));
 	};
 
-	const textInputStyle: TextInputProps = { style: { ...styles.pickerText, color: colors.actionTintColor } };
+	const textInputStyle: TextInputProps = { style: { ...styles.pickerText, color: colors.strokeHighlight } };
 	const firstEl = [
 		{
 			label: I18n.t(first),
diff --git a/app/views/LanguageView/LanguageItem.tsx b/app/views/LanguageView/LanguageItem.tsx
index 95143eafa..637b4dc8f 100644
--- a/app/views/LanguageView/LanguageItem.tsx
+++ b/app/views/LanguageView/LanguageItem.tsx
@@ -22,7 +22,7 @@ const LanguageItem = ({
 			title={label}
 			onPress={() => submit(value)}
 			testID={`language-view-${value}`}
-			right={() => (isSelected ? <List.Icon name='check' color={colors.tintColor} /> : null)}
+			right={() => (isSelected ? <List.Icon name='check' color={colors.badgeBackgroundLevel2} /> : null)}
 			translateTitle={false}
 		/>
 	);
diff --git a/app/views/LoginView/UserForm.tsx b/app/views/LoginView/UserForm.tsx
index ee8999647..85a01e743 100644
--- a/app/views/LoginView/UserForm.tsx
+++ b/app/views/LoginView/UserForm.tsx
@@ -151,7 +151,7 @@ const UserForm = () => {
 				<View style={styles.bottomContainer}>
 					<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>{I18n.t('Dont_Have_An_Account')}</Text>
 					<Text
-						style={[styles.bottomContainerTextBold, { color: colors.actionTintColor }]}
+						style={[styles.bottomContainerTextBold, { color: colors.strokeHighlight }]}
 						onPress={register}
 						testID='login-view-register'
 					>
diff --git a/app/views/MediaAutoDownloadView/ListPicker.tsx b/app/views/MediaAutoDownloadView/ListPicker.tsx
index 40afccb52..2323f64a0 100644
--- a/app/views/MediaAutoDownloadView/ListPicker.tsx
+++ b/app/views/MediaAutoDownloadView/ListPicker.tsx
@@ -61,7 +61,7 @@ const ListPicker = ({
 			title={title}
 			onPress={() => showActionSheet({ options: getOptions() })}
 			right={() => (
-				<Text style={[styles.title, { color: colors.actionTintColor }]}>
+				<Text style={[styles.title, { color: colors.strokeHighlight }]}>
 					{/* when picking an option the label should be Never 
 					but when showing among the other settings the label should be Off */}
 					{option.label === 'Never' ? I18n.t('Off') : I18n.t(option.label)}
diff --git a/app/views/NewMessageView/ButtonCreate.tsx b/app/views/NewMessageView/ButtonCreate.tsx
index f3dc7d2d2..1b44662e4 100644
--- a/app/views/NewMessageView/ButtonCreate.tsx
+++ b/app/views/NewMessageView/ButtonCreate.tsx
@@ -20,8 +20,8 @@ const ButtonCreate = ({ onPress, testID, title, icon }: IButton) => {
 			<List.Item
 				onPress={onPress}
 				testID={testID}
-				left={() => <CustomIcon name={icon} size={24} color={themes[theme].bodyText} />}
-				right={() => <CustomIcon name={'chevron-right'} size={24} color={themes[theme].bodyText} />}
+				left={() => <CustomIcon name={icon} size={24} color={themes[theme].fontDefault} />}
+				right={() => <CustomIcon name={'chevron-right'} size={24} color={themes[theme].fontDefault} />}
 				title={title}
 			/>
 			<List.Separator />
diff --git a/app/views/NewServerView/ServerInput/Item.tsx b/app/views/NewServerView/ServerInput/Item.tsx
index ae3fdf9f5..32b7305e0 100644
--- a/app/views/NewServerView/ServerInput/Item.tsx
+++ b/app/views/NewServerView/ServerInput/Item.tsx
@@ -38,7 +38,7 @@ interface IItem {
 const Item = ({ item, theme, onPress, onDelete }: IItem): JSX.Element => (
 	<Touch style={styles.container} onPress={() => onPress(item.url)} testID={`server-history-${item.url}`}>
 		<View style={styles.content}>
-			<Text numberOfLines={1} style={[styles.server, { color: themes[theme].bodyText }]}>
+			<Text numberOfLines={1} style={[styles.server, { color: themes[theme].fontDefault }]}>
 				{item.url}
 			</Text>
 			<Text numberOfLines={1} style={{ color: themes[theme].fontSecondaryInfo }}>
diff --git a/app/views/NewServerView/index.tsx b/app/views/NewServerView/index.tsx
index d7829a53a..b261f4b98 100644
--- a/app/views/NewServerView/index.tsx
+++ b/app/views/NewServerView/index.tsx
@@ -362,7 +362,7 @@ class NewServerView extends React.Component<INewServerViewProps, INewServerViewS
 						style={[
 							styles.subtitle,
 							{
-								color: themes[theme].controlText,
+								color: themes[theme].fontHint,
 								fontSize: moderateScale({ size: 16, width }),
 								marginBottom: verticalScale({ size: 30, height })
 							}
diff --git a/app/views/NotificationPreferencesView/index.tsx b/app/views/NotificationPreferencesView/index.tsx
index c8432490d..c2f914336 100644
--- a/app/views/NotificationPreferencesView/index.tsx
+++ b/app/views/NotificationPreferencesView/index.tsx
@@ -66,7 +66,7 @@ const RenderListPicker = ({
 			testID={testID}
 			onPress={() => showActionSheet({ options })}
 			right={() => (
-				<Text style={[{ ...sharedStyles.textRegular, fontSize: 16 }, { color: colors.actionTintColor }]}>
+				<Text style={[{ ...sharedStyles.textRegular, fontSize: 16 }, { color: colors.strokeHighlight }]}>
 					{option?.label ? I18n.t(option?.label, { defaultValue: option?.label, second: option?.second }) : option?.label}
 				</Text>
 			)}
diff --git a/app/views/PickerView.tsx b/app/views/PickerView.tsx
index c419ad6dc..18170cb23 100644
--- a/app/views/PickerView.tsx
+++ b/app/views/PickerView.tsx
@@ -32,7 +32,7 @@ const Item = ({ item, selected, onItemPress }: IItem) => {
 	return (
 		<List.Item
 			title={I18n.t(item.label, { defaultValue: item.label, second: item?.second })}
-			right={() => (selected ? <List.Icon name='check' color={colors.tintColor} /> : null)}
+			right={() => (selected ? <List.Icon name='check' color={colors.badgeBackgroundLevel2} /> : null)}
 			onPress={onItemPress}
 			translateTitle={false}
 		/>
diff --git a/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx b/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx
index 62594872f..d6fa7bb4a 100644
--- a/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx
+++ b/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx
@@ -63,7 +63,7 @@ export function DeleteAccountActionSheetContent(): React.ReactElement {
 			testID='profile-view-delete-account-sheet'
 			iconName='warning'
 			confirmTitle={i18n.t('Delete_Account')}
-			confirmBackgroundColor={colors.dangerColor}
+			confirmBackgroundColor={colors.buttonBackgroundDangerDefault}
 		/>
 	);
 }
@@ -93,7 +93,7 @@ function ConfirmDeleteAccountActionSheetContent({ changeOwnerRooms = '', removed
 			placeholder={i18n.t('Password')}
 			testID='room-info-edit-view-name'
 			confirmTitle={i18n.t('Delete_Account_confirm')}
-			confirmBackgroundColor={colors.dangerColor}
+			confirmBackgroundColor={colors.buttonBackgroundDangerDefault}
 			showInput={false}
 			customText={
 				<>
diff --git a/app/views/ProfileView/index.tsx b/app/views/ProfileView/index.tsx
index 54453cc0a..af89b84f9 100644
--- a/app/views/ProfileView/index.tsx
+++ b/app/views/ProfileView/index.tsx
@@ -320,7 +320,7 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 				key={key}
 				testID={key}
 				onPress={onPress}
-				style={[styles.avatarButton, { opacity: disabled ? 0.5 : 1 }, { backgroundColor: themes[theme].borderColor }]}
+				style={[styles.avatarButton, { opacity: disabled ? 0.5 : 1 }, { backgroundColor: themes[theme].strokeLight }]}
 				enabled={!disabled}
 			>
 				{child}
@@ -554,7 +554,7 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 							<Button
 								title={I18n.t('Delete_my_account')}
 								type='primary'
-								backgroundColor={themes[theme].dangerColor}
+								backgroundColor={themes[theme].buttonBackgroundDangerDefault}
 								onPress={this.deleteOwnAccount}
 								testID='profile-view-delete-my-account'
 							/>
diff --git a/app/views/ReadReceiptView/index.tsx b/app/views/ReadReceiptView/index.tsx
index 7ce77320f..13687fa69 100644
--- a/app/views/ReadReceiptView/index.tsx
+++ b/app/views/ReadReceiptView/index.tsx
@@ -109,7 +109,7 @@ class ReadReceiptView extends React.Component<IReadReceiptViewProps, IReadReceip
 				style={[styles.listEmptyContainer, { backgroundColor: themes[theme].surfaceTint }]}
 				testID='read-receipt-view'
 			>
-				<Text style={[styles.emptyText, { color: themes[theme].auxiliaryTintColor }]}>{I18n.t('No_Read_Receipts')}</Text>
+				<Text style={[styles.emptyText, { color: themes[theme].strokeHighlight }]}>{I18n.t('No_Read_Receipts')}</Text>
 			</View>
 		);
 	};
diff --git a/app/views/RegisterView.tsx b/app/views/RegisterView.tsx
index 0a3292946..5f952d82b 100644
--- a/app/views/RegisterView.tsx
+++ b/app/views/RegisterView.tsx
@@ -313,7 +313,7 @@ class RegisterView extends React.Component<IProps, any> {
 							<Text style={[styles.bottomContainerText, { color: themes[theme].fontSecondaryInfo }]}>
 								{I18n.t('Do_you_have_an_account')}
 							</Text>
-							<Text style={[styles.bottomContainerTextBold, { color: themes[theme].actionTintColor }]} onPress={this.login}>
+							<Text style={[styles.bottomContainerTextBold, { color: themes[theme].strokeHighlight }]} onPress={this.login}>
 								{I18n.t('Login')}
 							</Text>
 						</View>
diff --git a/app/views/ReportUserView/index.tsx b/app/views/ReportUserView/index.tsx
index 5040e0bfe..3a187c2b3 100644
--- a/app/views/ReportUserView/index.tsx
+++ b/app/views/ReportUserView/index.tsx
@@ -98,7 +98,7 @@ const ReportUserView = () => {
 					<Button
 						title={I18n.t('Report')}
 						type='primary'
-						backgroundColor={colors.dangerColor}
+						backgroundColor={colors.buttonBackgroundDangerDefault}
 						disabled={!isValid}
 						onPress={handleSubmit(submit)}
 						testID='report-user-view-submit'
diff --git a/app/views/RoomActionsView/index.tsx b/app/views/RoomActionsView/index.tsx
index 3a9e2a995..0a49fab7a 100644
--- a/app/views/RoomActionsView/index.tsx
+++ b/app/views/RoomActionsView/index.tsx
@@ -904,9 +904,9 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 								})
 							}
 							testID='room-actions-block-user'
-							left={() => <List.Icon name='warning' color={themes[theme].dangerColor} />}
+							left={() => <List.Icon name='warning' color={themes[theme].buttonBackgroundDangerDefault} />}
 							showActionIndicator
-							color={themes[theme].dangerColor}
+							color={themes[theme].buttonBackgroundDangerDefault}
 						/>
 						<List.Separator />
 					</List.Section>
@@ -927,9 +927,9 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 							})
 						}
 						testID='room-actions-leave-channel'
-						left={() => <List.Icon name='logout' color={themes[theme].dangerColor} />}
+						left={() => <List.Icon name='logout' color={themes[theme].buttonBackgroundDangerDefault} />}
 						showActionIndicator
-						color={themes[theme].dangerColor}
+						color={themes[theme].buttonBackgroundDangerDefault}
 					/>
 					<List.Separator />
 				</List.Section>
@@ -1072,13 +1072,13 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 				<>
 					<List.Item
 						title='Close'
-						color={themes[theme].dangerColor}
+						color={themes[theme].buttonBackgroundDangerDefault}
 						onPress={() =>
 							this.onPressTouchable({
 								event: this.closeLivechat
 							})
 						}
-						left={() => <List.Icon name='chat-close' color={themes[theme].dangerColor} />}
+						left={() => <List.Icon name='chat-close' color={themes[theme].buttonBackgroundDangerDefault} />}
 						showActionIndicator
 					/>
 					<List.Separator />
diff --git a/app/views/RoomInfoEditView/index.tsx b/app/views/RoomInfoEditView/index.tsx
index acc9e9bc1..7b8141434 100644
--- a/app/views/RoomInfoEditView/index.tsx
+++ b/app/views/RoomInfoEditView/index.tsx
@@ -710,7 +710,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 								testID='room-info-edit-view-reset'
 							>
 								<Text
-									style={[styles.button, styles.button_inverted, { color: themes[theme].bodyText }]}
+									style={[styles.button, styles.button_inverted, { color: themes[theme].fontDefault }]}
 									accessibilityRole='button'
 								>
 									{I18n.t('RESET')}
diff --git a/app/views/RoomInfoView/components/RoomInfoButtons.tsx b/app/views/RoomInfoView/components/RoomInfoButtons.tsx
index 74be791c4..e37fe52c9 100644
--- a/app/views/RoomInfoView/components/RoomInfoButtons.tsx
+++ b/app/views/RoomInfoView/components/RoomInfoButtons.tsx
@@ -26,7 +26,7 @@ function BaseButton({
 	enabled?: boolean;
 }): React.ReactElement | null {
 	const { colors } = useTheme();
-	const color = danger ? colors.dangerColor : colors.actionTintColor;
+	const color = danger ? colors.buttonBackgroundDangerDefault : colors.strokeHighlight;
 
 	if (showIcon)
 		return (
diff --git a/app/views/RoomView/Banner.tsx b/app/views/RoomView/Banner.tsx
index 0a4c581ca..d03f60525 100644
--- a/app/views/RoomView/Banner.tsx
+++ b/app/views/RoomView/Banner.tsx
@@ -27,7 +27,7 @@ const Banner = React.memo(
 			return (
 				<>
 					<BorderlessButton
-						style={[styles.bannerContainer, { backgroundColor: themes[theme].bannerBackground }]}
+						style={[styles.bannerContainer, { backgroundColor: themes[theme].surfaceNeutral }]}
 						testID='room-view-banner'
 						onPress={toggleModal}
 					>
@@ -44,7 +44,7 @@ const Banner = React.memo(
 						animationIn='fadeIn'
 						animationOut='fadeOut'
 					>
-						<View style={[styles.modalView, { backgroundColor: themes[theme].bannerBackground }]}>
+						<View style={[styles.modalView, { backgroundColor: themes[theme].surfaceNeutral }]}>
 							<Text style={[styles.bannerModalTitle, { color: themes[theme].fontSecondaryInfo }]}>{title}</Text>
 							<ScrollView style={styles.modalScrollView}>
 								<Markdown msg={text} theme={theme} />
diff --git a/app/views/RoomView/List/components/NavBottomFAB.tsx b/app/views/RoomView/List/components/NavBottomFAB.tsx
index e78ff6859..38cd02b43 100644
--- a/app/views/RoomView/List/components/NavBottomFAB.tsx
+++ b/app/views/RoomView/List/components/NavBottomFAB.tsx
@@ -37,8 +37,8 @@ const NavBottomFAB = memo(
 		return (
 			<View style={[styles.container, positionStyle]} testID='nav-jump-to-bottom'>
 				<Touch onPress={() => onPress()} style={[styles.button, { backgroundColor: colors.surfaceRoom }]}>
-					<View style={[styles.content, { borderColor: colors.borderColor }]}>
-						<CustomIcon name='chevron-down' color={colors.auxiliaryTintColor} size={36} />
+					<View style={[styles.content, { borderColor: colors.strokeLight }]}>
+						<CustomIcon name='chevron-down' color={colors.strokeHighlight} size={36} />
 					</View>
 				</Touch>
 			</View>
diff --git a/app/views/RoomView/Separator.tsx b/app/views/RoomView/Separator.tsx
index 96048cf0d..a4605a1ec 100644
--- a/app/views/RoomView/Separator.tsx
+++ b/app/views/RoomView/Separator.tsx
@@ -34,7 +34,7 @@ const styles = StyleSheet.create({
 const DateSeparator = ({ ts, unread }: { ts: Date | string | null; unread: boolean }): React.ReactElement => {
 	const { theme } = useTheme();
 	const date = ts ? moment(ts).format('LL') : null;
-	const unreadLine = { backgroundColor: themes[theme].dangerColor };
+	const unreadLine = { backgroundColor: themes[theme].buttonBackgroundDangerDefault };
 	const unreadText = { color: themes[theme].fontDanger };
 	if (ts && unread) {
 		return (
@@ -48,9 +48,9 @@ const DateSeparator = ({ ts, unread }: { ts: Date | string | null; unread: boole
 	if (ts) {
 		return (
 			<View style={styles.container}>
-				<View style={[styles.line, { backgroundColor: themes[theme].borderColor }]} />
+				<View style={[styles.line, { backgroundColor: themes[theme].strokeLight }]} />
 				<Text style={[styles.text, { color: themes[theme].fontSecondaryInfo }, styles.marginHorizontal]}>{date}</Text>
-				<View style={[styles.line, { backgroundColor: themes[theme].borderColor }]} />
+				<View style={[styles.line, { backgroundColor: themes[theme].strokeLight }]} />
 			</View>
 		);
 	}
diff --git a/app/views/RoomView/UploadProgress.tsx b/app/views/RoomView/UploadProgress.tsx
index 4c3e38927..47c6bdb89 100644
--- a/app/views/RoomView/UploadProgress.tsx
+++ b/app/views/RoomView/UploadProgress.tsx
@@ -183,19 +183,19 @@ class UploadProgress extends Component<IUploadProgressProps, IUploadProgressStat
 				</View>,
 				<View
 					key='progress'
-					style={[styles.progress, { width: (width * (item.progress ?? 0)) / 100, backgroundColor: themes[theme!].tintColor }]}
+					style={[styles.progress, { width: (width * (item.progress ?? 0)) / 100, backgroundColor: themes[theme!].badgeBackgroundLevel2 }]}
 				/>
 			];
 		}
 		return (
 			<View style={styles.row}>
-				<CustomIcon name='warning' size={20} color={themes[theme!].dangerColor} />
+				<CustomIcon name='warning' size={20} color={themes[theme!].buttonBackgroundDangerDefault} />
 				<View style={styles.descriptionContainer}>
 					<Text style={[styles.descriptionText, { color: themes[theme!].fontSecondaryInfo }]} numberOfLines={1}>
 						{I18n.t('Error_uploading')} {item.name}
 					</Text>
 					<TouchableOpacity onPress={() => this.tryAgain(item)}>
-						<Text style={[styles.tryAgainButtonText, { color: themes[theme!].tintColor }]}>{I18n.t('Try_again')}</Text>
+						<Text style={[styles.tryAgainButtonText, { color: themes[theme!].badgeBackgroundLevel2 }]}>{I18n.t('Try_again')}</Text>
 					</TouchableOpacity>
 				</View>
 				<CustomIcon name='close' size={20} color={themes[theme!].fontSecondaryInfo} onPress={() => this.deleteUpload(item)} />
@@ -215,7 +215,7 @@ class UploadProgress extends Component<IUploadProgressProps, IUploadProgressStat
 					index !== 0 ? { marginTop: 4 } : {},
 					{
 						backgroundColor: themes[theme!].surfaceTint,
-						borderColor: themes[theme!].borderColor
+						borderColor: themes[theme!].strokeLight
 					}
 				]}
 			>
diff --git a/app/views/RoomView/index.tsx b/app/views/RoomView/index.tsx
index fbf7fc8df..b0b965748 100644
--- a/app/views/RoomView/index.tsx
+++ b/app/views/RoomView/index.tsx
@@ -1370,7 +1370,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 					<Text style={[styles.previewMode, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('Chat_is_on_hold')}</Text>
 					<Touch
 						onPress={this.resumeRoom}
-						style={[styles.joinRoomButton, { backgroundColor: themes[theme].actionTintColor }]}
+						style={[styles.joinRoomButton, { backgroundColor: themes[theme].strokeHighlight }]}
 						enabled={!loading}
 					>
 						<Text style={[styles.joinRoomText, { color: themes[theme].fontWhite }]} testID='room-view-chat-on-hold-button'>
@@ -1386,7 +1386,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 					<Text style={[styles.previewMode, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('You_are_in_preview_mode')}</Text>
 					<Touch
 						onPress={this.joinRoom}
-						style={[styles.joinRoomButton, { backgroundColor: themes[theme].actionTintColor }]}
+						style={[styles.joinRoomButton, { backgroundColor: themes[theme].strokeHighlight }]}
 						enabled={!loading}
 					>
 						<Text style={[styles.joinRoomText, { color: themes[theme].fontWhite }]} testID='room-view-join-button'>
diff --git a/app/views/RoomsListView/ListHeader/index.tsx b/app/views/RoomsListView/ListHeader/index.tsx
index e460f9a5a..9fea70e86 100644
--- a/app/views/RoomsListView/ListHeader/index.tsx
+++ b/app/views/RoomsListView/ListHeader/index.tsx
@@ -38,7 +38,7 @@ const ListHeader = React.memo(
 							}
 							left={() => <List.Icon name='encrypted' color={themes[theme].fontWhite} />}
 							underlayColor={themes[theme].strokeHighlight}
-							backgroundColor={themes[theme].actionTintColor}
+							backgroundColor={themes[theme].strokeHighlight}
 							color={themes[theme].fontWhite}
 							onPress={goEncryption}
 							testID='listheader-encryption'
diff --git a/app/views/RoomsListView/ServerDropdown.tsx b/app/views/RoomsListView/ServerDropdown.tsx
index d823314c6..44790aa59 100644
--- a/app/views/RoomsListView/ServerDropdown.tsx
+++ b/app/views/RoomsListView/ServerDropdown.tsx
@@ -215,7 +215,7 @@ class ServerDropdown extends Component<IServerDropdownProps, IServerDropdownStat
 					<View style={[styles.dropdownContainerHeader, styles.serverHeader, { borderColor: themes[theme].strokeLight }]}>
 						<Text style={[styles.serverHeaderText, { color: themes[theme].fontSecondaryInfo }]}>{I18n.t('Server')}</Text>
 						<TouchableOpacity onPress={this.addServer} testID='rooms-list-header-server-add'>
-							<Text style={[styles.serverHeaderAdd, { color: themes[theme].tintColor }]}>{I18n.t('Add_Server')}</Text>
+							<Text style={[styles.serverHeaderAdd, { color: themes[theme].badgeBackgroundLevel2 }]}>{I18n.t('Add_Server')}</Text>
 						</TouchableOpacity>
 					</View>
 					<FlatList
@@ -233,7 +233,7 @@ class ServerDropdown extends Component<IServerDropdownProps, IServerDropdownStat
 						onPress={this.createWorkspace}
 						testID='rooms-list-header-create-workspace-button'
 						style={styles.buttonCreateWorkspace}
-						color={themes[theme].tintColor}
+						color={themes[theme].badgeBackgroundLevel2}
 						styleText={[styles.serverHeaderAdd, { textAlign: 'center' }]}
 					/>
 				</Animated.View>
diff --git a/app/views/RoomsListView/index.tsx b/app/views/RoomsListView/index.tsx
index 541cb0105..0070f927b 100644
--- a/app/views/RoomsListView/index.tsx
+++ b/app/views/RoomsListView/index.tsx
@@ -433,7 +433,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 
 		const getBadge = () => {
 			if (supportedVersionsStatus === 'warn') {
-				return <HeaderButton.BadgeWarn color={colors[theme].dangerColor} />;
+				return <HeaderButton.BadgeWarn color={colors[theme].buttonBackgroundDangerDefault} />;
 			}
 			if (notificationPresenceCap) {
 				return <HeaderButton.BadgeWarn color={colors[theme].userPresenceDisabled} />;
@@ -941,7 +941,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 		const { theme } = this.props;
 		return (
 			<View style={[styles.groupTitleContainer, { backgroundColor: themes[theme].surfaceRoom }]}>
-				<Text style={[styles.groupTitle, { color: themes[theme].controlText }]}>{I18n.t(header)}</Text>
+				<Text style={[styles.groupTitle, { color: themes[theme].fontHint }]}>{I18n.t(header)}</Text>
 			</View>
 		);
 	};
diff --git a/app/views/ScreenLockConfigView.tsx b/app/views/ScreenLockConfigView.tsx
index 04f82f055..92a15eb72 100644
--- a/app/views/ScreenLockConfigView.tsx
+++ b/app/views/ScreenLockConfigView.tsx
@@ -172,7 +172,7 @@ class ScreenLockConfigView extends React.Component<IScreenLockConfigViewProps, I
 
 	renderIcon = () => {
 		const { theme } = this.props;
-		return <List.Icon name='check' color={themes[theme].tintColor} />;
+		return <List.Icon name='check' color={themes[theme].badgeBackgroundLevel2} />;
 	};
 
 	renderItem = ({ item }: { item: IItem }) => {
diff --git a/app/views/SelectListView.tsx b/app/views/SelectListView.tsx
index 14f358950..e46060021 100644
--- a/app/views/SelectListView.tsx
+++ b/app/views/SelectListView.tsx
@@ -62,7 +62,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 		super(props);
 		const data = props.route?.params?.data;
 		this.title = props.route?.params?.title;
-		this.infoText = props.route?.params?.infoText ?? '';
+		this.fontHint = props.route?.params?.fontHint ?? '';
 		this.nextAction = props.route?.params?.nextAction;
 		this.showAlert = props.route?.params?.showAlert ?? (() => {});
 		this.isSearch = props.route?.params?.isSearch ?? false;
@@ -102,7 +102,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 		const { theme } = this.props;
 		return (
 			<View style={{ backgroundColor: themes[theme].surfaceRoom }}>
-				<Text style={[styles.buttonText, { color: themes[theme].bodyText }]}>{I18n.t(this.infoText)}</Text>
+				<Text style={[styles.buttonText, { color: themes[theme].fontDefault }]}>{I18n.t(this.fontHint)}</Text>
 			</View>
 		);
 	};
@@ -153,7 +153,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 			<RadioButton
 				testID={selected ? `radio-button-selected-${item.name}` : `radio-button-unselected-${item.name}`}
 				selected={selected.includes(item.rid)}
-				color={themes[theme].actionTintColor}
+				color={themes[theme].strokeHighlight}
 				size={ICON_SIZE}
 			/>
 		);
@@ -162,7 +162,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 				<List.Icon
 					testID={checked ? `${item.name}-checked` : `${item.name}-unchecked`}
 					name={checked}
-					color={themes[theme].actionTintColor}
+					color={themes[theme].strokeHighlight}
 				/>
 			) : null;
 
@@ -175,7 +175,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 					testID={`select-list-view-item-${item.name}`}
 					onPress={() => (item.alert ? this.showAlert() : this.toggleItem(item.rid))}
 					alert={item.alert}
-					left={() => <List.Icon name={icon} color={themes[theme].controlText} />}
+					left={() => <List.Icon name={icon} color={themes[theme].fontHint} />}
 					right={() => (this.isRadio ? showRadio() : showCheck())}
 				/>
 			</>
diff --git a/app/views/SelectedUsersView/Header.tsx b/app/views/SelectedUsersView/Header.tsx
index 31fb0d2a9..e92f91311 100644
--- a/app/views/SelectedUsersView/Header.tsx
+++ b/app/views/SelectedUsersView/Header.tsx
@@ -45,7 +45,7 @@ const Header = ({
 			<SearchBox onChangeText={(text: string) => onChangeText(text)} testID='select-users-view-search' />
 			{users.length === 0 ? null : (
 				<View>
-					<Text style={[styles.selectedText, { color: themes[theme].auxiliaryTintColor }]}>
+					<Text style={[styles.selectedText, { color: themes[theme].strokeHighlight }]}>
 						{I18n.t('N_Selected_members', { n: users.length })}
 					</Text>
 					<FlatList
diff --git a/app/views/SelectedUsersView/index.tsx b/app/views/SelectedUsersView/index.tsx
index 127964b40..9cb912434 100644
--- a/app/views/SelectedUsersView/index.tsx
+++ b/app/views/SelectedUsersView/index.tsx
@@ -165,7 +165,7 @@ const SelectedUsersView = () => {
 							onPress={() => _onPressItem(item)}
 							testID={`select-users-view-item-${item.name}`}
 							icon={isChecked(username) ? 'checkbox-checked' : 'checkbox-unchecked'}
-							iconColor={isChecked(username) ? colors.actionTintColor : colors.strokeLight}
+							iconColor={isChecked(username) ? colors.strokeHighlight : colors.strokeLight}
 						/>
 					);
 				}}
diff --git a/app/views/SettingsView/index.tsx b/app/views/SettingsView/index.tsx
index adb1210cb..708db42c0 100644
--- a/app/views/SettingsView/index.tsx
+++ b/app/views/SettingsView/index.tsx
@@ -269,7 +269,7 @@ const SettingsView = (): React.ReactElement => {
 						testID='settings-view-clear-cache'
 						onPress={handleClearCache}
 						showActionIndicator
-						color={colors.dangerColor}
+						color={colors.buttonBackgroundDangerDefault}
 					/>
 					<List.Separator />
 					<List.Item
@@ -277,7 +277,7 @@ const SettingsView = (): React.ReactElement => {
 						testID='settings-logout'
 						onPress={handleLogout}
 						showActionIndicator
-						color={colors.dangerColor}
+						color={colors.buttonBackgroundDangerDefault}
 					/>
 					<List.Separator />
 				</List.Section>
diff --git a/app/views/ShareListView/index.tsx b/app/views/ShareListView/index.tsx
index a7591da90..ee6a5c70e 100644
--- a/app/views/ShareListView/index.tsx
+++ b/app/views/ShareListView/index.tsx
@@ -436,7 +436,7 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
 						contentContainerStyle={[styles.container, styles.centered, { backgroundColor: themes[theme].surfaceRoom }]}
 					>
 						<Text style={[styles.permissionTitle, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('Read_External_Permission')}</Text>
-						<Text style={[styles.permissionMessage, { color: themes[theme].bodyText }]}>
+						<Text style={[styles.permissionMessage, { color: themes[theme].fontDefault }]}>
 							{I18n.t('Read_External_Permission_Message')}
 						</Text>
 					</ScrollView>
diff --git a/app/views/ShareView/Preview.tsx b/app/views/ShareView/Preview.tsx
index b726ed637..a19132ee7 100644
--- a/app/views/ShareView/Preview.tsx
+++ b/app/views/ShareView/Preview.tsx
@@ -51,9 +51,9 @@ const IconPreview = React.memo(({ iconName, title, description, theme, width, he
 		style={{ backgroundColor: themes[theme].surfaceHover }}
 		contentContainerStyle={[styles.fileContainer, { width, height }]}
 	>
-		<CustomIcon name={iconName} size={56} color={danger ? themes[theme].dangerColor : themes[theme].tintColor} />
+		<CustomIcon name={iconName} size={56} color={danger ? themes[theme].buttonBackgroundDangerDefault : themes[theme].badgeBackgroundLevel2} />
 		<Text style={[styles.fileName, { color: themes[theme].fontTitlesLabels }]}>{title}</Text>
-		{description ? <Text style={[styles.fileSize, { color: themes[theme].bodyText }]}>{description}</Text> : null}
+		{description ? <Text style={[styles.fileSize, { color: themes[theme].fontDefault }]}>{description}</Text> : null}
 	</ScrollView>
 ));
 
diff --git a/app/views/ShareView/Thumbs.tsx b/app/views/ShareView/Thumbs.tsx
index ac2f2e6ea..320f547b6 100644
--- a/app/views/ShareView/Thumbs.tsx
+++ b/app/views/ShareView/Thumbs.tsx
@@ -82,11 +82,11 @@ const ThumbContent = React.memo(({ item, theme, isShareExtension }: IThumbConten
 	if (type?.match(/image/)) {
 		// Disallow preview of images too big in order to prevent memory issues on iOS share extension
 		if (allowPreview(isShareExtension, item?.size)) {
-			return <Image source={{ uri: item.path }} style={[styles.thumb, { borderColor: themes[theme].borderColor }]} />;
+			return <Image source={{ uri: item.path }} style={[styles.thumb, { borderColor: themes[theme].strokeLight }]} />;
 		}
 		return (
-			<View style={[styles.thumb, { borderColor: themes[theme].borderColor }]}>
-				<CustomIcon name='image' size={30} color={themes[theme].tintColor} />
+			<View style={[styles.thumb, { borderColor: themes[theme].strokeLight }]}>
+				<CustomIcon name='image' size={30} color={themes[theme].badgeBackgroundLevel2} />
 			</View>
 		);
 	}
@@ -94,8 +94,8 @@ const ThumbContent = React.memo(({ item, theme, isShareExtension }: IThumbConten
 	if (type?.match(/video/)) {
 		if (isIOS) {
 			return (
-				<View style={[styles.thumb, { borderColor: themes[theme].borderColor }]}>
-					<CustomIcon name='camera' size={30} color={themes[theme].tintColor} />
+				<View style={[styles.thumb, { borderColor: themes[theme].strokeLight }]}>
+					<CustomIcon name='camera' size={30} color={themes[theme].badgeBackgroundLevel2} />
 				</View>
 			);
 		}
@@ -120,9 +120,9 @@ const Thumb = ({ item, theme, isShareExtension, onPress, onRemove }: IThumb) =>
 			<ThumbContent item={item} theme={theme} isShareExtension={isShareExtension} />
 			<RectButton
 				hitSlop={BUTTON_HIT_SLOP}
-				style={[styles.removeButton, { backgroundColor: themes[theme].bodyText, borderColor: themes[theme].surfaceHover }]}
+				style={[styles.removeButton, { backgroundColor: themes[theme].fontDefault, borderColor: themes[theme].surfaceHover }]}
 				activeOpacity={1}
-				rippleColor={themes[theme].bannerBackground}
+				rippleColor={themes[theme].surfaceNeutral}
 				onPress={() => onRemove(item)}
 			>
 				<View style={[styles.removeView, { borderColor: themes[theme].surfaceHover }]}>
@@ -130,7 +130,7 @@ const Thumb = ({ item, theme, isShareExtension, onPress, onRemove }: IThumb) =>
 				</View>
 			</RectButton>
 			{!item?.canUpload ? (
-				<CustomIcon name='warning' size={20} color={themes[theme].dangerColor} style={styles.dangerIcon} />
+				<CustomIcon name='warning' size={20} color={themes[theme].buttonBackgroundDangerDefault} style={styles.dangerIcon} />
 			) : null}
 		</>
 	</ThumbButton>
diff --git a/app/views/SidebarView/SidebarItem.tsx b/app/views/SidebarView/SidebarItem.tsx
index 90756926d..849d3b6fb 100644
--- a/app/views/SidebarView/SidebarItem.tsx
+++ b/app/views/SidebarView/SidebarItem.tsx
@@ -22,7 +22,7 @@ const Item = React.memo(({ left, right, text, onPress, testID, current, theme, t
 		key={testID}
 		testID={testID}
 		onPress={onPress}
-		style={[styles.item, current && { backgroundColor: themes[theme].borderColor }]}
+		style={[styles.item, current && { backgroundColor: themes[theme].strokeLight }]}
 	>
 		<View style={styles.itemHorizontal}>{left}</View>
 		<View style={styles.itemCenter}>
diff --git a/app/views/SidebarView/index.tsx b/app/views/SidebarView/index.tsx
index 7c69327a4..ed86b1b4e 100644
--- a/app/views/SidebarView/index.tsx
+++ b/app/views/SidebarView/index.tsx
@@ -310,7 +310,7 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 				<SidebarItem
 					text={I18n.t('Supported_versions_warning_update_required')}
 					textColor={themes[theme!].fontDanger}
-					left={<CustomIcon name='warning' size={20} color={themes[theme!].dangerColor} />}
+					left={<CustomIcon name='warning' size={20} color={themes[theme!].buttonBackgroundDangerDefault} />}
 					theme={theme!}
 					onPress={() => this.onPressSupportedVersionsWarning()}
 					testID={`sidebar-supported-versions-warn`}
diff --git a/app/views/ThemeView.tsx b/app/views/ThemeView.tsx
index 1dcdf4af3..7f72e4fd8 100644
--- a/app/views/ThemeView.tsx
+++ b/app/views/ThemeView.tsx
@@ -75,7 +75,7 @@ const Item = ({
 				title={label}
 				onPress={onPress}
 				testID={`theme-view-${value}`}
-				right={() => (isSelected ? <List.Icon name='check' color={colors.tintColor} /> : null)}
+				right={() => (isSelected ? <List.Icon name='check' color={colors.badgeBackgroundLevel2} /> : null)}
 			/>
 			<List.Separator />
 		</>
diff --git a/app/views/UserPreferencesView/ListPicker.tsx b/app/views/UserPreferencesView/ListPicker.tsx
index 03855cede..a47d24e7a 100644
--- a/app/views/UserPreferencesView/ListPicker.tsx
+++ b/app/views/UserPreferencesView/ListPicker.tsx
@@ -70,7 +70,7 @@ const ListPicker = ({
 			testID={testID}
 			onPress={() => showActionSheet({ options: getOptions() })}
 			right={() => (
-				<Text style={[styles.title, { color: colors.actionTintColor }]}>
+				<Text style={[styles.title, { color: colors.strokeHighlight }]}>
 					{option?.label ? I18n.t(option?.label, { defaultValue: option?.label }) : option?.label}
 				</Text>
 			)}
diff --git a/app/views/WorkspaceView/ServerAvatar.tsx b/app/views/WorkspaceView/ServerAvatar.tsx
index df5f5d8bf..f5e1b6343 100644
--- a/app/views/WorkspaceView/ServerAvatar.tsx
+++ b/app/views/WorkspaceView/ServerAvatar.tsx
@@ -35,7 +35,7 @@ const ServerAvatar = React.memo(({ url, image }: IServerAvatar) => {
 
 	return (
 		<View style={styles.container}>
-			{image && <FastImage style={[styles.image, { borderColor: colors.borderColor }]} source={{ uri: `${url}/${image}` }} />}
+			{image && <FastImage style={[styles.image, { borderColor: colors.strokeLight }]} source={{ uri: `${url}/${image}` }} />}
 		</View>
 	);
 });